Skip to content

Commit 6bfdee0

Browse files
alcercujaybuidl
alcercu
authored and
jaybuidl
committed
feat(web): add cases page
1 parent 9222226 commit 6bfdee0

File tree

9 files changed

+258
-7
lines changed

9 files changed

+258
-7
lines changed

‎web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
"@graphql-codegen/typescript": "^2.4.9",
5757
"@graphql-codegen/typescript-operations": "^2.4.2",
5858
"@kleros/kleros-v2-contracts": "workspace:^",
59-
"@kleros/ui-components-library": "^1.1.0",
59+
"@kleros/ui-components-library": "^1.3.0",
6060
"chart.js": "^3.7.1",
6161
"chartjs-adapter-moment": "^1.0.0",
6262
"core-js": "^3.21.1",

‎web/src/app.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { request } from "graphql-request";
55
import { Routes, Route } from "react-router-dom";
66
import Layout from "layout/index";
77
import Home from "./pages/Home";
8+
import Cases from "./pages/Cases";
89

910
const fetcherBuilder =
1011
(url: string) =>
@@ -26,7 +27,7 @@ const App: React.FC = () => {
2627
<Routes>
2728
<Route path="/" element={<Layout />}>
2829
<Route index element={<Home />} />
29-
<Route path="cases" element={<h1>Cases</h1>} />
30+
<Route path="cases" element={<Cases />} />
3031
<Route path="courts" element={<h1>Courts</h1>} />
3132
<Route path="dashboard" element={<h1>Dashboard</h1>} />
3233
<Route

‎web/src/pages/Cases/CasesMatrix.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { StandardPagination } from "@kleros/ui-components-library";
4+
import DisputeCard from "components/DisputeCard";
5+
6+
const Container = styled.div`
7+
display: flex;
8+
flex-wrap: wrap;
9+
gap: 8px;
10+
`;
11+
12+
// 24px as margin-top since we already have 8px from the flex gap
13+
const StyledPagination = styled(StandardPagination)`
14+
margin-top: 24px;
15+
margin-left: auto;
16+
margin-right: auto;
17+
`;
18+
19+
const CasesMatrix: React.FC = () => (
20+
<Container>
21+
<DisputeCard
22+
title="Register Profile in Proof of Humanity"
23+
id={600}
24+
period={1}
25+
court="Humanity"
26+
category="Identity"
27+
rewards="≥ 0.3 ETH"
28+
date={1651244935}
29+
/>
30+
<DisputeCard
31+
title="Register Profile in Proof of Humanity"
32+
id={600}
33+
period={3}
34+
court="Humanity"
35+
category="Identity"
36+
rewards="≥ 0.3 ETH"
37+
date={1651244935}
38+
/>
39+
<DisputeCard
40+
title="Register Profile in Proof of Humanity"
41+
id={600}
42+
period={4}
43+
court="Humanity"
44+
category="Identity"
45+
rewards="≥ 0.3 ETH"
46+
date={1651244935}
47+
/>
48+
<StyledPagination currentPage={1} numPages={1} callback={() => {}} />
49+
</Container>
50+
);
51+
52+
export default CasesMatrix;

‎web/src/pages/Cases/Filters.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from "react";
2+
import styled, { useTheme } from "styled-components";
3+
import { DropdownSelect } from "@kleros/ui-components-library";
4+
5+
const Container = styled.div`
6+
display: flex;
7+
justify-content: end;
8+
gap: 12px;
9+
width: fit-content;
10+
`;
11+
12+
const Filters: React.FC = () => {
13+
const theme = useTheme();
14+
return (
15+
<Container>
16+
<DropdownSelect
17+
smallButton
18+
simpleButton
19+
items={[
20+
{ value: 0, text: "All Cases", dot: theme.primaryText },
21+
{ value: 1, text: "In Progress", dot: theme.primaryBlue },
22+
{ value: 2, text: "Closed", dot: theme.primaryPurple },
23+
{ value: 3, text: "Appeal", dot: theme.tint },
24+
]}
25+
defaultValue={0}
26+
callback={() => {}}
27+
/>
28+
<DropdownSelect
29+
smallButton
30+
simpleButton
31+
items={[
32+
{ value: 0, text: "Newest" },
33+
{ value: 1, text: "Oldest" },
34+
]}
35+
defaultValue={0}
36+
callback={() => {}}
37+
/>
38+
</Container>
39+
);
40+
};
41+
42+
export default Filters;

‎web/src/pages/Cases/Search.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { Searchbar, DropdownCascader } from "@kleros/ui-components-library";
4+
5+
const Container = styled.div`
6+
display: flex;
7+
flex-wrap: wrap;
8+
gap: 8px;
9+
`;
10+
11+
const StyledSearchbar = styled(Searchbar)`
12+
flex: 1;
13+
flex-basis: 310px;
14+
input {
15+
font-size: 16px;
16+
height: 45px;
17+
padding-top: 0px;
18+
padding-bottom: 0px;
19+
}
20+
`;
21+
22+
const Search: React.FC = () => (
23+
<Container>
24+
<StyledSearchbar />
25+
<DropdownCascader
26+
placeholder={"Select Court"}
27+
onSelect={() => {
28+
// Called with the item value when select is clicked
29+
}}
30+
items={[
31+
{
32+
label: "General Court",
33+
value: 0,
34+
children: [
35+
{
36+
label: "Blockchain",
37+
value: 1,
38+
children: [
39+
{
40+
label: "Technical",
41+
value: 2,
42+
},
43+
{
44+
label: "Non-technical",
45+
value: 3,
46+
},
47+
{
48+
label: "Other",
49+
value: 4,
50+
},
51+
],
52+
},
53+
{
54+
label: "Marketing Services",
55+
value: 5,
56+
},
57+
],
58+
},
59+
]}
60+
/>
61+
</Container>
62+
);
63+
64+
export default Search;

‎web/src/pages/Cases/Stats.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
const FieldWrapper = styled.div`
5+
display: inline-flex;
6+
gap: 8px;
7+
`;
8+
9+
const Field: React.FC<{ label: string; value: string }> = ({
10+
label,
11+
value,
12+
}) => (
13+
<FieldWrapper>
14+
<label>{label}</label>
15+
<small>{value}</small>
16+
</FieldWrapper>
17+
);
18+
19+
const SeparatorLabel = styled.label`
20+
margin-left: 8px;
21+
margin-right: 8px;
22+
`;
23+
24+
const Separator: React.FC = () => <SeparatorLabel>|</SeparatorLabel>;
25+
26+
const fields = [
27+
{ label: "Total", value: "600" },
28+
{ label: "In Progress", value: "50" },
29+
{ label: "Closed", value: "550" },
30+
];
31+
32+
const Stats: React.FC = () => (
33+
<div>
34+
{fields.map(({ label, value }, i) => (
35+
<>
36+
<Field key={i} {...{ label, value }} />
37+
{i + 1 < fields.length ? <Separator /> : null}
38+
</>
39+
))}
40+
</div>
41+
);
42+
43+
export default Stats;

‎web/src/pages/Cases/StatsAndFilters.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import Filters from "./Filters";
4+
import Stats from "./Stats";
5+
6+
const Container = styled.div`
7+
display: flex;
8+
flex-wrap: wrap;
9+
gap: 8px;
10+
margin-top: 8px;
11+
`;
12+
13+
const StatsAndFilters: React.FC = () => (
14+
<Container>
15+
<Stats />
16+
<Filters />
17+
</Container>
18+
);
19+
20+
export default StatsAndFilters;

‎web/src/pages/Cases/index.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import Search from "./Search";
4+
import StatsAndFilters from "./StatsAndFilters";
5+
import CasesMatrix from "./CasesMatrix";
6+
7+
const Container = styled.div`
8+
width: 100%;
9+
height: auto;
10+
background-color: ${({ theme }) => theme.lightBackground};
11+
padding: 32px;
12+
`;
13+
14+
const StyledHR = styled.hr`
15+
margin-top: 24px;
16+
margin-bottom: 24px;
17+
`;
18+
19+
const Cases: React.FC = () => (
20+
<Container>
21+
<h1>Cases</h1>
22+
<Search />
23+
<StatsAndFilters />
24+
<StyledHR />
25+
<CasesMatrix />
26+
</Container>
27+
);
28+
29+
export default Cases;

‎yarn.lock‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2305,7 +2305,7 @@ __metadata:
23052305
"@graphql-codegen/typescript": ^2.4.9
23062306
"@graphql-codegen/typescript-operations": ^2.4.2
23072307
"@kleros/kleros-v2-contracts": "workspace:^"
2308-
"@kleros/ui-components-library": ^1.1.0
2308+
"@kleros/ui-components-library": ^1.3.0
23092309
"@parcel/transformer-svg-react": ^2.6.2
23102310
"@types/react": ^18.0.14
23112311
"@types/react-dom": ^18.0.0
@@ -2343,9 +2343,9 @@ __metadata:
23432343
languageName: unknown
23442344
linkType: soft
23452345

2346-
"@kleros/ui-components-library@npm:^1.1.0":
2347-
version: 1.1.0
2348-
resolution: "@kleros/ui-components-library@npm:1.1.0"
2346+
"@kleros/ui-components-library@npm:^1.3.0":
2347+
version: 1.3.0
2348+
resolution: "@kleros/ui-components-library@npm:1.3.0"
23492349
dependencies:
23502350
"@datepicker-react/hooks": ^2.8.4
23512351
"@swc/helpers": ^0.3.2
@@ -2357,7 +2357,7 @@ __metadata:
23572357
simplebar-react: ^2.3.6
23582358
peerDependencies:
23592359
styled-components: ^5.3.3
2360-
checksum: 998583b3c06c4bcd5240bc3e547140370557f1efa2afaa5916951ce9e317d436318843036fd552b35df5dbc3920762a1ed0322743f5a9d48cd084856aa9f2e11
2360+
checksum: d843df17f21c4b149ed632db951306cb8b2234568454a74495fc3d4a347487aaabeb3a5d28c65f467945e5c98be8b66e818346f859ae8474df53dbb1278016f2
23612361
languageName: node
23622362
linkType: hard
23632363

0 commit comments

Comments
 (0)