feat: add model card (#2)

* refactor: rename listTitle to label for clarity
* feat add externalLink icon

src/components/Cards/ModelCard/ModelCard.mdx

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

src/components/Cards/ModelCard/ModelCard.stories.tsx

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

src/components/Cards/ModelCard/ModelCard.tsx

@@ -0,0 +1,35 @@
+import { FC } from "react";
+
+interface ModelCardProps {
+  /** Image url for model icon */
+  icon: string;
+  /** Model modelAuthor */
+  modelAuthor: string;
+  /** Model name */
+  modelName: string;
+  /** External link to model */
+  externalLink?: string;
+}
+
+const ModelCard: FC<ModelCardProps> = ({
+  icon,
+  modelAuthor,
+  modelName,
+  externalLink,
+}) => (
+  <div className="card model-card">
+    <div className="info">
+      <img className="icon" src={icon} alt={`${modelAuthor} icon`} />
+      <p>
+        <span>{modelAuthor}</span>/<span>{modelName}</span>
+      </p>
+    </div>
+    {externalLink && (
+      <a href={externalLink} target="_blank">
+        <img src="/icons/external-link.svg" alt="Follow link" />
+      </a>
+    )}
+  </div>
+);
+
+export default ModelCard;

src/components/Cards/ModelCard/index.ts

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

src/components/Select/Select.stories.tsx

@@ -20,7 +20,7 @@ type Story = StoryObj<typeof Select>;
 
 export const Default: Story = {
   args: {
-    listTitle: "Year",
+    label: "Year",
     listItems: [
       {
         value: "2024",

src/components/Select/Select.tsx

@@ -10,17 +10,21 @@ import {
 } from "react-aria-components";
 
 interface listItem {
+  /** List item value (used for key) */
   value: string;
+  /** List item label */
   label: string;
 }
 interface SelectProps {
-  listTitle?: string;
+  /** Select field label */
+  label?: string;
+  /** Select field list items */
   listItems: listItem[];
 }
 
-const Select: FC<SelectProps> = ({ listTitle, listItems }) => (
+const Select: FC<SelectProps> = ({ label, listItems }) => (
   <ReactAriaSelect className="select" defaultSelectedKey={"2024"}>
-    {listTitle && <Label>{listTitle}</Label>}
+    {label && <Label>{label}</Label>}
     <Button>
       <SelectValue />
       <span aria-hidden="true" className="icon">

src/styles/components/cards.css

@@ -0,0 +1,38 @@
+.card {
+  @apply justify-between max-w-[700px] bg-gray-50 border border-gray-300 rounded px-6 py-4 dark:bg-gray-900 dark:border-gray-600;
+  &,
+  .info {
+    @apply flex items-center;
+  }
+  .info {
+    @apply gap-3;
+  }
+  &.model-card {
+    .icon {
+      @apply h-7 w-7 rounded-full border border-gray-300 p-[3px] dark:border-gray-600;
+    }
+    p {
+      @apply flex;
+    }
+    p > span {
+      &:first-child {
+        @apply text-gray-600 font-medium dark:text-gray-300 mr-1;
+      }
+      &:last-child {
+        @apply text-black-600 font-semibold dark:text-gray-100 ml-1;
+      }
+    }
+  }
+  a {
+    @apply m-[-14px] p-[14px];
+    img {
+      @apply transition-filter dark:invert-100 brightness-0 contrast-[25%];
+    }
+    &:hover,
+    &:focus-visible {
+      img {
+        @apply brightness-0 contrast-100;
+      }
+    }
+  }
+}

src/styles/main.css

@@ -1,4 +1,5 @@
 @import "./global.css";
+@import "./components/cards.css";
 @import "./components/chat.css";
 @import "./components/footer.css";
 @import "./components/header.css";

tailwind.config.ts

@@ -67,6 +67,7 @@ const theme: Config = {
         "font-size": "font-size",
         spacing: "margin, padding, gap",
         sizing: "height, width",
+        filter: "filter",
       },
       invert: {
         "77": ".77",