Skip to content

Commit ee5ea53

Browse files
tractorsstractorss
committed
feat(web): item-page-and-refactoring
1 parent 8f9f364 commit ee5ea53

File tree

11 files changed

+148
-107
lines changed

11 files changed

+148
-107
lines changed

‎web/src/pages/AllLists/RegistryDetails/History/Header.tsx‎ renamed to ‎web/src/components/HistoryDisplay/Header.tsx‎

File renamed without changes.

‎web/src/components/HistoryDisplay/index.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Card, CustomTimeline, _TimelineItem1 as TimelineItem } from "@kleros/ui-components-library";
2+
import React from "react";
3+
import styled from "styled-components";
4+
import Header from "./Header";
5+
6+
const Container = styled(Card)`
7+
display: flex;
8+
width: 100%;
9+
height: auto;
10+
flex-direction: column;
11+
align-items: start;
12+
padding: 22px 32px;
13+
gap: 54px;
14+
`;
15+
16+
const StyledTimeline = styled(CustomTimeline)`
17+
width: 100%;
18+
margin-bottom: 30px;
19+
`;
20+
21+
interface IHistory {
22+
items: TimelineItem[];
23+
}
24+
25+
const History: React.FC<IHistory> = ({ items }) => {
26+
return (
27+
<Container>
28+
<Header />
29+
<StyledTimeline {...{ items }} />
30+
</Container>
31+
);
32+
};
33+
export default History;

‎web/src/pages/AllLists/RegistryDetails/InformationCard/Policies.tsx‎ renamed to ‎web/src/components/InformationCard/Policies.tsx‎

File renamed without changes.

‎web/src/pages/AllLists/RegistryDetails/InformationCard/index.tsx‎ renamed to ‎web/src/components/InformationCard/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,8 @@ interface IInformationCard {
117117
description: string;
118118
chainId: number;
119119
status: string;
120+
isItem?: boolean;
121+
// itemParams?: Object : item will haev dynamic params
120122
}
121123

122124
const InformationCard: React.FC<IInformationCard> = ({
@@ -125,13 +127,14 @@ const InformationCard: React.FC<IInformationCard> = ({
125127
description,
126128
chainId = 100,
127129
status = Status.Included,
130+
isItem = false,
128131
}) => {
129132
return (
130133
<StyledCard>
131134
<TopInfo>
132135
<TopLeftInfo>
133136
<LogoAndTitle>
134-
<StyledLogo src={logoURI} alt="List Img" isList={false} />
137+
{!isItem && <StyledLogo src={logoURI} alt="List Img" isList={false} />}
135138
<h1>{title}</h1>
136139
</LogoAndTitle>
137140
<StyledP>{description}</StyledP>
@@ -150,7 +153,7 @@ const InformationCard: React.FC<IInformationCard> = ({
150153
<Divider />
151154
<BottomInfo>
152155
<AliasDisplay address="0x95222290DD7278Aa3Ddd389Cc1E1d165CC4BAfe5" />
153-
<Button variant="secondary" text="Remove List" />
156+
<Button variant="secondary" text={isItem ? "Remove Item" : "Remove List"} />
154157
</BottomInfo>
155158
<Policies />
156159
</StyledCard>

‎web/src/components/ItemCard/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ const ItemCard: React.FC<IItemCard> = ({ id, title, address, website, status })
118118
const navigateAndScrollTop = useNavigateAndScrollTop();
119119

120120
return (
121-
<StyledListItem hover onClick={() => navigateAndScrollTop(`/lists/${id.toString()}/display/desc/all`)}>
121+
<StyledListItem hover onClick={() => navigateAndScrollTop(`/lists/1/item/${id.toString()}`)}>
122122
<Container>
123123
<TruncatedTitle text={title} maxLength={100} />
124124
<DisplayContainer className="address">

‎web/src/components/RegistriesDisplay/index.tsx‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,9 @@
11
import React from "react";
2-
import styled from "styled-components";
3-
import { responsiveSize } from "styles/responsiveSize";
4-
import { Breadcrumb } from "@kleros/ui-components-library";
52
import Search from "./Search";
63
import RegistriesGrid, { IRegistriesGrid } from "./RegistriesGrid";
7-
import HomeIcon from "svgs/icons/home.svg";
84
import Header from "pages/Home/Header";
95
import StatsAndFilters from "components/StatsAndFilters";
106

11-
const StyledTitle = styled.h1`
12-
margin-bottom: ${responsiveSize(32, 48)};
13-
`;
14-
15-
const StyledHomeIcon = styled(HomeIcon)`
16-
path {
17-
fill: ${({ theme }) => theme.secondaryText};
18-
}
19-
margin-bottom: 3.5px;
20-
`;
21-
22-
const StyledBreadcrumb = styled(Breadcrumb)`
23-
margin-bottom: 32px;
24-
align-items: center;
25-
`;
26-
27-
const breadcrumbItems = [
28-
{ text: <StyledHomeIcon />, value: "0" },
29-
{ text: "All Lists", value: "1" },
30-
];
31-
327
interface IRegistriesDisplay extends IRegistriesGrid {
338
registries: [];
349
totalRegistries?: number;
@@ -47,7 +22,6 @@ const RegistriesDisplay: React.FC<IRegistriesDisplay> = ({
4722
}) => {
4823
return (
4924
<div {...{ className }}>
50-
<StyledBreadcrumb items={breadcrumbItems} />
5125
<Header />
5226
<Search />
5327
<StatsAndFilters fields={[{ label: "Lists", value: totalRegistries?.toString() }]} isListFilter />

‎web/src/pages/AllLists/Item/index.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from "react";
2+
import InformationCard from "components/InformationCard";
3+
import History from "~src/components/HistoryDisplay";
4+
import { useTheme } from "styled-components";
5+
import ClosedIcon from "assets/svgs/icons/check-circle-outline.svg";
6+
7+
interface IItems {
8+
title: string;
9+
description: string;
10+
className?: string;
11+
}
12+
13+
const ItemDisplay: React.FC<IItems> = ({
14+
title = "Address Tags",
15+
description = "A list of public name tags, associated with Ethereum mainnet contract addresses.",
16+
className,
17+
}) => {
18+
const theme = useTheme();
19+
const historyItems = [
20+
{
21+
title: "Item Submitted",
22+
variant: theme.primaryBlue,
23+
subtitle: "April 06, 2022",
24+
rightSided: true,
25+
},
26+
{
27+
title: "Item Challenged",
28+
party: "- Case #1369 by Alice.eth",
29+
variant: theme.secondaryPurple,
30+
subtitle: "April 07, 2022",
31+
rightSided: true,
32+
},
33+
{
34+
title: "Item Submitted",
35+
subtitle: "April 06, 2022",
36+
rightSided: true,
37+
Icon: ClosedIcon,
38+
},
39+
];
40+
41+
return (
42+
<div {...{ className }}>
43+
<InformationCard title={title} description={description} isItem />
44+
<History items={historyItems} />
45+
</div>
46+
);
47+
};
48+
49+
export default ItemDisplay;

‎web/src/pages/AllLists/RegistryDetails/History/index.tsx‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎web/src/pages/AllLists/RegistryDetails/index.tsx‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,12 @@
11
import React from "react";
2-
import styled from "styled-components";
3-
import { Breadcrumb } from "@kleros/ui-components-library";
4-
import HomeIcon from "svgs/icons/home.svg";
52
import { IRegistriesGrid } from "components/RegistriesDisplay/RegistriesGrid";
6-
import InformationCard from "./InformationCard";
3+
import InformationCard from "components/InformationCard";
74
import Tabs from "./Tabs";
85
import List from "./List";
9-
import History from "./History";
6+
import History from "components/HistoryDisplay";
107
import { Navigate, Route, Routes } from "react-router-dom";
11-
12-
const StyledBreadcrumb = styled(Breadcrumb)`
13-
margin-bottom: 32px;
14-
align-items: center;
15-
`;
16-
17-
const StyledHomeIcon = styled(HomeIcon)`
18-
path {
19-
fill: ${({ theme }) => theme.secondaryText};
20-
}
21-
margin-bottom: 3.5px;
22-
`;
23-
24-
const breadcrumbItems = [
25-
{ text: <StyledHomeIcon />, value: "0" },
26-
{ text: "All Lists", value: "1" },
27-
{ text: "Address Tags", value: "2" },
28-
];
8+
import { useTheme } from "styled-components";
9+
import ClosedIcon from "assets/svgs/icons/check-circle-outline.svg";
2910

3011
interface IRegistryDetails extends IRegistriesGrid {
3112
items: [];
@@ -42,14 +23,36 @@ const RegistryDetails: React.FC<IRegistryDetails> = ({
4223
totalItems = 3,
4324
className,
4425
}) => {
26+
const theme = useTheme();
27+
const historyItems = [
28+
{
29+
title: "List Submitted",
30+
variant: theme.primaryBlue,
31+
subtitle: "April 06, 2022",
32+
rightSided: true,
33+
},
34+
{
35+
title: "List Challenged",
36+
party: "- Case #1369 by Alice.eth",
37+
variant: theme.secondaryPurple,
38+
subtitle: "April 07, 2022",
39+
rightSided: true,
40+
},
41+
{
42+
title: "List Submitted",
43+
subtitle: "April 06, 2022",
44+
rightSided: true,
45+
Icon: ClosedIcon,
46+
},
47+
];
48+
4549
return (
4650
<div {...{ className }}>
47-
<StyledBreadcrumb items={breadcrumbItems} />
4851
<InformationCard title={title} logoURI={logoURI} description={description} />
4952
<Tabs />
5053
<Routes>
5154
<Route path="list/:page/:order/:filter" element={<List />} />
52-
<Route path="history" element={<History />} />
55+
<Route path="history" element={<History items={historyItems} />} />
5356
<Route path="*" element={<Navigate to="list/1/desc/all" replace />} />
5457
</Routes>
5558
</div>

‎web/src/pages/AllLists/StyledBreadcrumb.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import styled from "styled-components";
2+
import { Breadcrumb as BreadcrumbBase } from "@kleros/ui-components-library";
3+
4+
const StyledBreadcrumb = styled(BreadcrumbBase)`
5+
margin-bottom: 32px;
6+
align-items: center;
7+
`;
8+
9+
interface IBreadcrumb {
10+
items: { text: string | Element; value: string }[];
11+
}
12+
const Breadcrumb: React.FC<IBreadcrumb> = ({ items }) => <StyledBreadcrumb {...{ items }} />;
13+
14+
export default Breadcrumb;

0 commit comments

Comments
 (0)