add calendar setup

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-navigation-menu": "^1.1.4",
@@ -20,6 +21,7 @@
     "carousel": "^0.0.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.1.5",
     "framer-motion": "^11.2.11",
     "html-react-parser": "^5.1.10",
@@ -28,6 +30,7 @@
     "next": "^14.2.3",
     "next-auth": "^5.0.0-beta.18",
     "react": "^18",
+    "react-day-picker": "^8.10.1",
     "react-dom": "^18",
     "react-hook-form": "^7.51.5",
     "react-icons": "^5.2.1",

src/app/dashboard/events/page.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { MonthCalendar } from "@/components/Calendar";
+
+const Page = () => {
+  const monthNames = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+  ];
+  const month = new Date().getMonth(); // Call the function to get the month
+  const year= new Date().getFullYear()
+  const monthName = monthNames[month];
+
+  return (
+    <>
+      <h1 className="w-full pl-6">{monthName} {year} Calendar</h1>
+      <MonthCalendar />
+    </>
+  );
+};
+
+export default Page;

src/app/globals.css

@@ -22,3 +22,24 @@ body {
   font-style: normal;
 }
 
+:root {
+  --rdp-accent-color: indigo;
+  --rdp-background-color: black;
+}
+
+
+.events {
+  position: relative;
+}
+/* Strikeout */
+.events::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: currentColor;
+  z-index: 1;
+  transform: rotate(-45deg);
+}

src/components/Calendar.jsx

@@ -0,0 +1,90 @@
+'use client';
+import React, { useState } from 'react';
+import { DayPicker } from 'react-day-picker';
+import 'react-day-picker/dist/style.css';
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+const events = [
+  { date: 19, title: 'Title 19', about: 'About the event on 19th', venue: 'Venue 19' },
+  { date: 25, title: 'Title 25', about: 'About the event on 25th', venue: 'Venue 25' },
+  // Add more events as needed
+];
+
+/** Replace the 19th with an emoji */
+function CustomDayContent(props) {
+  const event = events.find((event) => event.date === props.date.getDate());
+  return (
+    <span style={{ position: 'relative', overflow: 'visible' }}>
+      {event ? (
+        <div>
+          <span className="bg-primary text-white p-1 ">{event.date}</span>
+        </div>
+      ) : (
+        props.date.getDate()
+      )}
+    </span>
+  );
+}
+function CustomCaptionComponent(props) {
+  return null;
+}
+
+export function MonthCalendar() {
+  const [selectedEvent, setSelectedEvent] = useState(null);
+  const [open, setOpen] = useState(false);
+
+  const handleDayClick = (day) => {
+    const dayNumber = day.getDate(); 
+    const event = events.find((event) => event.date === dayNumber);
+    if (event) {
+      setSelectedEvent(event);
+      setOpen(true);
+    } else {
+      setSelectedEvent(null);
+      setOpen(false);
+    }
+  };
+
+  return (
+    <>
+      <DayPicker
+        onDayClick={handleDayClick}
+        components={{
+          DayContent: CustomDayContent,
+          Caption: CustomCaptionComponent,
+        }}
+        className="text-sm"
+      />
+      {selectedEvent && (
+        <AlertDialogDemo event={selectedEvent} open={open} onOpenChange={setOpen} />
+      )}
+    </>
+  );
+}
+
+export function AlertDialogDemo({ event, open, onOpenChange }) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{event.title}</AlertDialogTitle>
+          <AlertDialogDescription>
+            <p><strong>About:</strong> {event.about}</p>
+            <p><strong>Venue:</strong> {event.venue}</p>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Close</AlertDialogCancel>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

src/components/Sidenav/Navlinks.jsx

@@ -10,6 +10,7 @@ import {
   IconArticle,
   IconBrandGithub,
   IconList,
+  IconCalendarEvent
 } from "@tabler/icons-react";
 
 // Define the static links for the navigation
@@ -19,6 +20,7 @@ const staticLinks = [
   { name: "Blogs", href: "/dashboard/blogs", Icon: IconArticle },
   { name: "Team", href: "/dashboard/team", Icon: IconFriends },
   { name: "Gallery", href: "/dashboard/gallery", Icon: IconPhotoEdit },
+  { name: "Events", href: "/dashboard/events", Icon: IconCalendarEvent },
   { name: "Home", href: "/", Icon: IconHome },
 ];
 

src/components/editor.jsx

@@ -5,7 +5,7 @@ import "react-quill/dist/quill.snow.css";
 import parse from "html-react-parser";
 export default function Editor({value,setValue}) {
   // const [value, setValue] = useState("");
-  // console.log(value)
+  console.log(value)
   // Customize the toolbar options
   const modules = {
     toolbar: [

src/components/ui/alert-dialog.jsx

@@ -0,0 +1,97 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref} />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-slate-800 dark:bg-slate-950",
+        className
+      )}
+      {...props} />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+    {...props} />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
+    {...props} />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props} />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}