Create Issue Component

HeeManSu · Jul 9, 2024 · 0db3280 · 0db3280
1 parent fbe8fd0
commit 0db3280
Show file tree

Hide file tree

Showing 11 changed files with 511 additions and 83 deletions.
diff --git a/mango-frontend/package-lock.json b/mango-frontend/package-lock.json
diff --git a/mango-frontend/package.json b/mango-frontend/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-separator": "^1.1.0",

diff --git a/mango-frontend/src/components/Create Issue/CreateIssue.tsx b/mango-frontend/src/components/Create Issue/CreateIssue.tsx
@@ -1,55 +1,65 @@
-import { Copy } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
 import {
     Dialog,
     DialogContent,
-    DialogDescription,
     DialogHeader,
     DialogTitle,
-    DialogTrigger,
     DialogFooter,
     DialogClose
 } from "@/components/ui/dialog"
-import { Label } from "@/components/ui/label"
 import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
 
+interface CreateIssueProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export function CreateIssue({ isOpen, onClose }: CreateIssueProps) {
 
-export function CreateIssue() {
     return (
-        <Dialog>
-            <DialogTrigger asChild>
-                <Button variant="outline">Share</Button>
-            </DialogTrigger>
-            <DialogContent className="sm:max-w-md">
+        <Dialog open={isOpen} onOpenChange={onClose}>
+            <DialogContent className="">
                 <DialogHeader>
-                    <DialogTitle>Share link</DialogTitle>
-                    <DialogDescription>
-                        Anyone who has this link will be able to view this.
-                    </DialogDescription>
+                    <DialogTitle>Create Issue</DialogTitle>
                 </DialogHeader>
                 <div className="flex items-center space-x-2">
                     <div className="grid flex-1 gap-2">
-                        <Label htmlFor="link" className="sr-only">
-                            Link
-                        </Label>
                         <Input
-                            id="link"
-                            defaultValue="https://ui.shadcn.com/docs/installation"
-                            readOnly
+                            type="text"
+                            placeholder="Title"
                         />
                     </div>
-                    <Button type="submit" size="sm" className="px-3">
-                        <span className="sr-only">Copy</span>
-                        <Copy className="h-4 w-4" />
+                </div>
+                <div>
+                    <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>
                 </div>
-                <DialogFooter className="sm:justify-start">
+                <DialogFooter className="" >
                     <DialogClose asChild>
-                        <Button type="button" variant="secondary">
+                        <Button type="button" variant="secondary" onClick={onClose}>
                             Close
                         </Button>
                     </DialogClose>
+                    <Button className="border-2">
+                        Create Issue
+                    </Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>

diff --git a/mango-frontend/src/components/Create Issue/State.tsx b/mango-frontend/src/components/Create Issue/State.tsx
@@ -0,0 +1,34 @@
+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>
+        </>
+    )
+}