Skip to content

Commit 7d14a74

Browse files
netpoenetpoe
committed
feat(LatestCollection): grid item WIP
1 parent 535f67d commit 7d14a74

11 files changed

+176
-40
lines changed

‎app/src/pages/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const Index: NextPage = () => {
1616
<meta name="description" content={t("head.og.description")} />
1717
<meta property="og:title" content={t("head.og.title")} />
1818
<meta property="og:description" content={t("head.og.description")} />
19-
<meta property="og:url" content="https://fileagent.ai/" />
19+
<meta property="og:url" content="https://svpervnder.com/" />
2020
</Head>
2121

2222
<Home />

‎app/src/ui/card/Card.module.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import "src/theme/base";
22

33
.card {
4+
border: 1px solid var(--color-dark-9);
45
border-radius: $border-radius-card;
56
background-color: var(--color-background-contrast);
67

‎app/src/ui/mainpanel/MainPanel.module.scss

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
}
88
position: relative;
99
width: 100%;
10+
padding-bottom: $navbar-height * 2;
1011
background-color: var(--color-background);
1112

1213
&--with-navbar {

‎app/src/ui/svpervnder/home/Home.module.scss

-8
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,4 @@
1111
text-align: left;
1212
background-color: var(--color-background);
1313
}
14-
15-
&__latest-collections {
16-
text-align: right;
17-
18-
&--artist-name {
19-
color: var(--color-primary);
20-
}
21-
}
2214
}

‎app/src/ui/svpervnder/home/Home.module.scss.d.ts

-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
export type Styles = {
22
home: string;
33
home__hero: string;
4-
"home__latest-collections": string;
5-
"home__latest-collections--artist-name": string;
64
"z-depth-0": string;
75
"z-depth-1": string;
86
"z-depth-1-half": string;

‎app/src/ui/svpervnder/home/Home.tsx

+4-29
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import clsx from "clsx";
22

33
import { Typography } from "ui/typography/Typography";
44
import { Grid } from "ui/grid/Grid";
5-
import { Button } from "ui/button/Button";
5+
import { LatestCollection } from "../latest-collection/LatestCollection";
66

77
import { HomeProps } from "./Home.types";
88
import styles from "./Home.module.scss";
99

10-
export const Home: React.FC<HomeProps> = ({ children, className }) => (
10+
export const Home: React.FC<HomeProps> = ({ className }) => (
1111
<div className={clsx(styles.home, className)}>
1212
<Grid.Container>
1313
<Grid.Row>
@@ -22,32 +22,7 @@ export const Home: React.FC<HomeProps> = ({ children, className }) => (
2222
</Grid.Col>
2323
</Grid.Row>
2424
</Grid.Container>
25-
<Grid.Container>
26-
<Grid.Row justify="end">
27-
<Grid.Col lg={8} sm={12} xs={12}>
28-
<div />
29-
</Grid.Col>
30-
<Grid.Col lg={4} sm={12} xs={12}>
31-
<div className={styles["home__latest-collections"]}>
32-
<Typography.Headline5>Latest Collection</Typography.Headline5>
33-
<Typography.Headline4 className={styles["home__latest-collections--artist-name"]}>
34-
larskristo: hellheads
35-
</Typography.Headline4>
36-
<Typography.Description>31/150 Sold</Typography.Description>
37-
<Typography.Text>
38-
Lars Kristoffer Hormander’s Hellheads is the latest from its #darkart creations. Featuring an astonishing
39-
150 items series of digital handcraft mastery. Own one of this limited art today.
40-
</Typography.Text>
41-
<Grid.Row>
42-
<Grid.Col>
43-
<Button color="secondary" size="s" variant="outlined">
44-
See Artist
45-
</Button>
46-
</Grid.Col>
47-
</Grid.Row>
48-
</div>
49-
</Grid.Col>
50-
</Grid.Row>
51-
</Grid.Container>
25+
26+
<LatestCollection />
5227
</div>
5328
);

‎app/src/ui/svpervnder/latest-collection/LatestCollection.module.scss

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
@import "src/theme/base";
2+
@import "src/ui/typography/variables";
3+
4+
.latest-collection {
5+
display: block;
6+
7+
&__intro {
8+
text-align: right;
9+
10+
&--artist-name {
11+
color: var(--color-primary);
12+
}
13+
}
14+
15+
&__grid {
16+
margin-top: $space-l;
17+
}
18+
19+
&__item {
20+
display: block;
21+
margin-bottom: $space-default;
22+
23+
&--img {
24+
padding: $space-xs;
25+
26+
img {
27+
width: 100%;
28+
}
29+
}
30+
31+
&--price-row {
32+
display: flex;
33+
justify-content: space-between;
34+
35+
> div {
36+
display: flex;
37+
flex-direction: column;
38+
justify-content: center;
39+
align-items: center;
40+
}
41+
}
42+
43+
&--price {
44+
color: var(--color-typography-text);
45+
46+
span {
47+
color: var(--color-typography-description);
48+
}
49+
}
50+
51+
&--expand {
52+
font-size: $font-size-text;
53+
color: var(--color-typography-description);
54+
}
55+
}
56+
}

‎app/src/ui/svpervnder/latest-collection/LatestCollection.module.scss.d.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export type Styles = {
2+
"latest-collection": string;
3+
"latest-collection__grid": string;
4+
"latest-collection__intro": string;
5+
"latest-collection__intro--artist-name": string;
6+
"latest-collection__item": string;
7+
"latest-collection__item--expand": string;
8+
"latest-collection__item--img": string;
9+
"latest-collection__item--price": string;
10+
"latest-collection__item--price-row": string;
11+
"z-depth-0": string;
12+
"z-depth-1": string;
13+
"z-depth-1-half": string;
14+
"z-depth-2": string;
15+
"z-depth-3": string;
16+
"z-depth-4": string;
17+
"z-depth-5": string;
18+
};
19+
20+
export type ClassNames = keyof Styles;
21+
22+
declare const styles: Styles;
23+
24+
export default styles;

‎app/src/ui/svpervnder/latest-collection/LatestCollection.test.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { screen, render } from "tests";
2+
3+
import { LatestCollection } from "./LatestCollection";
4+
5+
describe("LatestCollection", () => {
6+
it("renders children correctly", () => {
7+
render(<LatestCollection>LatestCollection</LatestCollection>);
8+
9+
const element = screen.getByText("LatestCollection");
10+
11+
expect(element).toBeInTheDocument();
12+
});
13+
});

‎app/src/ui/svpervnder/latest-collection/LatestCollection.tsx

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import clsx from "clsx";
2+
3+
import { Grid } from "ui/grid/Grid";
4+
import { Typography } from "ui/typography/Typography";
5+
import { Button } from "ui/button/Button";
6+
import { Card } from "ui/card/Card";
7+
import { Icon } from "ui/icon/Icon";
8+
9+
import styles from "./LatestCollection.module.scss";
10+
import { LatestCollectionProps } from "./LatestCollection.types";
11+
12+
export const LatestCollection: React.FC<LatestCollectionProps> = ({ className }) => (
13+
<div className={clsx(styles["latest-collection"], className)}>
14+
<Grid.Container>
15+
<Grid.Row justify="end">
16+
<Grid.Col lg={8} sm={12} xs={12}>
17+
<div />
18+
</Grid.Col>
19+
<Grid.Col lg={4} sm={12} xs={12}>
20+
<div className={styles["latest-collection__intro"]}>
21+
<Typography.Headline5>Latest Collection</Typography.Headline5>
22+
<Typography.Headline4 className={styles["latest-collection__intro--artist-name"]}>
23+
larskristo: hellheads
24+
</Typography.Headline4>
25+
<Typography.Description>31/150 Sold</Typography.Description>
26+
<Typography.Text>
27+
Lars Kristoffer Hormander’s Hellheads is the latest from its #darkart creations. Featuring an astonishing
28+
150 items series of digital handcraft mastery. Own one of this limited art today.
29+
</Typography.Text>
30+
<Grid.Row>
31+
<Grid.Col>
32+
<Button color="secondary" size="s" variant="outlined">
33+
See Artist
34+
</Button>
35+
</Grid.Col>
36+
</Grid.Row>
37+
</div>
38+
</Grid.Col>
39+
</Grid.Row>
40+
41+
<section className={styles["latest-collection__grid"]}>
42+
<Grid.Row>
43+
<Grid.Col lg={2}>
44+
<Card className={styles["latest-collection__item"]}>
45+
<div className={styles["latest-collection__item--img"]}>
46+
<img
47+
src="https://blockchainassetregistry.infura-ipfs.io/ipfs/bafybeifwil5ygel6cw2kdplp5s74qeyg64wydpoiko7or42pb2n45outd4/058.JPG"
48+
alt="058"
49+
/>
50+
</div>
51+
<Card.Content>
52+
<Typography.Description>#598</Typography.Description>
53+
<div className={styles["latest-collection__item--price-row"]}>
54+
<div>
55+
<Typography.TextLead flat className={styles["latest-collection__item--price"]}>
56+
1.75 <span>ETH</span>
57+
</Typography.TextLead>
58+
</div>
59+
<div>
60+
<Icon name="icon-expand" className={styles["latest-collection__item--expand"]} />
61+
</div>
62+
</div>
63+
</Card.Content>
64+
</Card>
65+
</Grid.Col>
66+
</Grid.Row>
67+
</section>
68+
</Grid.Container>
69+
</div>
70+
);

‎app/src/ui/svpervnder/latest-collection/LatestCollection.types.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { ReactNode } from "react";
2+
3+
export type LatestCollectionProps = {
4+
children?: ReactNode;
5+
className?: string;
6+
};

0 commit comments

Comments
 (0)