Add cat

package.json

@@ -22,6 +22,7 @@
     "lucide-react": "^0.378.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.0",
     "react-router-dom": "^6.14.0",
     "slate": "^0.94.1",
     "slate-react": "^0.97.2",

src/components/Add-cat/Add-cat.jsx

@@ -0,0 +1,13 @@
+import { Button } from "@/components/ui/button"
+import { FaPlus } from "react-icons/fa";
+import "./button-add-cat.css"
+
+const AddButton = () =>{
+return(
+    <>
+        <Button className="button" variant="outline"><FaPlus /> Add cat</Button>
+    </>
+)
+}
+
+export default AddButton

src/components/Add-cat/Add-cat.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta,StoryObj } from '@storybook/react';
+
+import  AddButton  from './Add-cat';
+
+const meta: Meta<typeof AddButton> = {
+  component: AddButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof AddButton>;
+
+/*
+ *👇 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: () => <AddButton />,
+};
+
+export const WithLabel: Story = {
+  render: () => <AddButton  label="outro texto aqui!" />,
+};

src/components/Add-cat/button-add-cat.css

@@ -0,0 +1,3 @@
+.button{
+    border-radius: 20px;
+}

src/index.css

@@ -1,3 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+

src/pages/home.jsx

@@ -1,8 +1,11 @@
+import AddButton from "@/components/Add-cat/Add-cat";
+
 
 export const HomePage = () => {
   return (
     <div>
       <h1>Home Page</h1>
+      <AddButton/>
     </div>
   );
 }