feature: Cat Dialog

src/components/catForm/catForm.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CatForm, transformProps } from './catForm.tsx';
+
+const meta: Meta<transformProps> = {
+  component: CatForm,
+  argTypes: {
+    add: {description: "Edit or Add",
+    control: "boolean"}
+  },
+  render: (args: transformProps) => <CatForm {...args} />,
+}
+
+export default meta;
+type Story = StoryObj<typeof CatForm>;
+
+
+
+/*
+ *👇 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: (args) => <CatForm add={args.add}/>,
+};

src/components/catForm/catForm.tsx

@@ -0,0 +1,112 @@
+import { useState } from "react"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+import { Button } from "@/components/ui/button";
+import { ImageIcon } from "lucide-react"
+
+export interface transformProps {
+  add: boolean
+}
+const transform = (add: boolean | transformProps) => {
+  if (add == true) {
+    return "Edit Cat"
+  }
+  else {
+    return `+ Add a Cat`
+  }
+}
+export function CatForm(props: transformProps) {
+  const [avatar, setAvatar] = useState<string | null>(null);
+
+  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+
+    if (file) {
+      const imageUrl = URL.createObjectURL(file);
+      setAvatar(imageUrl);
+    }
+  };
+
+
+  const removeAvatar = (): void => {
+    setAvatar(null);
+  };
+
+  const disableButton = (): boolean => {
+    return avatar === null;
+  };
+
+
+  return <>
+    <Dialog >
+      <DialogTrigger className="border rounded-md p-2 bg-[#17803d] font-semibold text-white flex">{transform(props.add)}</DialogTrigger>
+      <DialogContent className="bg-white">
+        <DialogHeader>
+          <DialogTitle className="w-full font-bold">{transform(props.add)}</DialogTitle>
+        </DialogHeader>
+        <div className="w-full gap-1.5 ease-out flex flex-col items-center">
+          {avatar ? (
+            <div>
+              <img src={avatar} alt="Avatar" className='h-40 rounded-full w-40 flex items-center object-cover' />
+            </div>
+          ) : (
+            <div className="border h-40 w-40 rounded-full overflow-hidden">
+              <ImageIcon className="w-20 h-20 text-gray-300 dark:text-gray-200 relative bottom-[-40px] left-[40px]" />
+              <Input
+                id="picture"
+                type="file"
+                className="text-transparent h-full w-full rounded-full relative z-50 bottom-[80px] opacity-0 cursor-pointer"
+                onChange={handleAvatarChange}
+                accept="image/*"
+                required
+              />
+            </div>
+          )}
+          <button onClick={removeAvatar} disabled={disableButton()} className="hover:bg-red-50 flex items-center border rounded-md mt-4 px-7 py-1 text-red-600 hover:bg-red disabled:opacity-70 ease-out duration-300">Remover Avatar</button>
+
+          <Label className="self-start">Name</Label>
+          <Input id="nome" type="text" className="w-full border rounded border-gray-300 focus:border-[#3770BD] focus:shadow-sm" required></Input>
+          <Label className="self-start">Breed</Label>
+          <Select required>
+            <SelectTrigger className="w-full border rounded border-gray-300 focus:border-[#3770BD] focus:shadow-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="bg-white">
+              <SelectItem value="light" >Siamese</SelectItem>
+            </SelectContent>
+          </Select>
+          <Label className="self-start">Age</Label>
+          <Select>
+            <SelectTrigger className="w-full border rounded border-gray-300 focus:border-[#3770BD] focus:shadow-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="bg-white">
+              <SelectItem value="Kitten">Kitten(1 year)</SelectItem>
+              <SelectItem value="Adult">Adult(+1 year)</SelectItem>
+              <SelectItem value="Senior">Senior(+7 year)</SelectItem>
+            </SelectContent>
+          </Select>
+          <Label className="self-start">Description</Label>
+          <Textarea className="w-full border rounded border-gray-300 focus:border-[#3770BD] focus:shadow-sm"></Textarea>
+          <Button disabled={disableButton()} className=" rounded-[5px] bg-green-700 text-white self-start mt-3 hover:bg-green-600 ease-out duration-300">Save</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  </>
+}

src/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

src/pages/home.jsx

@@ -7,4 +7,4 @@ export const HomePage = () => {
       <MyButton />
     </div>
   );
-}
+}