Skip to content

Commit ec531d3

Browse files
chailandauchailandau
authored
feat: add screen size (#3)
* feat: add model card * feat: add card grid * feat: add content nav * refactor: consolidate button styles * feat: add header with select * fix: add use client to select * feat: add switchback * feat: add wide container styles * refactor: move error banner styles to global * refactor: add heading gradient to global
1 parent 6074731 commit ec531d3

29 files changed

+592
-75
lines changed

‎src/app/page.tsx‎

Lines changed: 97 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,103 @@
1-
import GeneratedImage from "@/components/GeneratedImage";
1+
import CardGrid from "@/components/CardGrid";
2+
import ContentNav from "@/components/ContentNav/ContentNav";
3+
import ErrorBanner from "@/components/ErrorBanner";
4+
import Switchback from "@/components/Switchback";
25

36
export default function Home() {
47
return (
5-
<main className="container">
6-
<div className="hero">
7-
<h1>
8-
Create your own <span>watercolor masterpiece</span>
9-
</h1>
10-
</div>
11-
12-
<GeneratedImage />
8+
<main className="container wide">
9+
<ContentNav
10+
prevText="Jan 24, 2023"
11+
current="January 25, 2023"
12+
nextText="Jan 26, 2023"
13+
/>
14+
<CardGrid
15+
heading={
16+
<h1>
17+
10 Most <br />
18+
<span>Popular</span> Models
19+
</h1>
20+
}
21+
cards={[
22+
{
23+
icon: "/models/mistral.webp",
24+
modelAuthor: "stabilityai",
25+
modelName: "japanese-stablelm-instruct-alpha-7b",
26+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
27+
},
28+
{
29+
icon: "/models/mistral.webp",
30+
modelAuthor: "mistralai",
31+
modelName: "Mistral-7B-v0.1",
32+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
33+
},
34+
{
35+
icon: "/models/mistral.webp",
36+
modelAuthor: "mistralai",
37+
modelName: "Mistral-7B-v0.1",
38+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
39+
},
40+
{
41+
icon: "/models/mistral.webp",
42+
modelAuthor: "mistralai",
43+
modelName: "Mistral-7B-v0.1",
44+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
45+
},
46+
{
47+
icon: "/models/mistral.webp",
48+
modelAuthor: "mistralai",
49+
modelName: "Mistral-7B-v0.1",
50+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
51+
},
52+
{
53+
icon: "/models/mistral.webp",
54+
modelAuthor: "mistralai",
55+
modelName: "Mistral-7B-v0.1",
56+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
57+
},
58+
{
59+
icon: "/models/mistral.webp",
60+
modelAuthor: "mistralai",
61+
modelName: "Mistral-7B-v0.1",
62+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
63+
},
64+
{
65+
icon: "/models/mistral.webp",
66+
modelAuthor: "mistralai",
67+
modelName: "Mistral-7B-v0.1",
68+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
69+
},
70+
{
71+
icon: "/models/mistral.webp",
72+
modelAuthor: "mistralai",
73+
modelName: "Mistral-7B-v0.1",
74+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
75+
},
76+
{
77+
icon: "/models/mistral.webp",
78+
modelAuthor: "mistralai",
79+
modelName: "Mistral-7B-v0.1",
80+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
81+
},
82+
]}
83+
/>
84+
<Switchback
85+
leftContent={
86+
<h2 className="heading">
87+
<span>45,515</span> text gen
88+
<br /> models existed
89+
</h2>
90+
}
91+
rightContent={
92+
<p>
93+
We like to say that in AI, a week is a month and a month is a year,
94+
and the "latest and greatest model" changes just as quickly. We
95+
tracked the most popular text-gen models starting in January 2023 to
96+
highlight the rapid rate of change in the AI industry. Click through
97+
time to see how quickly the state-of-the-art changes.
98+
</p>
99+
}
100+
/>
13101
</main>
14102
);
15103
}

‎src/components/CardGrid/CardGrid.mdx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
2+
3+
import * as CardGridStories from './CardGrid.stories';
4+
5+
<Meta of={CardGridStories} />
6+
7+
# Card Grid
8+
9+
<Canvas of={CardGridStories.Default} />
10+
11+
### Props Table
12+
13+
<ArgTypes />

‎src/components/CardGrid/CardGrid.stories.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
3+
import CardGrid from ".";
4+
5+
const meta: Meta<typeof CardGrid> = {
6+
title: "Components/Card Grid",
7+
component: CardGrid,
8+
decorators: [
9+
(Story) => (
10+
<main className="container">
11+
<Story />
12+
</main>
13+
),
14+
],
15+
};
16+
17+
export default meta;
18+
19+
type Story = StoryObj<typeof CardGrid>;
20+
21+
export const Default: Story = {
22+
args: {
23+
heading: (
24+
<h1>
25+
10 Most <span>Popular</span>Models
26+
</h1>
27+
),
28+
cards: [
29+
{
30+
icon: "/models/mistral.webp",
31+
modelAuthor: "mistralai",
32+
modelName: "Mistral-7B-v0.1",
33+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
34+
},
35+
{
36+
icon: "/models/mistral.webp",
37+
modelAuthor: "mistralai",
38+
modelName: "Mistral-7B-v0.1",
39+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
40+
},
41+
{
42+
icon: "/models/mistral.webp",
43+
modelAuthor: "mistralai",
44+
modelName: "Mistral-7B-v0.1",
45+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
46+
},
47+
{
48+
icon: "/models/mistral.webp",
49+
modelAuthor: "mistralai",
50+
modelName: "Mistral-7B-v0.1",
51+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
52+
},
53+
{
54+
icon: "/models/mistral.webp",
55+
modelAuthor: "mistralai",
56+
modelName: "Mistral-7B-v0.1",
57+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
58+
},
59+
{
60+
icon: "/models/mistral.webp",
61+
modelAuthor: "mistralai",
62+
modelName: "Mistral-7B-v0.1",
63+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
64+
},
65+
{
66+
icon: "/models/mistral.webp",
67+
modelAuthor: "mistralai",
68+
modelName: "Mistral-7B-v0.1",
69+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
70+
},
71+
{
72+
icon: "/models/mistral.webp",
73+
modelAuthor: "mistralai",
74+
modelName: "Mistral-7B-v0.1",
75+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
76+
},
77+
{
78+
icon: "/models/mistral.webp",
79+
modelAuthor: "mistralai",
80+
modelName: "Mistral-7B-v0.1",
81+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
82+
},
83+
{
84+
icon: "/models/mistral.webp",
85+
modelAuthor: "mistralai",
86+
modelName: "Mistral-7B-v0.1",
87+
externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
88+
},
89+
],
90+
},
91+
};

‎src/components/CardGrid/CardGrid.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Image from "next/image";
2+
import { FC, ReactElement } from "react";
3+
import ModelCard, { ModelCardProps } from "../Cards/ModelCard/ModelCard";
4+
5+
interface CardGridProps {
6+
/** Heading above grid */
7+
heading?: ReactElement;
8+
/** Array of cards to display */
9+
cards: ModelCardProps[];
10+
}
11+
12+
const CardGrid: FC<CardGridProps> = ({ heading, cards }) => {
13+
return (
14+
<div className="card-grid">
15+
{heading && <div className="heading">{heading}</div>}
16+
<div className="cards">
17+
{cards?.map((card) => (
18+
<ModelCard key={card?.modelAuthor + card?.modelName} {...card} />
19+
))}
20+
</div>
21+
</div>
22+
);
23+
};
24+
25+
export default CardGrid;

‎src/components/CardGrid/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import CardGrid from "./CardGrid";
2+
export default CardGrid;

‎src/components/Cards/ModelCard/ModelCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FC } from "react";
22

3-
interface ModelCardProps {
3+
export interface ModelCardProps {
44
/** Image url for model icon */
55
icon: string;
66
/** Model modelAuthor */

‎src/components/ContentNav/ContentNav.mdx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
2+
3+
import * as ContentNavStories from './ContentNav.stories';
4+
5+
<Meta of={ContentNavStories} />
6+
7+
# Content Nav
8+
9+
<Canvas of={ContentNavStories.Default} />
10+
11+
### Props Table
12+
13+
<ArgTypes />

‎src/components/ContentNav/ContentNav.stories.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
3+
import ContentNav from ".";
4+
5+
const meta: Meta<typeof ContentNav> = {
6+
title: "Components/Content Nav",
7+
component: ContentNav,
8+
decorators: [
9+
(Story) => (
10+
<main className="container">
11+
<Story />
12+
</main>
13+
),
14+
],
15+
};
16+
17+
export default meta;
18+
19+
type Story = StoryObj<typeof ContentNav>;
20+
21+
export const Default: Story = {
22+
args: {
23+
prevText: "Jan 24, 2023",
24+
current: "January 25, 2023",
25+
nextText: "Jan 26, 2023",
26+
},
27+
};

‎src/components/ContentNav/ContentNav.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import Image from "next/image";
2+
import { FC } from "react";
3+
4+
interface ContentNavProps {
5+
/** Text for previous button */
6+
prevText?: string;
7+
/** Text for next button */
8+
nextText?: string;
9+
/** Text for current content */
10+
current?: string;
11+
}
12+
13+
const ContentNav: FC<ContentNavProps> = ({
14+
prevText = "Previous",
15+
nextText = "Next",
16+
current,
17+
}) => {
18+
const Chevron = (
19+
<Image src="/icons/chevron.svg" width="12" height="12" alt="" />
20+
);
21+
return (
22+
<div className="content-nav">
23+
<button>
24+
{Chevron}
25+
{prevText}
26+
</button>
27+
{current && <div className="current middle">{current}</div>}
28+
<button>
29+
{nextText}
30+
{Chevron}
31+
</button>
32+
{current && <div className="current bottom">{current}</div>}
33+
</div>
34+
);
35+
};
36+
37+
export default ContentNav;

‎src/components/ContentNav/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import ContentNav from "./ContentNav";
2+
export default ContentNav;

0 commit comments

Comments
 (0)