@dust-tt/sparkle 0.4.2 → 0.4.3

package/dist/esm/components/Card.d.ts

@@ -8,6 +8,7 @@ interface CommonProps {
     variant?: CardVariantType;
     size?: CardSizeType;
     className?: string;
+    selected?: boolean;
 }
 interface CardLinkProps extends CommonProps, LinkWrapperProps {
     onClick?: never;

package/dist/esm/components/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AASnE,eAAO,MAAM,aAAa,+CAAgD,CAAC;AAC3E,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,eAAO,MAAM,UAAU,6BAA8B,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAqDvD,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,aAAc,SAAQ,WAAW,EAAE,gBAAgB;IAC3D,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,eACR,SAAQ,WAAW,EACjB,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC;IAC5C,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AA8DD,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,UAAU,iBACR,SAAQ,aAAa,EACnB,IAAI,CAAC,aAAa,EAAE,MAAM,aAAa,CAAC;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,mBACR,SAAQ,aAAa,EACnB,IAAI,CAAC,eAAe,EAAE,MAAM,aAAa,CAAC;IAC5C,IAAI,CAAC,EAAE,KAAK,CAAC;CACd;AAED,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,eAAO,MAAM,IAAI,kFAYhB,CAAC;AAyBF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;2CAa3B,CAAC;AAIH,eAAO,MAAM,QAAQ,6GAgBnB,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AASnE,eAAO,MAAM,aAAa,+CAAgD,CAAC;AAC3E,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,eAAO,MAAM,UAAU,6BAA8B,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AA8DvD,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,aAAc,SAAQ,WAAW,EAAE,gBAAgB;IAC3D,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,eACR,SAAQ,WAAW,EACjB,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC;IAC5C,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAuED,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,UAAU,iBACR,SAAQ,aAAa,EACnB,IAAI,CAAC,aAAa,EAAE,MAAM,aAAa,CAAC;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,mBACR,SAAQ,aAAa,EACnB,IAAI,CAAC,eAAe,EAAE,MAAM,aAAa,CAAC;IAC5C,IAAI,CAAC,EAAE,KAAK,CAAC;CACd;AAED,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,eAAO,MAAM,IAAI,kFAYhB,CAAC;AAyBF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;2CAa3B,CAAC;AAIH,eAAO,MAAM,QAAQ,6GAgBnB,CAAC"}

package/dist/esm/components/Card.js

@@ -20,25 +20,32 @@ var cardVariants = cva(cn("s-flex s-text-left s-group", "s-border s-overflow-hid
             md: "s-p-4 s-rounded-2xl",
             lg: "s-p-5 s-rounded-3xl",
         },
+        selected: {
+            true: cn("s-border-highlight-300 dark:s-border-highlight-300-night", "s-ring-2 s-ring-highlight-200/70 dark:s-ring-highlight-300/60", "s-shadow-sm"),
+            false: "",
+        },
     },
     defaultVariants: {
         variant: "primary",
         size: "md",
+        selected: false,
     },
 });
 var InnerCard = React.forwardRef(function (_a, ref) {
-    var children = _a.children, variant = _a.variant, size = _a.size, className = _a.className, onClick = _a.onClick, href = _a.href, _b = _a.target, target = _b === void 0 ? "_blank" : _b, _c = _a.rel, rel = _c === void 0 ? "" : _c, replace = _a.replace, shallow = _a.shallow, props = __rest(_a, ["children", "variant", "size", "className", "onClick", "href", "target", "rel", "replace", "shallow"]);
+    var children = _a.children, variant = _a.variant, size = _a.size, className = _a.className, onClick = _a.onClick, href = _a.href, _b = _a.target, target = _b === void 0 ? "_blank" : _b, _c = _a.rel, rel = _c === void 0 ? "" : _c, replace = _a.replace, shallow = _a.shallow, selected = _a.selected, props = __rest(_a, ["children", "variant", "size", "className", "onClick", "href", "target", "rel", "replace", "shallow", "selected"]);
     var components = React.useContext(SparkleContext).components;
     var Link = href ? components.link : noHrefLink;
     // Determine if the card is interactive based on href or onClick
     var isInteractive = Boolean(href || onClick);
-    var cardButtonClassNames = cn(cardVariants({ variant: variant, size: size }), 
+    var isSelected = Boolean(selected);
+    var hasSelectionProp = typeof selected !== "undefined";
+    var cardButtonClassNames = cn(cardVariants({ variant: variant, size: size, selected: isSelected }), 
     // Apply interactive styles when either href or onClick is present
     isInteractive ? interactiveClasses : "", className);
     if (href) {
-        return (React.createElement(Link, { href: href, className: cardButtonClassNames, replace: replace, shallow: shallow, target: target, rel: rel }, children));
+        return (React.createElement(Link, { href: href, className: cardButtonClassNames, replace: replace, shallow: shallow, target: target, rel: rel, "aria-selected": hasSelectionProp ? isSelected : undefined }, children));
     }
-    return (React.createElement("div", __assign({ ref: ref, className: cardButtonClassNames, onClick: onClick }, props), children));
+    return (React.createElement("div", __assign({ ref: ref, className: cardButtonClassNames, onClick: onClick, role: isInteractive ? "button" : undefined, "aria-pressed": isInteractive && hasSelectionProp ? isSelected : undefined, "aria-selected": hasSelectionProp ? isSelected : undefined }, props), children));
 });
 export var Card = React.forwardRef(function (_a, ref) {
     var containerClassName = _a.containerClassName, className = _a.className, action = _a.action, props = __rest(_a, ["containerClassName", "className", "action"]);

package/dist/esm/components/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card.tsx"],"names":[],"mappings":"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"}

package/dist/esm/stories/Card.stories.d.ts

@@ -27,6 +27,10 @@ declare const meta: {
             control: "text";
             description: string;
         };
+        selected: {
+            control: "boolean";
+            description: string;
+        };
         children: {
             control: "text";
             description: string;
@@ -40,7 +44,10 @@ export declare const Primary: Story;
 export declare const Secondary: Story;
 export declare const Tertiary: Story;
 export declare const DisabledCard: Story;
+export declare const SelectedCard: Story;
 export declare const AllVariants: Story;
 export declare const InteractiveStates: Story;
 export declare const WithActions: Story;
+export declare const SelectableGrid: Story;
+export declare const DualSelectable: Story;
 //# sourceMappingURL=Card.stories.d.ts.map

package/dist/esm/stories/Card.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAwB,MAAM,OAAO,CAAC;AAoB7C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAmCzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAe/B,CAAC;AA8CF,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAC"}
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAwB,MAAM,OAAO,CAAC;AAoB7C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAmCzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAe/B,CAAC;AA8CF,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA6B5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA6B5B,CAAC"}

package/dist/esm/stories/Card.stories.js

@@ -1,4 +1,4 @@
-import { __assign } from "tslib";
+import { __assign, __read } from "tslib";
 import React from "react";
 import { Card, Icon } from "../components";
 import { CARD_SIZES, CARD_VARIANTS, CardActionButton, CardGrid, } from "../components/Card";
@@ -26,6 +26,10 @@ var meta = {
             control: "text",
             description: "Additional CSS classes to apply",
         },
+        selected: {
+            control: "boolean",
+            description: "Visually highlight the card as selected",
+        },
         children: {
             control: "text",
             description: "Content to display inside the card",
@@ -38,6 +42,7 @@ export var Playground = {
         variant: "primary",
         size: "md",
         disabled: false,
+        selected: false,
         children: "Card Content",
     },
     render: function (args) { return React.createElement(Card, __assign({}, args)); },
@@ -71,6 +76,14 @@ export var DisabledCard = {
         children: "Disabled Card",
     },
 };
+export var SelectedCard = {
+    args: {
+        variant: "secondary",
+        size: "md",
+        selected: true,
+        children: "Selected Card",
+    },
+};
 export var AllVariants = {
     render: function () {
         var variants = CARD_VARIANTS;
@@ -137,4 +150,27 @@ export var WithActions = {
                 React.createElement("div", { className: "s-w-full" }, card.title)),
             React.createElement("div", { className: "s-w-full s-truncate s-text-sm s-text-muted-foreground" }, card.description)))); }))); },
 };
+export var SelectableGrid = {
+    render: function () {
+        var _a = __read(React.useState(0), 2), selected = _a[0], setSelected = _a[1];
+        return (React.createElement(CardGrid, null, cardData.slice(0, 4).map(function (card, index) { return (React.createElement(Card, { key: card.title, variant: "primary", size: "md", selected: selected === index, onClick: function () { return setSelected(index); }, action: React.createElement(CardActionButton, { size: "mini", icon: XMarkIcon }) },
+            React.createElement("div", { className: "s-flex s-w-full s-flex-col s-gap-1 s-text-sm" },
+                React.createElement("div", { className: "s-flex s-w-full s-gap-1 s-font-semibold s-text-foreground" },
+                    React.createElement(Icon, { visual: card.icon, size: "sm" }),
+                    React.createElement("div", { className: "s-w-full" }, card.title)),
+                React.createElement("div", { className: "s-w-full s-truncate s-text-sm s-text-muted-foreground" }, card.description)))); })));
+    },
+};
+export var DualSelectable = {
+    render: function () {
+        var _a = __read(React.useState(0), 2), selectedIndex = _a[0], setSelectedIndex = _a[1];
+        var duoCards = cardData.slice(0, 2);
+        return (React.createElement("div", { className: "s-flex s-gap-4" }, duoCards.map(function (card, index) { return (React.createElement(Card, { key: card.title, variant: "secondary", size: "md", selected: selectedIndex === index, onClick: function () { return setSelectedIndex(index); } },
+            React.createElement("div", { className: "s-flex s-w-full s-flex-col s-gap-1 s-text-sm" },
+                React.createElement("div", { className: "s-flex s-w-full s-gap-1 s-font-semibold s-text-foreground" },
+                    React.createElement(Icon, { visual: card.icon, size: "sm" }),
+                    React.createElement("div", { className: "s-w-full" }, card.title)),
+                React.createElement("div", { className: "s-w-full s-truncate s-text-sm s-text-muted-foreground" }, card.description)))); })));
+    },
+};
 //# sourceMappingURL=Card.stories.js.map

package/dist/esm/stories/Card.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../src/stories/Card.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../src/stories/Card.stories.tsx"],"names":[],"mappings":"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"}

package/dist/sparkle.css

@@ -5222,6 +5222,10 @@ select {
   --tw-ring-inset: inset;
 }
 
+.s-ring-highlight-200\/70 {
+  --tw-ring-color: rgb(159 219 255 / 0.7);
+}
+
 .s-ring-highlight-300 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(122 198 255 / var(--tw-ring-opacity));
@@ -8424,6 +8428,10 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:s-ring-highlight-300\/60) {
+  --tw-ring-color: rgb(122 198 255 / 0.6);
+}
+
 :is(.s-dark .dark\:s-ring-highlight-night\/0) {
   --tw-ring-color: rgb(28 145 255 / 0);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/Card.tsx

@@ -60,10 +60,19 @@ const cardVariants = cva(
         md: "s-p-4 s-rounded-2xl",
         lg: "s-p-5 s-rounded-3xl",
       },
+      selected: {
+        true: cn(
+          "s-border-highlight-300 dark:s-border-highlight-300-night",
+          "s-ring-2 s-ring-highlight-200/70 dark:s-ring-highlight-300/60",
+          "s-shadow-sm"
+        ),
+        false: "",
+      },
     },
     defaultVariants: {
       variant: "primary",
       size: "md",
+      selected: false,
     },
   }
 );
@@ -72,6 +81,7 @@ interface CommonProps {
   variant?: CardVariantType;
   size?: CardSizeType;
   className?: string;
+  selected?: boolean;
 }
 
 interface CardLinkProps extends CommonProps, LinkWrapperProps {
@@ -103,6 +113,7 @@ const InnerCard = React.forwardRef<HTMLDivElement, InnerCardProps>(
       rel = "",
       replace,
       shallow,
+      selected,
       ...props
     },
     ref
@@ -112,9 +123,11 @@ const InnerCard = React.forwardRef<HTMLDivElement, InnerCardProps>(
 
     // Determine if the card is interactive based on href or onClick
     const isInteractive = Boolean(href || onClick);
+    const isSelected = Boolean(selected);
+    const hasSelectionProp = typeof selected !== "undefined";
 
     const cardButtonClassNames = cn(
-      cardVariants({ variant, size }),
+      cardVariants({ variant, size, selected: isSelected }),
       // Apply interactive styles when either href or onClick is present
       isInteractive ? interactiveClasses : "",
       className
@@ -129,6 +142,7 @@ const InnerCard = React.forwardRef<HTMLDivElement, InnerCardProps>(
           shallow={shallow}
           target={target}
           rel={rel}
+          aria-selected={hasSelectionProp ? isSelected : undefined}
         >
           {children}
         </Link>
@@ -140,6 +154,11 @@ const InnerCard = React.forwardRef<HTMLDivElement, InnerCardProps>(
         ref={ref}
         className={cardButtonClassNames}
         onClick={onClick}
+        role={isInteractive ? "button" : undefined}
+        aria-pressed={
+          isInteractive && hasSelectionProp ? isSelected : undefined
+        }
+        aria-selected={hasSelectionProp ? isSelected : undefined}
         {...props}
       >
         {children}

package/src/stories/Card.stories.tsx

@@ -43,6 +43,10 @@ const meta = {
       control: "text",
       description: "Additional CSS classes to apply",
     },
+    selected: {
+      control: "boolean",
+      description: "Visually highlight the card as selected",
+    },
     children: {
       control: "text",
       description: "Content to display inside the card",
@@ -58,6 +62,7 @@ export const Playground: Story = {
     variant: "primary",
     size: "md",
     disabled: false,
+    selected: false,
     children: "Card Content",
   },
   render: (args) => <Card {...args} />,
@@ -96,6 +101,15 @@ export const DisabledCard: Story = {
   },
 };
 
+export const SelectedCard: Story = {
+  args: {
+    variant: "secondary",
+    size: "md",
+    selected: true,
+    children: "Selected Card",
+  },
+};
+
 export const AllVariants: Story = {
   render: () => {
     const variants = CARD_VARIANTS;
@@ -221,3 +235,65 @@ export const WithActions: Story = {
     </CardGrid>
   ),
 };
+
+export const SelectableGrid: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState(0);
+
+    return (
+      <CardGrid>
+        {cardData.slice(0, 4).map((card, index) => (
+          <Card
+            key={card.title}
+            variant="primary"
+            size="md"
+            selected={selected === index}
+            onClick={() => setSelected(index)}
+            action={<CardActionButton size="mini" icon={XMarkIcon} />}
+          >
+            <div className="s-flex s-w-full s-flex-col s-gap-1 s-text-sm">
+              <div className="s-flex s-w-full s-gap-1 s-font-semibold s-text-foreground">
+                <Icon visual={card.icon} size="sm" />
+                <div className="s-w-full">{card.title}</div>
+              </div>
+              <div className="s-w-full s-truncate s-text-sm s-text-muted-foreground">
+                {card.description}
+              </div>
+            </div>
+          </Card>
+        ))}
+      </CardGrid>
+    );
+  },
+};
+
+export const DualSelectable: Story = {
+  render: () => {
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const duoCards = cardData.slice(0, 2);
+
+    return (
+      <div className="s-flex s-gap-4">
+        {duoCards.map((card, index) => (
+          <Card
+            key={card.title}
+            variant="secondary"
+            size="md"
+            selected={selectedIndex === index}
+            onClick={() => setSelectedIndex(index)}
+          >
+            <div className="s-flex s-w-full s-flex-col s-gap-1 s-text-sm">
+              <div className="s-flex s-w-full s-gap-1 s-font-semibold s-text-foreground">
+                <Icon visual={card.icon} size="sm" />
+                <div className="s-w-full">{card.title}</div>
+              </div>
+              <div className="s-w-full s-truncate s-text-sm s-text-muted-foreground">
+                {card.description}
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+    );
+  },
+};