From 6074731e76989564b17a8d4cb46eed39dc2f0e7d Mon Sep 17 00:00:00 2001 From: Chai Landau <112015853+chailandau@users.noreply.github.com> Date: Thu, 22 Feb 2024 14:55:41 -0500 Subject: [PATCH] feat: add model card (#2) * refactor: rename listTitle to label for clarity * feat add externalLink icon --- public/icons/external-link.svg | 5 +++ public/models/mistral.webp | Bin 0 -> 1428 bytes src/components/Cards/ModelCard/ModelCard.mdx | 13 ++++++ .../Cards/ModelCard/ModelCard.stories.tsx | 28 +++++++++++++ src/components/Cards/ModelCard/ModelCard.tsx | 35 ++++++++++++++++ src/components/Cards/ModelCard/index.ts | 2 + src/components/Select/Select.stories.tsx | 2 +- src/components/Select/Select.tsx | 10 +++-- src/styles/components/cards.css | 38 ++++++++++++++++++ src/styles/main.css | 1 + tailwind.config.ts | 1 + 11 files changed, 131 insertions(+), 4 deletions(-) create mode 100644 public/icons/external-link.svg create mode 100644 public/models/mistral.webp create mode 100644 src/components/Cards/ModelCard/ModelCard.mdx create mode 100644 src/components/Cards/ModelCard/ModelCard.stories.tsx create mode 100644 src/components/Cards/ModelCard/ModelCard.tsx create mode 100644 src/components/Cards/ModelCard/index.ts create mode 100644 src/styles/components/cards.css diff --git a/public/icons/external-link.svg b/public/icons/external-link.svg new file mode 100644 index 0000000..aca4a4a --- /dev/null +++ b/public/icons/external-link.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/public/models/mistral.webp b/public/models/mistral.webp new file mode 100644 index 0000000000000000000000000000000000000000..b3533914abbf0030e846b4bebd293ee5e25fcaf2 GIT binary patch literal 1428 zcmV;F1#9|JNk&GD1pok7MM6+kP&il$0000G0002T0074T06|PpNUH$=00DqpYug$n zP9=p_x z2{^5Jz&0ssA}Oxqgk@4T+NtH3z)VV(>RuGzOs%32OAOt z79s%<-HewjR4I?ZGgLB@5s~j4KRV4K+{}5 zy(4{w1W2z zq1eIZ4z>3K$7jeN_a=qze^&;w6mhU-4Al#O<3IVLcZGDZgN ze_HGe09H^qAi4tp05By0odGJy0LTD7Z8nxiBqO3BDEHYwfDMUbZsBhr`PiS?zazG0 zJMZJSY?)$ir;}*KwBh8W|4pC%sw6 z_?VWOF6tonwsN!M@;Q?k_R^S604np#fCwipf00j6u@qKsZu+)c)0{t`!~5(VIsu7O z)=XsO^-nw*wg?HD1UnHm^pd8nYiw{``mL=#{kV@A%fAGX%&!pvTCuLIO%^XIBvf;@ zy)-wkZ_)MY)y6zSZ%IUnZMAHshj@Equ?q353`Ja12{)#P3e_rX+LwUne+ zZ`vns?N5I!|ue#)9TBSlCJyT>s60rNrFOHJwPrpXu+8ggo6a;6FQ?KH0hR+*! z2({T4!WB=Lt=bDrb|p+!`u7T}UTffAIs|*CEKYRtMIXwWO%IS*65z80#xEPH|Cl5H z@PqZiL|L22hwY4G|KW{Sr4GRnz6{G1OfkBgKs$=E(#Q|q`ZqM+Na{AA;Z5}@>J!D$ zX4)(GU+{GbTiRrHB@&1i*5(DwyM~je`)vssD6|&H zJ$Y?R^dodN1ZBOA0B!4p+zNT}yX^o1tiV0Cw;yB1I+R*u6aG83Z~vwjuFAp95oVVdXc8g(Z&*SH5NA z-H6lxsYOc9d|V;}0|UBYfq)++e>9{oe)Z` + +# Model Card + + + +### Props Table + + \ No newline at end of file diff --git a/src/components/Cards/ModelCard/ModelCard.stories.tsx b/src/components/Cards/ModelCard/ModelCard.stories.tsx new file mode 100644 index 0000000..db0b03e --- /dev/null +++ b/src/components/Cards/ModelCard/ModelCard.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import ModelCard from "."; + +const meta: Meta = { + title: "Components/Model Card", + component: ModelCard, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; + +export default meta; + +type Story = StoryObj; + +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", + }, +}; diff --git a/src/components/Cards/ModelCard/ModelCard.tsx b/src/components/Cards/ModelCard/ModelCard.tsx new file mode 100644 index 0000000..01fd19d --- /dev/null +++ b/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 = ({ + icon, + modelAuthor, + modelName, + externalLink, +}) => ( +
+
+ {`${modelAuthor} +

+ {modelAuthor}/{modelName} +

+
+ {externalLink && ( + + Follow link + + )} +
+); + +export default ModelCard; diff --git a/src/components/Cards/ModelCard/index.ts b/src/components/Cards/ModelCard/index.ts new file mode 100644 index 0000000..35b9014 --- /dev/null +++ b/src/components/Cards/ModelCard/index.ts @@ -0,0 +1,2 @@ +import ModelCard from "./ModelCard"; +export default ModelCard; diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx index d7f21c3..1b94b8a 100644 --- a/src/components/Select/Select.stories.tsx +++ b/src/components/Select/Select.stories.tsx @@ -20,7 +20,7 @@ type Story = StoryObj; export const Default: Story = { args: { - listTitle: "Year", + label: "Year", listItems: [ { value: "2024", diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index d9b6c9c..46359b7 100644 --- a/src/components/Select/Select.tsx +++ b/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 = ({ listTitle, listItems }) => ( +const Select: FC = ({ label, listItems }) => ( - {listTitle && } + {label && }