CatItem

src/components/card-item/card-item.jsx

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+    CardImagem,
+    CardButton
+  } from "@/components/ui/card"
+
+  export const CardItem = () => {
+    return (
+
+        <Card>
+        <CardHeader>
+          <CardImagem ></CardImagem>  
+          <CardTitle class="font-bold text-xl">Cat Name</CardTitle>
+          <CardDescription class="text-lg">Breed</CardDescription>
+        </CardHeader>
+        <CardContent class="px-6">
+          <p>Age</p>
+        </CardContent>
+        <CardFooter>
+          <p>Description</p>
+        </CardFooter>
+        <CardButton>
+            Edit
+        </CardButton>
+      </Card>
+
+    );
+  }
+
+

src/components/card-item/card-item.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CardItem } from './card-item';
+
+const meta: Meta<typeof CardItem> = {
+  component: CardItem,
+};
+
+export default meta;
+type Story = StoryObj<typeof CardItem>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => <CardItem />,
+};

src/components/ui/card.tsx

@@ -1,15 +1,39 @@
 import * as React from "react"
 
+
 import { cn } from "@/lib/utils"
+import Cat from "@/components/card-item/img/cat.png"
+
+
+const CardImagem = () => {
+  return (
+    <div className="h-60 w-60 rounded-full bg-gray-200 mb-8 ml-11">
+      <img src={Cat}/>
+    </div>
+
+  );
+}
+
+interface ButtonProps {
+  children: React.ReactNode;
+}
+
+const CardButton: React.FC<ButtonProps> = ({ children }) => {
+  return (
+    <>
+      <button className="bg-green-700 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex ml-5 mb-4 rounded">{children}</button>
+    </>
+  )
+}
 
 const Card = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
+  <div 
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "border border-solid border-gray-300 max-w-sm rounded overflow-hidden shadow-lg rounded-sm border bg-card text-card-foreground shadow-sm",
       className
     )}
     {...props}
@@ -23,7 +47,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn("flex flex-col space-y-1.5 pt-0 pl-6 pr-0 pb-0", className)}
     {...props}
   />
 ))
@@ -36,7 +60,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
+      "text-2xl font-bold leading-none tracking-tight",
       className
     )}
     {...props}
@@ -48,7 +72,7 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <p 
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
@@ -70,10 +94,10 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn("mt-3 ml-0 mb-4 flex items-center p-6 pt-0", className)}
     {...props}
   />
 ))
 CardFooter.displayName = "CardFooter"
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { CardButton, CardImagem, Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/main.tsx

@@ -18,6 +18,7 @@ import { HomePage } from "./pages/home";
 
 import "./index.css";
 
+
 const router = createBrowserRouter([
   {
     path: "/",