feat: delete, copy plan, style plans page

src/components/DeletePlanConfirmationResponsiveDialog.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { useMediaQuery } from "@/lib/useMediaQuery";
+
+export const DeletePlanConfirmationResponsiveDialog = ({
+  deletePlan,
+}: {
+  deletePlan: () => void;
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const closeDialog = () => {
+    setOpen(false);
+  };
+  if (isDesktop) {
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild={true}>
+          <button
+            onClick={deletePlan}
+            className="w-full rounded-md rounded-t-none p-2 text-left hover:bg-slate-200"
+          >
+            Usuń
+          </button>
+        </DialogTrigger>
+        <DialogContent
+          className="sm:max-w-[425px]"
+          aria-describedby={undefined}
+        >
+          <DialogHeader>
+            <DialogTitle>Czy na pewno chcesz usunąć plan?</DialogTitle>
+          </DialogHeader>
+          <DeletePlan deletePlan={deletePlan} closeDialog={closeDialog} />
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild={true}>
+        <button
+          onClick={deletePlan}
+          className="w-full rounded-md rounded-t-none p-2 text-left hover:bg-slate-200"
+        >
+          Usuń
+        </button>
+      </DrawerTrigger>
+      <DrawerContent
+        className="items-center px-4 pb-6"
+        aria-describedby={undefined}
+      >
+        <DrawerHeader className="w-full max-w-[400px] text-left">
+          <DrawerTitle>Czy na pewno chcesz usunąć plan</DrawerTitle>
+        </DrawerHeader>
+        <DeletePlan deletePlan={deletePlan} closeDialog={closeDialog} />
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+function DeletePlan({
+  deletePlan,
+  closeDialog,
+}: {
+  deletePlan: () => void;
+  closeDialog: () => void;
+}) {
+  return (
+    <div className="flex w-full max-w-[400px] items-center justify-end gap-4 space-x-2 pt-4">
+      <button
+        onClick={() => {
+          closeDialog();
+        }}
+      >
+        Anuluj
+      </button>
+      <Button
+        onClick={() => {
+          deletePlan();
+        }}
+        className="rounded-md bg-red-500 text-lg hover:bg-red-400"
+      >
+        Tak
+      </Button>
+    </div>
+  );
+}

src/components/Plan.tsx

@@ -13,6 +13,7 @@ import { cn } from "@/lib/utils";
 import { planFamily } from "@/pages/createplan/[id]";
 import { plansIds } from "@/pages/plans";
 
+import { DeletePlanConfirmationResponsiveDialog } from "./DeletePlanConfirmationResponsiveDialog";
 import { buttonVariants } from "./ui/button";
 
 export const Plan = ({ id, name }: { id: string; name: string }) => {
@@ -60,12 +61,7 @@ export const Plan = ({ id, name }: { id: string; name: string }) => {
               >
                 Kopiuj
               </button>
-              <button
-                onClick={deletePlan}
-                className="w-full rounded-md rounded-t-none p-2 text-left hover:bg-slate-200"
-              >
-                Usuń
-              </button>
+              <DeletePlanConfirmationResponsiveDialog deletePlan={deletePlan} />
             </div>
           </PopoverContent>
         </Popover>

src/pages/createplan/[id].tsx

@@ -49,7 +49,7 @@ export const planFamily = atomFamily(
       `${id}-plan`,
       {
         id,
-        name: `Nowy plan - ${id}`,
+        name: `Nowy plan`,
         courses: [] as ExtendedCourse[],
         groups: [] as ExtendedGroup[],
         departments: [] as string[],

src/pages/plans.tsx

@@ -7,7 +7,7 @@ import { useRouter } from "next/router";
 import { Plan } from "@/components/Plan";
 import { Seo } from "@/components/SEO";
 import { SolvroLogo } from "@/components/SolvroLogo";
-import { buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 import { planFamily } from "./createplan/[id]";
@@ -70,12 +70,9 @@ const Plans = () => {
 
         <div className="container mx-auto max-h-full flex-1 flex-grow overflow-y-auto p-4">
           <div className="flex flex-wrap items-center justify-center gap-4 sm:justify-start">
-            <button
-              onClick={addNewPlan}
-              className="flex h-[200px] w-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-400 p-4 shadow-xl"
-            >
-              <span>Dodaj nowy plan</span>
-            </button>
+            <div className="flex h-[200px] w-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-400 p-4 shadow-xl">
+              <Button onClick={addNewPlan}>Dodaj nowy plan</Button>
+            </div>
             {plans.map((plan) => (
               <Plan key={plan.id} id={plan.id} name={plan.name} />
             ))}