Customize Cards components

Author: buberdds

src/components/cards/index.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Card as BaseCard, CardTitle as BaseCardTitle } from '../ui/card'
+import { cn } from '../../lib/utils'
+export { CardFooter, CardHeader, CardAction, CardDescription, CardContent } from '../ui/card'
+
+const cardVariants = cva('rounded-sm', {
+  variants: {
+    variant: {
+      default: '',
+      layout: 'flex-1 gap-2 bg-background mb-4 md:mb-6',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+type CardProps = React.ComponentProps<typeof BaseCard> & VariantProps<typeof cardVariants>
+
+export const Card = ({ className, variant, ...props }: CardProps) => (
+  <BaseCard className={cn(cardVariants({ variant }), className)} {...props} />
+)
+
+type CardTitleProps = React.ComponentProps<typeof BaseCardTitle>
+
+export const CardTitle = ({ className, ...props }: CardTitleProps) => (
+  <BaseCardTitle
+    className={cn('flex-1 flex justify-between [&>a]:font-medium [&>a]:text-sm', className)}
+    {...props}
+  />
+)

src/stories/Card/Card.stories.tsx

@@ -7,7 +7,7 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '../../components/ui/card.tsx'
+} from '../../components/cards'
 import { Button } from '../../components/ui/button.tsx'
 import { expect, within } from 'storybook/test'