From 75337bcf83fb604c0f896a6e79ba1d27c2a01614 Mon Sep 17 00:00:00 2001
From: Himanshu Sharma <himanshu.kumarr07@gmail.com>
Date: Tue, 9 Jul 2024 19:25:53 +0530
Subject: [PATCH] drop menu added

---
 .../components/Create Issue/CreateIssue.tsx   | 119 +++++++++++++-----
 .../src/components/Create Issue/State.tsx     |  34 -----
 2 files changed, 87 insertions(+), 66 deletions(-)
 delete mode 100644 mango-frontend/src/components/Create Issue/State.tsx

diff --git a/mango-frontend/src/components/Create Issue/CreateIssue.tsx b/mango-frontend/src/components/Create Issue/CreateIssue.tsx
index f6a62a5..242cb21 100644
--- a/mango-frontend/src/components/Create Issue/CreateIssue.tsx	
+++ b/mango-frontend/src/components/Create Issue/CreateIssue.tsx	
@@ -1,67 +1,122 @@
-
-import { Button } from "@/components/ui/button"
+import * as React from "react";
+import { Button } from "@/components/ui/button";
 import {
     Dialog,
     DialogContent,
     DialogHeader,
     DialogTitle,
     DialogFooter,
-    DialogClose
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
+    DialogClose,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuLabel,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 interface CreateIssueProps {
     isOpen: boolean;
     onClose: () => void;
 }
 
-export function CreateIssue({ isOpen, onClose }: CreateIssueProps) {
+const StateDropdown: React.FC = () => {
+    const [position, setPosition] = React.useState("bottom");
 
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button className="border-2">Backlog</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+                <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+                    <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+                </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};
+const PriorityDropdown: React.FC = () => {
+    const [position, setPosition] = React.useState("bottom");
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button className="border-2">Low</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+                <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+                    <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+                </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};
+
+const AssigneesDropdown: React.FC = () => {
+    const [position, setPosition] = React.useState("bottom");
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button className="border-2">Low</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+                <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+                    <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+                </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};
+
+export function CreateIssue({ isOpen, onClose }: CreateIssueProps) {
     return (
         <Dialog open={isOpen} onOpenChange={onClose}>
-            <DialogContent className="">
+            <DialogContent>
                 <DialogHeader>
                     <DialogTitle>Create Issue</DialogTitle>
                 </DialogHeader>
                 <div className="flex items-center space-x-2">
                     <div className="grid flex-1 gap-2">
-                        <Input
-                            type="text"
-                            placeholder="Title"
-                        />
+                        <Input type="text" placeholder="Title" />
                     </div>
                 </div>
                 <div>
-                    <Textarea
-                        placeholder="Click to add description"
-                    />
+                    <Textarea placeholder="Click to add description" />
                 </div>
                 <div className="flex gap-5 justify-around">
-                    <Button className="border-2">
-                        Backlog
-                    </Button>
-                    <Button className="border-2">
-                        Low
-                    </Button>
-                    <Button className="border-2">
-                        Assignes
-                    </Button>
-                    <Button className="border-2">
-                        Sprint
-                    </Button>
+                    <StateDropdown />
+                    <PriorityDropdown />
+                    <AssigneesDropdown />
+                    <Button className="border-2">Sprint</Button>
                 </div>
-                <DialogFooter className="" >
+                <DialogFooter className="flex justify-between">
                     <DialogClose asChild>
                         <Button type="button" variant="secondary" onClick={onClose}>
                             Close
                         </Button>
                     </DialogClose>
-                    <Button className="border-2">
-                        Create Issue
-                    </Button>
+                    <Button className="border-2">Create Issue</Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>
-    )
+    );
 }
\ No newline at end of file
diff --git a/mango-frontend/src/components/Create Issue/State.tsx b/mango-frontend/src/components/Create Issue/State.tsx
deleted file mode 100644
index d0a691f..0000000
--- a/mango-frontend/src/components/Create Issue/State.tsx	
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from "react"
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuLabel,
-    DropdownMenuRadioGroup,
-    DropdownMenuRadioItem,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Button } from "@/components/ui/button"
-
-export function State() {
-    const [position, setPosition] = React.useState("bottom");
-
-    return (
-        <>
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button variant="outline">Open</Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-56">
-                    <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-                        <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-                        <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-                        <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
-                    </DropdownMenuRadioGroup>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </>
-    )
-}
\ No newline at end of file