PhotoExibition

src/components/PhotoExibition/PhotoExibition.jsx

@@ -0,0 +1,15 @@
+import { Button } from "../ui/button"
+import { Input } from "../ui/input"
+import {ImageIcon, Trash2} from "lucide-react"
+
+export const PhotoExibition = () => {
+    return(
+       <div className="flex flex-col justify-center items-center gap-6 w-[200px]">
+        <Input id="image-upload" accept="image/*" type="file" className="sr-only rounded-full w-[200px] h-[200px]"/>
+        <label className="flex items-center justify-center w-[180px] h-[180px] rounded-full bg-white border-2 border-gray-100 cursor-pointer" htmlFor="image-upload">
+            <ImageIcon className="text-gray-200"/>
+        </label>
+        <Button variant={"outline"} className="w-[75%] text-red-600"> <Trash2 className="mr-1" size={18}/> Remove photo</Button>
+       </div> 
+    )
+}

src/components/PhotoExibition/PhotoExibition.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PhotoExibition } from './PhotoExibition';
+
+const meta: Meta<typeof PhotoExibition> = {
+  component: PhotoExibition,
+};
+
+export default meta;
+type Story = StoryObj<typeof PhotoExibition>;
+
+/*
+ *👇 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: () => <PhotoExibition />,
+};