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

src/app/page.tsx

@@ -1,15 +1,103 @@
-import GeneratedImage from "@/components/GeneratedImage";
+import CardGrid from "@/components/CardGrid";
+import ContentNav from "@/components/ContentNav/ContentNav";
+import ErrorBanner from "@/components/ErrorBanner";
+import Switchback from "@/components/Switchback";
 
 export default function Home() {
   return (
-    <main className="container">
-      <div className="hero">
-        <h1>
-          Create your own <span>watercolor masterpiece</span>
-        </h1>
-      </div>
-
-      <GeneratedImage />
+    <main className="container wide">
+      <ContentNav
+        prevText="Jan 24, 2023"
+        current="January 25, 2023"
+        nextText="Jan 26, 2023"
+      />
+      <CardGrid
+        heading={
+          <h1>
+            10 Most <br />
+            <span>Popular</span> Models
+          </h1>
+        }
+        cards={[
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "stabilityai",
+            modelName: "japanese-stablelm-instruct-alpha-7b",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+          {
+            icon: "/models/mistral.webp",
+            modelAuthor: "mistralai",
+            modelName: "Mistral-7B-v0.1",
+            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+          },
+        ]}
+      />
+      <Switchback
+        leftContent={
+          <h2 className="heading">
+            <span>45,515</span> text gen
+            <br /> models existed
+          </h2>
+        }
+        rightContent={
+          <p>
+            We like to say that in AI, a week is a month and a month is a year,
+            and the "latest and greatest model" changes just as quickly. We
+            tracked the most popular text-gen models starting in January 2023 to
+            highlight the rapid rate of change in the AI industry. Click through
+            time to see how quickly the state-of-the-art changes.
+          </p>
+        }
+      />
     </main>
   );
 }

src/components/CardGrid/CardGrid.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+
+import * as CardGridStories from './CardGrid.stories';
+
+<Meta of={CardGridStories} />
+
+# Card Grid
+
+<Canvas of={CardGridStories.Default} />
+
+### Props Table
+
+<ArgTypes />

src/components/CardGrid/CardGrid.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import CardGrid from ".";
+
+const meta: Meta<typeof CardGrid> = {
+  title: "Components/Card Grid",
+  component: CardGrid,
+  decorators: [
+    (Story) => (
+      <main className="container">
+        <Story />
+      </main>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CardGrid>;
+
+export const Default: Story = {
+  args: {
+    heading: (
+      <h1>
+        10 Most <span>Popular</span>Models
+      </h1>
+    ),
+    cards: [
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+      {
+        icon: "/models/mistral.webp",
+        modelAuthor: "mistralai",
+        modelName: "Mistral-7B-v0.1",
+        externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+      },
+    ],
+  },
+};

src/components/CardGrid/CardGrid.tsx

@@ -0,0 +1,25 @@
+import Image from "next/image";
+import { FC, ReactElement } from "react";
+import ModelCard, { ModelCardProps } from "../Cards/ModelCard/ModelCard";
+
+interface CardGridProps {
+  /** Heading above grid */
+  heading?: ReactElement;
+  /** Array of cards to display */
+  cards: ModelCardProps[];
+}
+
+const CardGrid: FC<CardGridProps> = ({ heading, cards }) => {
+  return (
+    <div className="card-grid">
+      {heading && <div className="heading">{heading}</div>}
+      <div className="cards">
+        {cards?.map((card) => (
+          <ModelCard key={card?.modelAuthor + card?.modelName} {...card} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CardGrid;

src/components/CardGrid/index.ts

@@ -0,0 +1,2 @@
+import CardGrid from "./CardGrid";
+export default CardGrid;

src/components/Cards/ModelCard/ModelCard.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 
-interface ModelCardProps {
+export interface ModelCardProps {
   /** Image url for model icon */
   icon: string;
   /** Model modelAuthor */

src/components/ContentNav/ContentNav.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+
+import * as ContentNavStories from './ContentNav.stories';
+
+<Meta of={ContentNavStories} />
+
+# Content Nav
+
+<Canvas of={ContentNavStories.Default} />
+
+### Props Table
+
+<ArgTypes />

src/components/ContentNav/ContentNav.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import ContentNav from ".";
+
+const meta: Meta<typeof ContentNav> = {
+  title: "Components/Content Nav",
+  component: ContentNav,
+  decorators: [
+    (Story) => (
+      <main className="container">
+        <Story />
+      </main>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ContentNav>;
+
+export const Default: Story = {
+  args: {
+    prevText: "Jan 24, 2023",
+    current: "January 25, 2023",
+    nextText: "Jan 26, 2023",
+  },
+};

src/components/ContentNav/ContentNav.tsx

@@ -0,0 +1,37 @@
+import Image from "next/image";
+import { FC } from "react";
+
+interface ContentNavProps {
+  /** Text for previous button */
+  prevText?: string;
+  /** Text for next button */
+  nextText?: string;
+  /** Text for current content */
+  current?: string;
+}
+
+const ContentNav: FC<ContentNavProps> = ({
+  prevText = "Previous",
+  nextText = "Next",
+  current,
+}) => {
+  const Chevron = (
+    <Image src="/icons/chevron.svg" width="12" height="12" alt="" />
+  );
+  return (
+    <div className="content-nav">
+      <button>
+        {Chevron}
+        {prevText}
+      </button>
+      {current && <div className="current middle">{current}</div>}
+      <button>
+        {nextText}
+        {Chevron}
+      </button>
+      {current && <div className="current bottom">{current}</div>}
+    </div>
+  );
+};
+
+export default ContentNav;

src/components/ContentNav/index.ts

@@ -0,0 +1,2 @@
+import ContentNav from "./ContentNav";
+export default ContentNav;

src/components/ErrorBanner/ErrorBanner.tsx

@@ -1,27 +1,27 @@
 import { FC } from "react";
 
 interface ErrorBannerProps {
-    bannerText: string
+  bannerText: string;
 }
 
 const ErrorBanner: FC<ErrorBannerProps> = ({ bannerText }) => {
-    return (
-        <div role="alert" id="error-banner">
-            <div className="content">
-                <p>{bannerText}</p>
-                <button className="absolute top-0 bottom-0 right-0 px-4 py-3 bg-none hover:bg-none shadow-transparent">
-                    <svg
-                        className="fill-current h-6 w-6"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20">
-                        <title>Close</title>
-                        <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
-                    </svg>
-                </button>
-            </div>
-        </div>
-
-    )
+  return (
+    <div role="alert" id="error-banner">
+      <div className="content">
+        <p>{bannerText}</p>
+        <button className="button">
+          <svg
+            className="fill-current h-6 w-6"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+          >
+            <title>Close</title>
+            <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
 };
 
 export default ErrorBanner;