├── .eslintrc.json
├── app
    ├── favicon.ico
    ├── signup
    │   └── page.tsx
    ├── signin
    │   └── page.tsx
    ├── layout.tsx
    └── page.tsx
├── postcss.config.js
├── lib
    └── utils.ts
├── utils
    └── supabase.ts
├── next.config.js
├── providers
    ├── toast-provider.tsx
    ├── user-provider.tsx
    ├── theme-provider.tsx
    ├── modal-provider.tsx
    └── supabase-provider.tsx
├── types.ts
├── hooks
    ├── use-upload-modal.tsx
    └── use-user.tsx
├── .gitignore
├── public
    ├── vercel.svg
    └── next.svg
├── components
    ├── realtime.tsx
    ├── inputs
    │   ├── ImageInput.tsx
    │   └── attachment-details.tsx
    ├── ui
    │   ├── label.tsx
    │   ├── textarea.tsx
    │   ├── input.tsx
    │   ├── separator.tsx
    │   ├── mode-toggle.tsx
    │   ├── button.tsx
    │   ├── card.tsx
    │   ├── icons.tsx
    │   ├── select.tsx
    │   └── dropdown-menu.tsx
    ├── navbar.tsx
    ├── modals
    │   ├── gallery-tab.tsx
    │   ├── upload-modal.tsx
    │   └── modal.tsx
    ├── button.tsx
    ├── card-body.tsx
    ├── sign-in-form.tsx
    └── sign-up-form.tsx
├── tsconfig.json
├── middleware.ts
├── LICENSE
├── package.json
├── README.md
├── styles
    ├── mdx.css
    └── globals.css
├── types_db.ts
└── tailwind.config.js


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abhinishere/next-gallery-modal/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs));
6 | }
7 | 


--------------------------------------------------------------------------------
/utils/supabase.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from "@supabase/supabase-js";
2 | 
3 | export default createClient(
4 |   process.env.NEXT_PUBLIC_SUPABASE_URL!,
5 |   process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
6 | );
7 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   images: {
 4 |     domains: [
 5 |       "images.pexels.com",
 6 |       "images.unsplash.com",
 7 |       "vlagkaxrpfclxyzmgqdf.supabase.co",
 8 |     ],
 9 |   },
10 | };
11 | 
12 | module.exports = nextConfig;
13 | 


--------------------------------------------------------------------------------
/providers/toast-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Toaster } from "react-hot-toast";
 4 | 
 5 | const ToastProvider = () => {
 6 |   return (
 7 |     <Toaster
 8 |       toastOptions={{
 9 |         style: {
10 |           background: "#333",
11 |           color: "#fff",
12 |         },
13 |       }}
14 |     />
15 |   );
16 | };
17 | 
18 | export default ToastProvider;
19 | 


--------------------------------------------------------------------------------
/providers/user-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { MyUserContextProvider } from "@/hooks/use-user";
 4 | 
 5 | interface UserProviderProps {
 6 |   children: React.ReactNode;
 7 | }
 8 | 
 9 | const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
10 |   return <MyUserContextProvider>{children}</MyUserContextProvider>;
11 | };
12 | 
13 | export default UserProvider;
14 | 


--------------------------------------------------------------------------------
/providers/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { ThemeProvider as NextThemesProvider } from "next-themes";
 5 | import { type ThemeProviderProps } from "next-themes/dist/types";
 6 | 
 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/providers/modal-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useEffect, useState } from "react";
 3 | 
 4 | const ModalProvider = () => {
 5 |   const [isMounted, setIsMounted] = useState(false);
 6 | 
 7 |   useEffect(() => {
 8 |     setIsMounted(true);
 9 |   }, []);
10 | 
11 |   if (!isMounted) {
12 |     return null;
13 |   }
14 | 
15 |   return <></>;
16 | };
17 | 
18 | export default ModalProvider;
19 | 


--------------------------------------------------------------------------------
/types.ts:
--------------------------------------------------------------------------------
 1 | export interface ImageType {
 2 |   id: string;
 3 |   created_at: string;
 4 |   user_id: string;
 5 |   author: string;
 6 |   title: string;
 7 |   image_path: string;
 8 |   alt: string;
 9 |   caption: string;
10 |   description: string;
11 |   status?: string;
12 | }
13 | 
14 | export interface UserDetails {
15 |   id: string;
16 |   first_name: string;
17 |   last_name: string;
18 |   full_name?: string;
19 |   avatar_url?: string;
20 | }
21 | 


--------------------------------------------------------------------------------
/hooks/use-upload-modal.tsx:
--------------------------------------------------------------------------------
 1 | import { create } from "zustand";
 2 | 
 3 | interface UploadModalProps {
 4 |   isOpen: boolean;
 5 |   imageSetter?: Function;
 6 |   onOpen: (imageSetter: Function) => void;
 7 |   onClose: () => void;
 8 | }
 9 | 
10 | const useUploadModal = create<UploadModalProps>((set) => ({
11 |   isOpen: false,
12 |   onOpen: (imageSetter?: Function) => set({ isOpen: true, imageSetter }),
13 |   onClose: () => set({ isOpen: false }),
14 | }));
15 | 
16 | export default useUploadModal;
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | .env
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 
38 | # vscode
39 | /.vscode/
40 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/components/realtime.tsx:
--------------------------------------------------------------------------------
 1 | import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 2 | import UploadModal from "./modals/upload-modal";
 3 | import { cookies } from "next/headers";
 4 | 
 5 | export const revalidate = 0;
 6 | 
 7 | export default async function Realtime() {
 8 |   console.log("getting initial values");
 9 |   const supabaseClient = createServerComponentClient({ cookies: cookies });
10 |   const { data, error } = await supabaseClient
11 |     .from("images")
12 |     .select("*")
13 |     .order("created_at", { ascending: false });
14 |   if (error) {
15 |     console.log(error.message);
16 |   }
17 |   return <UploadModal serverImages={data} />;
18 | }
19 | 


--------------------------------------------------------------------------------
/components/inputs/ImageInput.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | interface ImageInputProps {
 4 |   image: string;
 5 |   title: string;
 6 |   selected?: boolean;
 7 |   onClick: (value: string) => void;
 8 | }
 9 | 
10 | const ImageInput: React.FC<ImageInputProps> = ({
11 |   image,
12 |   title,
13 |   selected,
14 |   onClick,
15 | }) => {
16 |   return (
17 |     <div
18 |       className={`
19 |   rounded-xl
20 |   border-2
21 |   p-4
22 |   flex
23 |   flex-col
24 |   gap-3
25 |   hover:border-black
26 |   transition
27 |   cursor-pointer
28 |   ${selected ? "border-black" : "border-neutral-200"}
29 | `}
30 |     >
31 |       <Image src={image} alt="" height={100} width={100} />
32 |     </div>
33 |   );
34 | };
35 | 
36 | export default ImageInput;
37 | 


--------------------------------------------------------------------------------
/providers/supabase-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Database } from "@/types_db";
 4 | import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
 5 | import { SessionContextProvider } from "@supabase/auth-helpers-react";
 6 | import { useState } from "react";
 7 | 
 8 | interface SupabaseProviderProps {
 9 |   children: React.ReactNode;
10 | }
11 | 
12 | const SupabaseProvider: React.FC<SupabaseProviderProps> = ({ children }) => {
13 |   const [supabaseClient] = useState(() =>
14 |     createClientComponentClient<Database>()
15 |   );
16 |   return (
17 |     <SessionContextProvider supabaseClient={supabaseClient}>
18 |       {children}
19 |     </SessionContextProvider>
20 |   );
21 | };
22 | 
23 | export default SupabaseProvider;
24 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "paths": {
23 |       "@/*": ["./*"]
24 |     }
25 |   },
26 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as LabelPrimitive from "@radix-ui/react-label";
 5 | import { cva, type VariantProps } from "class-variance-authority";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | );
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ));
24 | Label.displayName = LabelPrimitive.Root.displayName;
25 | 
26 | export { Label };
27 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     );
20 |   }
21 | );
22 | Textarea.displayName = "Textarea";
23 | 
24 | export { Textarea };
25 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     );
21 |   }
22 | );
23 | Input.displayName = "Input";
24 | 
25 | export { Input };
26 | 


--------------------------------------------------------------------------------
/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Separator = React.forwardRef<
 9 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11 | >(
12 |   (
13 |     { className, orientation = "horizontal", decorative = true, ...props },
14 |     ref
15 |   ) => (
16 |     <SeparatorPrimitive.Root
17 |       ref={ref}
18 |       decorative={decorative}
19 |       orientation={orientation}
20 |       className={cn(
21 |         "shrink-0 bg-border",
22 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   )
28 | );
29 | Separator.displayName = SeparatorPrimitive.Root.displayName;
30 | 
31 | export { Separator };
32 | 


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
 2 | import { NextResponse } from "next/server";
 3 | import type { NextRequest } from "next/server";
 4 | 
 5 | export async function middleware(req: NextRequest) {
 6 |   // We need to create a response and hand it to the supabase client to be able to modify the response headers.
 7 |   const res = NextResponse.next();
 8 | 
 9 |   // Create authenticated Supabase Client.
10 |   const supabase = createMiddlewareClient({ req, res });
11 | 
12 |   const {
13 |     data: { session },
14 |   } = await supabase.auth.getSession();
15 | 
16 |   // Forward to protected route if we have a session
17 |   if (session) {
18 |     return res;
19 |   }
20 | 
21 |   // Auth condition not met, redirect to login page.
22 |   const redirectUrl = req.nextUrl.clone();
23 |   redirectUrl.pathname = "/signin";
24 |   redirectUrl.searchParams.set(`redirectedFrom`, req.nextUrl.pathname);
25 |   return NextResponse.redirect(redirectUrl);
26 | }
27 | 
28 | export const config = {
29 |   // list all the pages you want protected here
30 |   matcher: ["/"],
31 | };
32 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Abhin Mahipal
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/app/signup/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Link from "next/link";
 4 | import { SignUpForm } from "@/components/sign-up-form";
 5 | import { useRouter } from "next/navigation";
 6 | import { useUser } from "@/hooks/use-user";
 7 | 
 8 | export default function SignUpPage() {
 9 |   const router = useRouter();
10 |   const { user } = useUser();
11 |   if (user) {
12 |     router.push("/");
13 |   }
14 |   return (
15 |     <div className="container flex h-screen w-screen flex-col items-center justify-center">
16 |       <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
17 |         <div className="flex flex-col space-y-2 text-center">
18 |           {/* <Icons.logo className="mx-auto h-6 w-6" /> */}
19 |           <h1 className="text-2xl font-semibold tracking-tight">Hello there</h1>
20 |           <p className="text-sm text-muted-foreground">
21 |             Enter email and password to create an account
22 |           </p>
23 |         </div>
24 |         <SignUpForm />
25 |         <p className="px-8 text-center text-sm text-muted-foreground">
26 |           <Link
27 |             href="/signin"
28 |             className="hover:text-brand underline underline-offset-4"
29 |           >
30 |             Already have an account? Sign in
31 |           </Link>
32 |         </p>
33 |       </div>
34 |     </div>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/components/navbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | import { buttonVariants } from "./ui/button";
 5 | import { ModeToggle } from "./ui/mode-toggle";
 6 | import { usePathname, useRouter } from "next/navigation";
 7 | import { useSupabaseClient } from "@supabase/auth-helpers-react";
 8 | import { toast } from "react-hot-toast";
 9 | 
10 | const Navbar = () => {
11 |   const supabaseClient = useSupabaseClient();
12 |   const pathname = usePathname();
13 |   const router = useRouter();
14 |   const handleLogOut = async () => {
15 |     const { error } = await supabaseClient.auth.signOut();
16 |     if (error) {
17 |       toast.error(error.message);
18 |     } else {
19 |       router.push("/signin");
20 |     }
21 |   };
22 |   const showLogOut = pathname === "/";
23 |   return (
24 |     <>
25 |       {showLogOut ? (
26 |         <div
27 |           onClick={handleLogOut}
28 |           className={cn(
29 |             buttonVariants({ variant: "ghost" }),
30 |             "absolute left-4 top-4 md:left-8 md:top-8 cursor-pointer"
31 |           )}
32 |         >
33 |           Log out
34 |         </div>
35 |       ) : (
36 |         <div></div>
37 |       )}
38 |       <div className={"absolute right-4 top-4 md:right-8 md:top-8"}>
39 |         <ModeToggle />
40 |       </div>
41 |     </>
42 |   );
43 | };
44 | 
45 | export default Navbar;
46 | 


--------------------------------------------------------------------------------
/components/modals/gallery-tab.tsx:
--------------------------------------------------------------------------------
 1 | import { Tab } from "@headlessui/react";
 2 | import { cn } from "@/lib/utils";
 3 | import { ImageType } from "@/types";
 4 | import Image from "next/image";
 5 | 
 6 | interface GalleryTabProps {
 7 |   image: ImageType;
 8 | }
 9 | 
10 | const GalleryTab: React.FC<GalleryTabProps> = ({ image }) => {
11 |   return (
12 |     <Tab className="m-1 relative flex aspect-square cursor-pointer items-center justify-center rounded-md ">
13 |       {({ selected }) => (
14 |         <div>
15 |           <span className="absolute h-full w-full aspect-square inset-0 overflow-hidden rounded-md">
16 |             <Image
17 |               fill
18 |               sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
19 |               src={
20 |                 process.env.NEXT_PUBLIC_SUPABASE_URL +
21 |                 "/storage/v1/object/public/images/" +
22 |                 image.image_path
23 |               }
24 |               alt=""
25 |               className="object-cover object-center"
26 |             />
27 |           </span>
28 |           <span
29 |             className={cn(
30 |               "absolute inset-0 rounded-md ring-4",
31 |               selected ? "ring-blue-400" : "ring-transparent"
32 |             )}
33 |           />
34 |         </div>
35 |       )}
36 |     </Tab>
37 |   );
38 | };
39 | 
40 | export default GalleryTab;
41 | 


--------------------------------------------------------------------------------
/app/signin/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Link from "next/link";
 4 | import { SignInForm } from "@/components/sign-in-form";
 5 | import { useUser } from "@/hooks/use-user";
 6 | import { useRouter } from "next/navigation";
 7 | 
 8 | export default function SignInPage() {
 9 |   const router = useRouter();
10 |   const { user } = useUser();
11 |   if (user) {
12 |     router.push("/");
13 |   }
14 |   return (
15 |     <div className="container flex h-screen w-screen flex-col items-center justify-center">
16 |       <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
17 |         <div className="flex flex-col space-y-2 text-center">
18 |           {/* <Icons.logo className="mx-auto h-6 w-6" /> */}
19 |           <h1 className="text-2xl font-semibold tracking-tight">
20 |             Welcome back
21 |           </h1>
22 |           <p className="text-sm text-muted-foreground">
23 |             Enter your email to sign in to your account
24 |           </p>
25 |         </div>
26 |         <SignInForm />
27 |         <p className="px-8 text-center text-sm text-muted-foreground">
28 |           <Link
29 |             href="/signup"
30 |             className="hover:text-brand underline underline-offset-4"
31 |           >
32 |             Don&apos;t have an account? Sign Up
33 |           </Link>
34 |         </p>
35 |       </div>
36 |     </div>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/components/ui/mode-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { Moon, Sun } from "lucide-react";
 5 | import { useTheme } from "next-themes";
 6 | 
 7 | import { Button } from "@/components/ui/button";
 8 | import {
 9 |   DropdownMenu,
10 |   DropdownMenuContent,
11 |   DropdownMenuItem,
12 |   DropdownMenuTrigger,
13 | } from "@/components/ui/dropdown-menu";
14 | 
15 | export function ModeToggle() {
16 |   const { setTheme } = useTheme();
17 | 
18 |   return (
19 |     <DropdownMenu>
20 |       <DropdownMenuTrigger asChild>
21 |         <Button variant="outline" size="icon">
22 |           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
23 |           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24 |           <span className="sr-only">Toggle theme</span>
25 |         </Button>
26 |       </DropdownMenuTrigger>
27 |       <DropdownMenuContent align="end">
28 |         <DropdownMenuItem onClick={() => setTheme("light")}>
29 |           Light
30 |         </DropdownMenuItem>
31 |         <DropdownMenuItem onClick={() => setTheme("dark")}>
32 |           Dark
33 |         </DropdownMenuItem>
34 |         <DropdownMenuItem onClick={() => setTheme("system")}>
35 |           System
36 |         </DropdownMenuItem>
37 |       </DropdownMenuContent>
38 |     </DropdownMenu>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/components/button.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { IconType } from "react-icons";
 4 | 
 5 | interface ButtonProps {
 6 |   label: string;
 7 |   onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
 8 |   disabled?: boolean;
 9 |   outline?: boolean;
10 |   small?: boolean;
11 |   icon?: IconType;
12 | }
13 | 
14 | const Button: React.FC<ButtonProps> = ({
15 |   label,
16 |   onClick,
17 |   disabled,
18 |   outline,
19 |   small,
20 |   icon: Icon,
21 | }) => {
22 |   return (
23 |     <button
24 |       disabled={disabled}
25 |       onClick={onClick}
26 |       className={`
27 |         relative
28 |         disabled:opacity-70
29 |         disabled:cursor-not-allowed
30 |         rounded-lg
31 |         hover:opacity-80
32 |         transition
33 |         w-full
34 |         ${outline ? "bg-white" : "bg-rose-500"}
35 |         ${outline ? "border-black" : "border-rose-500"}
36 |         ${outline ? "text-black" : "text-white"}
37 |         ${small ? "text-sm" : "text-md"}
38 |         ${small ? "py-1" : "py-3"}
39 |         ${small ? "font-light" : "font-semibold"}
40 |         ${small ? "border-[1px]" : "border-2"}
41 |       `}
42 |     >
43 |       {Icon && (
44 |         <Icon
45 |           size={24}
46 |           className="
47 |             absolute
48 |             left-4
49 |             top-3
50 |           "
51 |         />
52 |       )}
53 |       {label}
54 |     </button>
55 |   );
56 | };
57 | 
58 | export default Button;
59 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Navbar from "@/components/navbar";
 2 | import Realtime from "@/components/realtime";
 3 | import SupabaseProvider from "@/providers/supabase-provider";
 4 | import { ThemeProvider } from "@/providers/theme-provider";
 5 | import ToastProvider from "@/providers/toast-provider";
 6 | import UserProvider from "@/providers/user-provider";
 7 | import "@/styles/globals.css";
 8 | import type { Metadata } from "next";
 9 | import { Inter } from "next/font/google";
10 | 
11 | const inter = Inter({ subsets: ["latin"] });
12 | 
13 | export const metadata: Metadata = {
14 |   title: "Next Gallery Modal",
15 |   description: "Adds WordPress-like Gallery Modal to your Next.js project",
16 | };
17 | 
18 | export default function RootLayout({
19 |   children,
20 | }: {
21 |   children: React.ReactNode;
22 | }) {
23 |   return (
24 |     <html lang="en">
25 |       <body className={inter.className}>
26 |         <div className="container flex h-screen w-screen flex-col items-center justify-center">
27 |           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
28 |             <ToastProvider />
29 |             <SupabaseProvider>
30 |               <UserProvider>
31 |                 <Realtime />
32 |                 <Navbar />
33 |                 {children}
34 |               </UserProvider>
35 |             </SupabaseProvider>
36 |           </ThemeProvider>
37 |         </div>
38 |       </body>
39 |     </html>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-gallery-modal",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@headlessui/react": "^1.7.15",
13 |     "@radix-ui/react-dropdown-menu": "^2.0.5",
14 |     "@radix-ui/react-icons": "^1.3.0",
15 |     "@radix-ui/react-label": "^2.0.2",
16 |     "@radix-ui/react-select": "^1.2.2",
17 |     "@radix-ui/react-separator": "^1.0.3",
18 |     "@radix-ui/react-slot": "^1.0.2",
19 |     "@supabase/auth-helpers-nextjs": "^0.7.2",
20 |     "@supabase/auth-helpers-react": "^0.4.0",
21 |     "@types/node": "20.4.1",
22 |     "@types/react": "18.2.14",
23 |     "@types/react-dom": "18.2.6",
24 |     "autoprefixer": "10.4.14",
25 |     "class-variance-authority": "^0.6.1",
26 |     "eslint": "8.44.0",
27 |     "eslint-config-next": "13.4.9",
28 |     "lucide-react": "^0.259.0",
29 |     "next": "13.4.9",
30 |     "next-themes": "^0.2.1",
31 |     "postcss": "8.4.25",
32 |     "react": "18.2.0",
33 |     "react-dom": "18.2.0",
34 |     "react-hot-toast": "^2.4.1",
35 |     "react-icons": "^4.10.1",
36 |     "sharp": "^0.32.4",
37 |     "tailwind-merge": "^1.13.2",
38 |     "tailwindcss": "3.3.2",
39 |     "tailwindcss-animate": "^1.0.6",
40 |     "typescript": "^5.1.6",
41 |     "uuid": "^9.0.0",
42 |     "zustand": "^4.3.9"
43 |   },
44 |   "devDependencies": {
45 |     "@types/uuid": "^9.0.2",
46 |     "encoding": "^0.1.13",
47 |     "supabase": "^1.77.9"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Docs will be updated soon, but for now remember to add these in `.env.local`:
 2 | NEXT_PUBLIC_SUPABASE_URL
 3 | NEXT_PUBLIC_SUPABASE_ANON_KEY
 4 | SUPABASE_SERVICE_ROLE_KEY
 5 | 
 6 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 7 | 
 8 | ## Getting Started
 9 | 
10 | First, run the development server:
11 | 
12 | ```bash
13 | npm run dev
14 | # or
15 | yarn dev
16 | # or
17 | pnpm dev
18 | ```
19 | 
20 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
21 | 
22 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
23 | 
24 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
25 | 
26 | ## Learn More
27 | 
28 | To learn more about Next.js, take a look at the following resources:
29 | 
30 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
31 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
32 | 
33 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
34 | 
35 | ## Deploy on Vercel
36 | 
37 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
38 | 
39 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
40 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import { StarIcon } from "@radix-ui/react-icons";
 2 | import { Button } from "@/components/ui/button";
 3 | import {
 4 |   Card,
 5 |   CardContent,
 6 |   CardDescription,
 7 |   CardHeader,
 8 |   CardTitle,
 9 | } from "@/components/ui/card";
10 | import CardBody from "@/components/card-body";
11 | 
12 | const HomePage = () => {
13 |   return (
14 |     <>
15 |       <Card>
16 |         <CardHeader className="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
17 |           <div className="space-y-1">
18 |             <CardTitle>abhinishere/next-gallery-modal</CardTitle>
19 |             <CardDescription>
20 |               Component to add a WordPress-like gallery modal to your Next.js
21 |               project.
22 |             </CardDescription>
23 |           </div>
24 |           <div className="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
25 |             <Button variant="secondary" className="px-3 shadow-none">
26 |               <a
27 |                 className="flex"
28 |                 href="https://github.com/abhinishere/next-gallery-modal"
29 |                 target={"_blank"}
30 |                 rel={"noreferrer"}
31 |               >
32 |                 <StarIcon className="mr-2 h-4 w-4" />
33 |                 Star repo
34 |               </a>
35 |             </Button>
36 |           </div>
37 |         </CardHeader>
38 |         <CardContent>
39 |           <CardBody />
40 |           {/* <Button className="mb-5">
41 |           <PlusCircledIcon className="mr-2 h-4 w-4" />
42 |           Select image
43 |         </Button> */}
44 |         </CardContent>
45 |       </Card>
46 |     </>
47 |   );
48 | };
49 | 
50 | export default HomePage;
51 | 


--------------------------------------------------------------------------------
/styles/mdx.css:
--------------------------------------------------------------------------------
 1 | [data-theme="light"] {
 2 |   display: block;
 3 | }
 4 | 
 5 | [data-theme="dark"] {
 6 |   display: none;
 7 | }
 8 | 
 9 | .dark [data-theme="light"] {
10 |   display: none;
11 | }
12 | 
13 | .dark [data-theme="dark"] {
14 |   display: block;
15 | }
16 | 
17 | [data-rehype-pretty-code-fragment] {
18 |   @apply relative;
19 | }
20 | 
21 | [data-rehype-pretty-code-fragment] code {
22 |   @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0;
23 |   counter-reset: line;
24 |   box-decoration-break: clone;
25 | }
26 | 
27 | [data-rehype-pretty-code-fragment] .line {
28 |   @apply px-4 min-h-[1rem] py-0.5 w-full inline-block;
29 | }
30 | 
31 | [data-rehype-pretty-code-fragment] [data-line-numbers] .line {
32 |   @apply px-2;
33 | }
34 | 
35 | [data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
36 |   @apply text-zinc-50/40 text-xs;
37 |   counter-increment: line;
38 |   content: counter(line);
39 |   display: inline-block;
40 |   width: 1.8rem;
41 |   margin-right: 1.4rem;
42 |   text-align: right;
43 | }
44 | 
45 | [data-rehype-pretty-code-fragment] .line--highlighted {
46 |   @apply bg-zinc-700/50;
47 | }
48 | 
49 | [data-rehype-pretty-code-fragment] .line-highlighted span {
50 |   @apply relative;
51 | }
52 | 
53 | [data-rehype-pretty-code-fragment] .word--highlighted {
54 |   @apply rounded-md bg-zinc-700/50 border-zinc-700/70 p-1;
55 | }
56 | 
57 | .dark [data-rehype-pretty-code-fragment] .word--highlighted {
58 |   @apply bg-zinc-900;
59 | }
60 | 
61 | [data-rehype-pretty-code-title] {
62 |   @apply mt-2 pt-6 px-4 text-sm font-medium;
63 | }
64 | 
65 | [data-rehype-pretty-code-title] + pre {
66 |   @apply mt-2;
67 | }
68 | 
69 | .mdx > .steps:first-child > h3:first-child {
70 |   @apply mt-0;
71 | }
72 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | );
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean;
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button";
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     );
53 |   }
54 | );
55 | Button.displayName = "Button";
56 | 
57 | export { Button, buttonVariants };
58 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(" bg-card text-card-foreground shadow py-2", className)}
12 |     {...props}
13 |   />
14 | ));
15 | Card.displayName = "Card";
16 | 
17 | const CardHeader = React.forwardRef<
18 |   HTMLDivElement,
19 |   React.HTMLAttributes<HTMLDivElement>
20 | >(({ className, ...props }, ref) => (
21 |   <div
22 |     ref={ref}
23 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
24 |     {...props}
25 |   />
26 | ));
27 | CardHeader.displayName = "CardHeader";
28 | 
29 | const CardTitle = React.forwardRef<
30 |   HTMLParagraphElement,
31 |   React.HTMLAttributes<HTMLHeadingElement>
32 | >(({ className, ...props }, ref) => (
33 |   <h3
34 |     ref={ref}
35 |     className={cn("font-semibold leading-none tracking-tight", className)}
36 |     {...props}
37 |   />
38 | ));
39 | CardTitle.displayName = "CardTitle";
40 | 
41 | const CardDescription = React.forwardRef<
42 |   HTMLParagraphElement,
43 |   React.HTMLAttributes<HTMLParagraphElement>
44 | >(({ className, ...props }, ref) => (
45 |   <p
46 |     ref={ref}
47 |     className={cn("text-sm text-muted-foreground", className)}
48 |     {...props}
49 |   />
50 | ));
51 | CardDescription.displayName = "CardDescription";
52 | 
53 | const CardContent = React.forwardRef<
54 |   HTMLDivElement,
55 |   React.HTMLAttributes<HTMLDivElement>
56 | >(({ className, ...props }, ref) => (
57 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
58 | ));
59 | CardContent.displayName = "CardContent";
60 | 
61 | const CardFooter = React.forwardRef<
62 |   HTMLDivElement,
63 |   React.HTMLAttributes<HTMLDivElement>
64 | >(({ className, ...props }, ref) => (
65 |   <div
66 |     ref={ref}
67 |     className={cn(" flex items-center p-6 pt-0", className)}
68 |     {...props}
69 |   />
70 | ));
71 | CardFooter.displayName = "CardFooter";
72 | 
73 | export {
74 |   Card,
75 |   CardHeader,
76 |   CardFooter,
77 |   CardTitle,
78 |   CardDescription,
79 |   CardContent,
80 | };
81 | 


--------------------------------------------------------------------------------
/hooks/use-user.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { UserDetails } from "@/types";
 4 | import { User } from "@supabase/auth-helpers-nextjs";
 5 | import {
 6 |   useSessionContext,
 7 |   useUser as useSupaUser,
 8 | } from "@supabase/auth-helpers-react";
 9 | import { createContext, useContext, useEffect, useState } from "react";
10 | 
11 | type UserContextType = {
12 |   accessToken: string | null;
13 |   user: User | null;
14 |   userDetails: UserDetails | null;
15 |   isLoading: boolean;
16 | };
17 | 
18 | export const UserContext = createContext<UserContextType | undefined>(
19 |   undefined
20 | );
21 | 
22 | export interface Props {
23 |   [propName: string]: any;
24 | }
25 | 
26 | export const MyUserContextProvider = (props: Props) => {
27 |   const {
28 |     session,
29 |     isLoading: isLoadingUser,
30 |     supabaseClient: supabase,
31 |   } = useSessionContext();
32 | 
33 |   const user = useSupaUser();
34 |   const accessToken = session?.access_token ?? null;
35 |   const [isLoadingData, setIsLoadingData] = useState(false);
36 |   const [userDetails, setUserDetails] = useState<UserDetails | null>(null);
37 | 
38 |   const getUserDetails = () => supabase.from("profiles").select("*").single();
39 | 
40 |   useEffect(() => {
41 |     if (user && !isLoadingData && !userDetails) {
42 |       setIsLoadingData(true);
43 | 
44 |       Promise.allSettled([getUserDetails()]).then((results) => {
45 |         const userDetailsPromise = results[0];
46 | 
47 |         if (userDetailsPromise.status == "fulfilled") {
48 |           setUserDetails(userDetailsPromise.value.data as UserDetails);
49 |         }
50 | 
51 |         setIsLoadingData(false);
52 |       });
53 |     } else if (!user && !isLoadingUser && !isLoadingData) {
54 |       setUserDetails(null);
55 |     }
56 |   }, [user, isLoadingUser]);
57 | 
58 |   const value = {
59 |     accessToken,
60 |     user,
61 |     userDetails,
62 |     isLoading: isLoadingUser || isLoadingData,
63 |   };
64 | 
65 |   return <UserContext.Provider value={value} {...props} />;
66 | };
67 | 
68 | export const useUser = () => {
69 |   const context = useContext(UserContext);
70 |   if (context == undefined) {
71 |     throw new Error("useUser should be used within a MyUserContextProvider");
72 |   }
73 |   return context;
74 | };
75 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer base {
  6 |   :root {
  7 |     --background: 0 0% 100%;
  8 |     --foreground: 240 10% 3.9%;
  9 | 
 10 |     --muted: 240 4.8% 95.9%;
 11 |     --muted-foreground: 240 3.8% 46.1%;
 12 | 
 13 |     --popover: 0 0% 100%;
 14 |     --popover-foreground: 240 10% 3.9%;
 15 | 
 16 |     --card: 0 0% 100%;
 17 |     --card-foreground: 240 10% 3.9%;
 18 | 
 19 |     --border: 240 5.9% 90%;
 20 |     --input: 240 5.9% 90%;
 21 | 
 22 |     --primary: 240 5.9% 10%;
 23 |     --primary-foreground: 0 0% 98%;
 24 | 
 25 |     --secondary: 240 4.8% 95.9%;
 26 |     --secondary-foreground: 240 5.9% 10%;
 27 | 
 28 |     --accent: 240 4.8% 95.9%;
 29 |     --accent-foreground: 240 5.9% 10%;
 30 | 
 31 |     --destructive: 0 84.2% 60.2%;
 32 |     --destructive-foreground: 0 0% 98%;
 33 | 
 34 |     --ring: 240 5% 64.9%;
 35 | 
 36 |     --radius: 0.5rem;
 37 |   }
 38 | 
 39 |   .dark {
 40 |     --background: 240 10% 3.9%;
 41 |     --foreground: 0 0% 98%;
 42 | 
 43 |     --muted: 240 3.7% 15.9%;
 44 |     --muted-foreground: 240 5% 64.9%;
 45 | 
 46 |     --popover: 240 10% 3.9%;
 47 |     --popover-foreground: 0 0% 98%;
 48 | 
 49 |     --card: 240 10% 3.9%;
 50 |     --card-foreground: 0 0% 98%;
 51 | 
 52 |     --border: 240 3.7% 15.9%;
 53 |     --input: 240 3.7% 15.9%;
 54 | 
 55 |     --primary: 0 0% 98%;
 56 |     --primary-foreground: 240 5.9% 10%;
 57 | 
 58 |     --secondary: 240 3.7% 15.9%;
 59 |     --secondary-foreground: 0 0% 98%;
 60 | 
 61 |     --accent: 240 3.7% 15.9%;
 62 |     --accent-foreground: 0 0% 98%;
 63 | 
 64 |     --destructive: 0 62.8% 30.6%;
 65 |     --destructive-foreground: 0 85.7% 97.3%;
 66 | 
 67 |     --ring: 240 3.7% 15.9%;
 68 |   }
 69 | }
 70 | 
 71 | @layer base {
 72 |   * {
 73 |     @apply border-border;
 74 |   }
 75 |   body {
 76 |     @apply bg-background text-foreground;
 77 |     font-feature-settings: "rlig" 1, "calt" 1;
 78 |   }
 79 | }
 80 | 
 81 | @layer utilities {
 82 |   .step {
 83 |     counter-increment: step;
 84 |   }
 85 | 
 86 |   .step:before {
 87 |     @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
 88 |     @apply ml-[-50px] mt-[-4px];
 89 |     content: counter(step);
 90 |   }
 91 | }
 92 | 
 93 | @media (max-width: 640px) {
 94 |   .container {
 95 |     @apply px-4;
 96 |   }
 97 | }
 98 | 
 99 | input[type="file"] {
100 |   color: rgba(0, 0, 0, 0);
101 | }
102 | 


--------------------------------------------------------------------------------
/types_db.ts:
--------------------------------------------------------------------------------
 1 | export type Json =
 2 |   | string
 3 |   | number
 4 |   | boolean
 5 |   | null
 6 |   | { [key: string]: Json | undefined }
 7 |   | Json[]
 8 | 
 9 | export interface Database {
10 |   public: {
11 |     Tables: {
12 |       images: {
13 |         Row: {
14 |           author: string | null
15 |           created_at: string | null
16 |           id: number
17 |           image_path: string | null
18 |           title: string | null
19 |           user_id: string | null
20 |         }
21 |         Insert: {
22 |           author?: string | null
23 |           created_at?: string | null
24 |           id?: number
25 |           image_path?: string | null
26 |           title?: string | null
27 |           user_id?: string | null
28 |         }
29 |         Update: {
30 |           author?: string | null
31 |           created_at?: string | null
32 |           id?: number
33 |           image_path?: string | null
34 |           title?: string | null
35 |           user_id?: string | null
36 |         }
37 |         Relationships: [
38 |           {
39 |             foreignKeyName: "images_user_id_fkey"
40 |             columns: ["user_id"]
41 |             referencedRelation: "profiles"
42 |             referencedColumns: ["id"]
43 |           }
44 |         ]
45 |       }
46 |       profiles: {
47 |         Row: {
48 |           avatar_url: string | null
49 |           full_name: string | null
50 |           id: string
51 |           updated_at: string | null
52 |           username: string | null
53 |           website: string | null
54 |         }
55 |         Insert: {
56 |           avatar_url?: string | null
57 |           full_name?: string | null
58 |           id: string
59 |           updated_at?: string | null
60 |           username?: string | null
61 |           website?: string | null
62 |         }
63 |         Update: {
64 |           avatar_url?: string | null
65 |           full_name?: string | null
66 |           id?: string
67 |           updated_at?: string | null
68 |           username?: string | null
69 |           website?: string | null
70 |         }
71 |         Relationships: [
72 |           {
73 |             foreignKeyName: "profiles_id_fkey"
74 |             columns: ["id"]
75 |             referencedRelation: "users"
76 |             referencedColumns: ["id"]
77 |           }
78 |         ]
79 |       }
80 |     }
81 |     Views: {
82 |       [_ in never]: never
83 |     }
84 |     Functions: {
85 |       [_ in never]: never
86 |     }
87 |     Enums: {
88 |       [_ in never]: never
89 |     }
90 |     CompositeTypes: {
91 |       [_ in never]: never
92 |     }
93 |   }
94 | }
95 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const { fontFamily } = require("tailwindcss/defaultTheme");
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 |   darkMode: ["class"],
 6 |   content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
 7 |   // safelist: ["dark"],
 8 |   theme: {
 9 |     container: {
10 |       center: true,
11 |       padding: "2rem",
12 |       screens: {
13 |         "2xl": "1400px",
14 |       },
15 |     },
16 |     extend: {
17 |       ringColor: ["hover", "active"],
18 |       colors: {
19 |         border: "hsl(var(--border))",
20 |         input: "hsl(var(--input))",
21 |         ring: "hsl(var(--ring))",
22 |         background: "hsl(var(--background))",
23 |         foreground: "hsl(var(--foreground))",
24 |         primary: {
25 |           DEFAULT: "hsl(var(--primary))",
26 |           foreground: "hsl(var(--primary-foreground))",
27 |         },
28 |         secondary: {
29 |           DEFAULT: "hsl(var(--secondary))",
30 |           foreground: "hsl(var(--secondary-foreground))",
31 |         },
32 |         destructive: {
33 |           DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
34 |           foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
35 |         },
36 |         muted: {
37 |           DEFAULT: "hsl(var(--muted))",
38 |           foreground: "hsl(var(--muted-foreground))",
39 |         },
40 |         accent: {
41 |           DEFAULT: "hsl(var(--accent))",
42 |           foreground: "hsl(var(--accent-foreground))",
43 |         },
44 |         popover: {
45 |           DEFAULT: "hsl(var(--popover))",
46 |           foreground: "hsl(var(--popover-foreground))",
47 |         },
48 |         card: {
49 |           DEFAULT: "hsl(var(--card))",
50 |           foreground: "hsl(var(--card-foreground))",
51 |         },
52 |       },
53 |       borderRadius: {
54 |         lg: `var(--radius)`,
55 |         md: `calc(var(--radius) - 2px)`,
56 |         sm: "calc(var(--radius) - 4px)",
57 |       },
58 |       fontFamily: {
59 |         sans: ["var(--font-sans)", ...fontFamily.sans],
60 |       },
61 |       keyframes: {
62 |         "accordion-down": {
63 |           from: { height: 0 },
64 |           to: { height: "var(--radix-accordion-content-height)" },
65 |         },
66 |         "accordion-up": {
67 |           from: { height: "var(--radix-accordion-content-height)" },
68 |           to: { height: 0 },
69 |         },
70 |       },
71 |       animation: {
72 |         "accordion-down": "accordion-down 0.2s ease-out",
73 |         "accordion-up": "accordion-up 0.2s ease-out",
74 |       },
75 |     },
76 |   },
77 |   plugins: [require("tailwindcss-animate")],
78 | };
79 | 


--------------------------------------------------------------------------------
/components/ui/icons.tsx:
--------------------------------------------------------------------------------
 1 | type IconProps = React.HTMLAttributes<SVGElement>;
 2 | 
 3 | export const Icons = {
 4 |   spinner: (props: IconProps) => (
 5 |     <svg
 6 |       xmlns="http://www.w3.org/2000/svg"
 7 |       width="24"
 8 |       height="24"
 9 |       viewBox="0 0 24 24"
10 |       fill="none"
11 |       stroke="currentColor"
12 |       strokeWidth="2"
13 |       strokeLinecap="round"
14 |       strokeLinejoin="round"
15 |       {...props}
16 |     >
17 |       <path d="M21 12a9 9 0 1 1-6.219-8.56" />
18 |     </svg>
19 |   ),
20 |   gitHub: (props: IconProps) => (
21 |     <svg viewBox="0 0 438.549 438.549" {...props}>
22 |       <path
23 |         fill="currentColor"
24 |         d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
25 |       ></path>
26 |     </svg>
27 |   ),
28 | };
29 | 


--------------------------------------------------------------------------------
/components/card-body.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import useUploadModal from "@/hooks/use-upload-modal";
 4 | import { ImageType } from "@/types";
 5 | import Image from "next/image";
 6 | import { useCallback, useState } from "react";
 7 | import { TbPhotoPlus } from "react-icons/tb";
 8 | import { CircleIcon } from "@radix-ui/react-icons";
 9 | 
10 | const CardBody = () => {
11 |   // // const [showModal, setShowModal] = useState(false);
12 |   const [featuredImage, setFeaturedImage] = useState<ImageType>();
13 |   const uploadModal = useUploadModal();
14 | 
15 |   const onClickUpload = useCallback(() => {
16 |     //you may add security check here based on use case
17 |     uploadModal.onOpen(setFeaturedImage);
18 |   }, [uploadModal]);
19 | 
20 |   console.log("Featured Image value is " + featuredImage);
21 |   return (
22 |     <>
23 |       <div
24 |         onClick={() => onClickUpload()}
25 |         className="
26 |       relative
27 |       cursor-pointer
28 |       hover:opacity-70
29 |       transition
30 |       border-dashed 
31 |       border-2 
32 |       p-20 
33 |       border-neutral-300
34 |       flex
35 |       flex-col
36 |       justify-center
37 |       items-center
38 |       gap-4
39 |       text-neutral-600
40 |       mb-5
41 |       h-72
42 |     "
43 |       >
44 |         {!featuredImage ? (
45 |           <>
46 |             <TbPhotoPlus size={50} />
47 |             <div className="font-semibold text-lg">Click to upload</div>
48 |           </>
49 |         ) : (
50 |           <Image
51 |             src={
52 |               process.env.NEXT_PUBLIC_SUPABASE_URL +
53 |               "/storage/v1/object/public/images/" +
54 |               featuredImage.image_path
55 |             }
56 |             alt="featured image"
57 |             fill
58 |             sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
59 |           />
60 |         )}
61 |       </div>
62 |       <div className="justify-between flex items-center">
63 |         <div className="flex text-sm text-muted-foreground items-center space-x-4">
64 |           <div className="flex items-center">
65 |             <CircleIcon className="mr-1 h-3 w-3 fill-red-400 text-red-400" />
66 |             Nextjs
67 |           </div>
68 |           <div className="flex items-center">
69 |             <CircleIcon className="mr-1 h-3 w-3 fill-green-400 text-green-400" />
70 |             TypeScript
71 |           </div>
72 | 
73 |           <div className="flex items-center">
74 |             <CircleIcon className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
75 |             Tailwind
76 |           </div>
77 |         </div>
78 |         {!featuredImage ? (
79 |           <></>
80 |         ) : (
81 |           <div
82 |             onClick={() => setFeaturedImage(undefined)}
83 |             className="mr-1 text-sm text-red-500 hover:text-red-600 cursor-pointer"
84 |           >
85 |             Remove image
86 |           </div>
87 |         )}
88 |       </div>
89 |     </>
90 |   );
91 | };
92 | 
93 | export default CardBody;
94 | 


--------------------------------------------------------------------------------
/components/sign-in-form.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | import { Button } from "@/components/ui/button";
 7 | import { Input } from "@/components/ui/input";
 8 | import { Label } from "@/components/ui/label";
 9 | import { Icons } from "./ui/icons";
10 | import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
11 | import { Database } from "@/types_db";
12 | import { useState } from "react";
13 | import { useRouter } from "next/navigation";
14 | import { toast } from "react-hot-toast";
15 | 
16 | interface SignInFormProps extends React.HTMLAttributes<HTMLDivElement> {}
17 | 
18 | export function SignInForm({ className, ...props }: SignInFormProps) {
19 |   const [email, setEmail] = useState("");
20 |   const [password, setPassword] = useState("");
21 |   const router = useRouter();
22 |   const supabase = createClientComponentClient<Database>();
23 | 
24 |   const handleSignIn = async () => {
25 |     const { data, error } = await supabase.auth.signInWithPassword({
26 |       email,
27 |       password,
28 |     });
29 |     if (error) {
30 |       toast.error(error.message);
31 |       return;
32 |     }
33 | 
34 |     if (data) {
35 |       toast.success("Signed in!");
36 |       router.push("/");
37 |     }
38 |   };
39 | 
40 |   const [isLoading, setIsLoading] = React.useState<boolean>(false);
41 | 
42 |   async function onSubmit(event: React.SyntheticEvent) {
43 |     event.preventDefault();
44 |     setIsLoading(true);
45 | 
46 |     setTimeout(() => {
47 |       setIsLoading(false);
48 |     }, 3000);
49 |   }
50 | 
51 |   return (
52 |     <div className={cn("grid gap-6", className)} {...props}>
53 |       <form onSubmit={onSubmit}>
54 |         <div className="grid gap-2">
55 |           <div className="grid gap-1">
56 |             <Label className="sr-only" htmlFor="email">
57 |               Email
58 |             </Label>
59 |             <Input
60 |               id="email"
61 |               placeholder="email"
62 |               type="email"
63 |               autoCapitalize="none"
64 |               autoComplete="email"
65 |               autoCorrect="off"
66 |               disabled={isLoading}
67 |               onChange={(e) => setEmail(e.target.value)}
68 |               value={email}
69 |             />
70 |           </div>
71 |           <div className="grid gap-1">
72 |             <Label className="sr-only" htmlFor="password">
73 |               Email
74 |             </Label>
75 |             <Input
76 |               id="password"
77 |               placeholder="password"
78 |               type="password"
79 |               autoCapitalize="none"
80 |               // autoComplete="email"
81 |               autoCorrect="off"
82 |               disabled={isLoading}
83 |               onChange={(e) => setPassword(e.target.value)}
84 |               value={password}
85 |             />
86 |           </div>
87 |           <Button onClick={handleSignIn} disabled={isLoading}>
88 |             {isLoading && (
89 |               <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
90 |             )}
91 |             Sign in
92 |           </Button>
93 |         </div>
94 |       </form>
95 |     </div>
96 |   );
97 | }
98 | 


--------------------------------------------------------------------------------
/components/sign-up-form.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | import { Button } from "@/components/ui/button";
 7 | import { Input } from "@/components/ui/input";
 8 | import { Label } from "@/components/ui/label";
 9 | import { Icons } from "./ui/icons";
10 | import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
11 | import { Database } from "@/types_db";
12 | import { useState } from "react";
13 | import { useRouter } from "next/navigation";
14 | import { toast } from "react-hot-toast";
15 | 
16 | interface SignUpFormProps extends React.HTMLAttributes<HTMLDivElement> {}
17 | 
18 | export function SignUpForm({ className, ...props }: SignUpFormProps) {
19 |   const [email, setEmail] = useState("");
20 |   const [password, setPassword] = useState("");
21 |   const router = useRouter();
22 |   const supabase = createClientComponentClient<Database>();
23 | 
24 |   const handleSignUp = async () => {
25 |     const { data, error } = await supabase.auth.signUp({
26 |       email: email,
27 |       password: password,
28 |     });
29 |     if (error) {
30 |       toast.error(error.message);
31 |       return;
32 |     }
33 | 
34 |     if (data) {
35 |       toast.success("Signed up, but verify your email.");
36 |       router.push("/signin");
37 |     }
38 |   };
39 |   const [isLoading, setIsLoading] = React.useState<boolean>(false);
40 | 
41 |   async function onSubmit(event: React.SyntheticEvent) {
42 |     event.preventDefault();
43 |     setIsLoading(true);
44 | 
45 |     setTimeout(() => {
46 |       setIsLoading(false);
47 |     }, 3000);
48 |   }
49 | 
50 |   return (
51 |     <div className={cn("grid gap-6", className)} {...props}>
52 |       <form onSubmit={onSubmit}>
53 |         <div className="grid gap-2">
54 |           <div className="grid gap-1">
55 |             <Label className="sr-only" htmlFor="email">
56 |               Email
57 |             </Label>
58 |             <Input
59 |               id="email"
60 |               placeholder="email"
61 |               type="email"
62 |               autoCapitalize="none"
63 |               autoComplete="email"
64 |               autoCorrect="off"
65 |               disabled={isLoading}
66 |               onChange={(e) => setEmail(e.target.value)}
67 |               value={email}
68 |             />
69 |           </div>
70 |           <div className="grid gap-1">
71 |             <Label className="sr-only" htmlFor="password">
72 |               Email
73 |             </Label>
74 |             <Input
75 |               id="password"
76 |               placeholder="password"
77 |               type="password"
78 |               autoCapitalize="none"
79 |               // autoComplete="email"
80 |               autoCorrect="off"
81 |               disabled={isLoading}
82 |               onChange={(e) => setPassword(e.target.value)}
83 |               value={password}
84 |             />
85 |           </div>
86 |           <Button onClick={handleSignUp} disabled={isLoading}>
87 |             {isLoading && (
88 |               <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
89 |             )}
90 |             Create account
91 |           </Button>
92 |         </div>
93 |       </form>
94 |     </div>
95 |   );
96 | }
97 | 


--------------------------------------------------------------------------------
/components/modals/upload-modal.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import useUploadModal from "@/hooks/use-upload-modal";
  3 | import Modal from "./modal";
  4 | import { Tab } from "@headlessui/react";
  5 | import GalleryTab from "./gallery-tab";
  6 | import AttachmentDetails from "../inputs/attachment-details";
  7 | import { useEffect, useState } from "react";
  8 | import supabase from "@/utils/supabase";
  9 | import { ImageType } from "@/types";
 10 | const UploadModal = ({ serverImages }: { serverImages: any }) => {
 11 |   const [images, setImages] = useState(serverImages);
 12 |   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
 13 |   const [selectedImage, setSelectedImage] = useState<ImageType>();
 14 | 
 15 |   const testClick = () => {
 16 |     if (featuredImageSetter) {
 17 |       featuredImageSetter("test");
 18 |     }
 19 |   };
 20 | 
 21 |   useEffect(() => {
 22 |     setImages(serverImages);
 23 |   }, [serverImages]);
 24 | 
 25 |   useEffect(() => {
 26 |     const channel = supabase
 27 |       .channel("*")
 28 |       .on(
 29 |         "postgres_changes",
 30 |         { event: "INSERT", schema: "public", table: "images" },
 31 |         (payload) => setImages((images: any) => [payload.new, ...images])
 32 |       )
 33 |       .subscribe();
 34 | 
 35 |     return () => {
 36 |       supabase.removeChannel(channel);
 37 |     };
 38 |   }, [serverImages]);
 39 | 
 40 |   const uploadModal = useUploadModal();
 41 | 
 42 |   const [allValues, setAllValues] = useState({
 43 |     images: null,
 44 |     imageSetter: null,
 45 |   });
 46 | 
 47 |   const featuredImageSetter = useUploadModal((state) => state.imageSetter);
 48 | 
 49 |   let bodyContent =
 50 |     images?.length == 0 ? (
 51 |       <div className="text-center space-y-5 m-5">
 52 |         <h2 className="text-2xl font-bold tracking-tight">Empty!</h2>
 53 |         <p className="text-muted-foreground">
 54 |           Upload some images to get started.
 55 |         </p>
 56 |         <div onClick={testClick}>Click</div>
 57 |       </div>
 58 |     ) : (
 59 |       <Tab.Group
 60 |         key={selectedTabIndex}
 61 |         defaultIndex={selectedTabIndex}
 62 |         onChange={(index) => setSelectedTabIndex(index)}
 63 |         as="div"
 64 |         className="flex max-h-[75vh] pb-3"
 65 |       >
 66 |         <div className="mx-auto mt-1 w-full max-w-2xl sm:block lg:max-w-none overflow-y-auto px-3 pt-3">
 67 |           <Tab.List className="grid grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 gap-2">
 68 |             {images?.map((image: ImageType) => (
 69 |               <GalleryTab key={image.id} image={image} />
 70 |             ))}
 71 |           </Tab.List>
 72 |         </div>
 73 |         <Tab.Panels className="overflow-y-auto w-2/5 hidden md:block">
 74 |           {images?.map((image: ImageType) => (
 75 |             <Tab.Panel key={image.id}>
 76 |               <div>
 77 |                 <AttachmentDetails image={image} />
 78 |               </div>
 79 |             </Tab.Panel>
 80 |           ))}
 81 |         </Tab.Panels>
 82 |       </Tab.Group>
 83 |     );
 84 | 
 85 |   return (
 86 |     <Modal
 87 |       title="Featured image"
 88 |       isOpen={uploadModal.isOpen}
 89 |       onClose={uploadModal.onClose}
 90 |       onUpload={uploadModal.onClose}
 91 |       actionLabel="Submit"
 92 |       body={bodyContent}
 93 |       selectedImage={images[selectedTabIndex]}
 94 |       featuredImageSetter={featuredImageSetter}
 95 |     />
 96 |   );
 97 | };
 98 | 
 99 | export default UploadModal;
100 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
  5 | import * as SelectPrimitive from "@radix-ui/react-select";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | 
  9 | const Select = SelectPrimitive.Root;
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group;
 12 | 
 13 | const SelectValue = SelectPrimitive.Value;
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <CaretSortIcon className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ));
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 34 | 
 35 | const SelectContent = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.Content>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 38 | >(({ className, children, position = "popper", ...props }, ref) => (
 39 |   <SelectPrimitive.Portal>
 40 |     <SelectPrimitive.Content
 41 |       ref={ref}
 42 |       className={cn(
 43 |         "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 44 |         position === "popper" &&
 45 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 46 |         className
 47 |       )}
 48 |       position={position}
 49 |       {...props}
 50 |     >
 51 |       <SelectPrimitive.Viewport
 52 |         className={cn(
 53 |           "p-1",
 54 |           position === "popper" &&
 55 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 56 |         )}
 57 |       >
 58 |         {children}
 59 |       </SelectPrimitive.Viewport>
 60 |     </SelectPrimitive.Content>
 61 |   </SelectPrimitive.Portal>
 62 | ));
 63 | SelectContent.displayName = SelectPrimitive.Content.displayName;
 64 | 
 65 | const SelectLabel = React.forwardRef<
 66 |   React.ElementRef<typeof SelectPrimitive.Label>,
 67 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 68 | >(({ className, ...props }, ref) => (
 69 |   <SelectPrimitive.Label
 70 |     ref={ref}
 71 |     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
 72 |     {...props}
 73 |   />
 74 | ));
 75 | SelectLabel.displayName = SelectPrimitive.Label.displayName;
 76 | 
 77 | const SelectItem = React.forwardRef<
 78 |   React.ElementRef<typeof SelectPrimitive.Item>,
 79 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 80 | >(({ className, children, ...props }, ref) => (
 81 |   <SelectPrimitive.Item
 82 |     ref={ref}
 83 |     className={cn(
 84 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 85 |       className
 86 |     )}
 87 |     {...props}
 88 |   >
 89 |     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
 90 |       <SelectPrimitive.ItemIndicator>
 91 |         <CheckIcon className="h-4 w-4" />
 92 |       </SelectPrimitive.ItemIndicator>
 93 |     </span>
 94 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
 95 |   </SelectPrimitive.Item>
 96 | ));
 97 | SelectItem.displayName = SelectPrimitive.Item.displayName;
 98 | 
 99 | const SelectSeparator = React.forwardRef<
100 |   React.ElementRef<typeof SelectPrimitive.Separator>,
101 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
102 | >(({ className, ...props }, ref) => (
103 |   <SelectPrimitive.Separator
104 |     ref={ref}
105 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
106 |     {...props}
107 |   />
108 | ));
109 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
110 | 
111 | export {
112 |   Select,
113 |   SelectGroup,
114 |   SelectValue,
115 |   SelectTrigger,
116 |   SelectContent,
117 |   SelectLabel,
118 |   SelectItem,
119 |   SelectSeparator,
120 | };
121 | 


--------------------------------------------------------------------------------
/components/inputs/attachment-details.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import Image from "next/image";
  4 | import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
  5 | import { Input } from "../ui/input";
  6 | import { Label } from "../ui/label";
  7 | import { Textarea } from "../ui/textarea";
  8 | import { ImageType } from "@/types";
  9 | import { useSupabaseClient } from "@supabase/auth-helpers-react";
 10 | import toast from "react-hot-toast";
 11 | import { useRouter } from "next/navigation";
 12 | 
 13 | interface AttachmentDetailsProps {
 14 |   image: ImageType;
 15 | }
 16 | 
 17 | const AttachmentDetails: React.FC<AttachmentDetailsProps> = ({ image }) => {
 18 |   const router = useRouter();
 19 |   const supabase = useSupabaseClient();
 20 |   const deleteThisImage = async () => {
 21 |     const { error } = await supabase
 22 |       .from("images")
 23 |       .delete()
 24 |       .eq("image_path", image.image_path);
 25 |     if (error) {
 26 |       toast.error("Failed deleting from DB.");
 27 |       console.log(error.message);
 28 |     } else {
 29 |       toast.success("Image deleted from DB.");
 30 |       // also delete from storage ☝️
 31 |       const { data: storageData, error: storageError } = await supabase.storage
 32 |         .from("images")
 33 |         .remove([image.image_path]);
 34 |       if (storageError) {
 35 |         console.log(storageError);
 36 |         toast.error("Failed deleting from storage bucket.");
 37 |       }
 38 |       if (storageData) {
 39 |         toast.success("Deleted from storage as well.");
 40 |       }
 41 |     }
 42 |     router.refresh();
 43 |   };
 44 | 
 45 |   const updateTitle = async (text: string) => {
 46 |     const { error } = await supabase
 47 |       .from("images")
 48 |       .update({ title: text })
 49 |       .eq("image_path", image.image_path);
 50 |     if (error) {
 51 |       toast.error("Updation failed");
 52 |       console.log(error.message);
 53 |     }
 54 |     router.refresh();
 55 |   };
 56 |   const updateAlt = async (text: string) => {
 57 |     const { error } = await supabase
 58 |       .from("images")
 59 |       .update({ alt: text })
 60 |       .eq("image_path", image.image_path);
 61 |     if (error) {
 62 |       toast.error("Updation failed");
 63 |       console.log(error.message);
 64 |     }
 65 |     router.refresh();
 66 |   };
 67 |   const updateDescription = async (text: string) => {
 68 |     const { error } = await supabase
 69 |       .from("images")
 70 |       .update({ description: text })
 71 |       .eq("image_path", image.image_path);
 72 |     if (error) {
 73 |       toast.error("Updation failed");
 74 |       console.log(error.message);
 75 |     }
 76 |     router.refresh();
 77 |   };
 78 |   const updateCaption = async (text: string) => {
 79 |     const { error } = await supabase
 80 |       .from("images")
 81 |       .update({ caption: text })
 82 |       .eq("image_path", image.image_path);
 83 |     if (error) {
 84 |       toast.error("Updation failed");
 85 |       console.log(error.message);
 86 |     }
 87 |     router.refresh();
 88 |   };
 89 |   return (
 90 |     <Card className="overflow-y-auto">
 91 |       <CardHeader>
 92 |         <CardTitle>Attachment Details</CardTitle>
 93 |         {/* <CardDescription>
 94 |          Attachment details info
 95 |         </CardDescription> */}
 96 |       </CardHeader>
 97 |       <CardContent className="grid gap-6">
 98 |         <div className="space-y-2">
 99 |           <Image
100 |             src={
101 |               process.env.NEXT_PUBLIC_SUPABASE_URL +
102 |               "/storage/v1/object/public/images/" +
103 |               image.image_path
104 |             }
105 |             alt=""
106 |             width={100}
107 |             height={100}
108 |           />
109 |           <p className="text-muted-foreground">{image.image_path}</p>
110 | 
111 |           <div>
112 |             <div
113 |               onClick={deleteThisImage}
114 |               className="text-sm text-red-500 underline underline-offset-4 hover:text-red-600 cursor-pointer"
115 |             >
116 |               Delete this permanently
117 |             </div>
118 |           </div>
119 |         </div>
120 |         <div className="grid gap-2">
121 |           <Label htmlFor="title">Title</Label>
122 |           <Input
123 |             defaultValue={image.title}
124 |             id="title"
125 |             onChange={(e) => updateTitle(e.target.value)}
126 |           />
127 |         </div>
128 |         <div className="grid gap-2">
129 |           <Label htmlFor="alt">Alt Text</Label>
130 |           <Textarea
131 |             defaultValue={image.alt}
132 |             id="alt"
133 |             onChange={(e) => updateAlt(e.target.value)}
134 |           />
135 |         </div>
136 |         <div className="grid gap-2">
137 |           <Label htmlFor="caption">Caption</Label>
138 |           <Textarea
139 |             defaultValue={image.caption}
140 |             id="caption"
141 |             onChange={(e) => updateCaption(e.target.value)}
142 |           />
143 |         </div>
144 |         <div className="grid gap-2">
145 |           <Label htmlFor="description">Description</Label>
146 |           <Textarea
147 |             defaultValue={image.description}
148 |             id="description"
149 |             onChange={(e) => updateDescription(e.target.value)}
150 |           />
151 |         </div>
152 |       </CardContent>
153 |     </Card>
154 |   );
155 | };
156 | 
157 | export default AttachmentDetails;
158 | 


--------------------------------------------------------------------------------
/components/modals/modal.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useCallback, useEffect, useState } from "react";
  4 | import { IoMdClose } from "react-icons/io";
  5 | import { Button } from "../ui/button";
  6 | import { Separator } from "../ui/separator";
  7 | import { useSupabaseClient } from "@supabase/auth-helpers-react";
  8 | import { toast } from "react-hot-toast";
  9 | import { useUser } from "@/hooks/use-user";
 10 | import { v4 as uuidv4 } from "uuid";
 11 | import { ImageType } from "@/types";
 12 | 
 13 | interface ModalProps {
 14 |   isOpen?: boolean;
 15 |   onClose: () => void;
 16 |   onUpload: () => void;
 17 |   title?: string;
 18 |   body?: React.ReactElement;
 19 |   footer?: React.ReactElement;
 20 |   actionLabel: string;
 21 |   disabled?: boolean;
 22 |   secondaryAction?: () => void;
 23 |   secondaryActionLabel?: string;
 24 |   selectedImage?: ImageType;
 25 |   featuredImageSetter?: Function;
 26 | }
 27 | 
 28 | const Modal: React.FC<ModalProps> = ({
 29 |   isOpen,
 30 |   onClose,
 31 |   onUpload,
 32 |   title,
 33 |   body,
 34 |   footer,
 35 |   actionLabel,
 36 |   disabled,
 37 |   secondaryAction,
 38 |   secondaryActionLabel,
 39 |   selectedImage,
 40 |   featuredImageSetter,
 41 | }) => {
 42 |   const supabaseClient = useSupabaseClient();
 43 |   const { user } = useUser();
 44 |   const [showModal, setShowModal] = useState(isOpen);
 45 |   useEffect(() => {
 46 |     setShowModal(isOpen);
 47 |   }, [isOpen]);
 48 | 
 49 |   const handleClose = useCallback(() => {
 50 |     if (disabled) {
 51 |       return;
 52 |     }
 53 | 
 54 |     setShowModal(false);
 55 |     setTimeout(() => {
 56 |       onClose();
 57 |     }, 300);
 58 |   }, [disabled, onClose]);
 59 | 
 60 |   //handle next options etc
 61 |   const handleSecondaryAction = useCallback(() => {
 62 |     if (disabled || !secondaryAction) {
 63 |       return;
 64 |     }
 65 | 
 66 |     secondaryAction();
 67 |   }, [disabled, secondaryAction]);
 68 | 
 69 |   if (!isOpen) {
 70 |     return null;
 71 |   }
 72 | 
 73 |   const uploadImages = async (e: any) => {
 74 |     try {
 75 |       let files = e.target.files;
 76 | 
 77 |       if (!files || !user) {
 78 |         toast.error("File not found");
 79 |         return;
 80 |       }
 81 |       for (const file of files) {
 82 |         const filename = file.name;
 83 |         const tempFileName = filename.split(".", -1);
 84 |         const filenameMinusExt = tempFileName[0];
 85 |         const extension = tempFileName[1];
 86 |         const { data: imageData, error: imageError } =
 87 |           await supabaseClient.storage
 88 |             .from("images")
 89 |             .upload(filenameMinusExt + "-" + uuidv4() + "." + extension, file, {
 90 |               cacheControl: "3600",
 91 |               upsert: false,
 92 |             });
 93 |         if (imageError) {
 94 |           console.log(imageError);
 95 |           return toast.error(filename + " upload unsuccessful");
 96 |         }
 97 |         const { error: dbError } = await supabaseClient.from("images").insert({
 98 |           user_id: user.id,
 99 |           title: filenameMinusExt,
100 |           author: "",
101 |           image_path: imageData.path,
102 |           alt: "",
103 |           caption: "",
104 |           description: "",
105 |         });
106 |         if (dbError) {
107 |           console.log(dbError);
108 |           toast.error(filename + " DB update failed");
109 |         }
110 |         toast.success(filename + " uploaded!");
111 |       }
112 |     } catch (error) {
113 |       toast.error("Something went wrong");
114 |       console.log(error);
115 |     }
116 |   };
117 | 
118 |   const changeFeaturedImage = () => {
119 |     if (featuredImageSetter && selectedImage) {
120 |       featuredImageSetter(selectedImage);
121 |       onClose();
122 |     } else {
123 |       toast.error("No image selected.");
124 |     }
125 |   };
126 | 
127 |   return (
128 |     <>
129 |       <div
130 |         className="
131 |           justify-center 
132 |           items-center 
133 |           flex 
134 |           overflow-x-hidden 
135 |           overflow-y-auto 
136 |           fixed 
137 |           inset-0 
138 |           z-50 
139 |           outline-none 
140 |           focus:outline-none
141 |           bg-neutral-800/70
142 |         "
143 |       >
144 |         <div
145 |           className="
146 |           relative 
147 |           w-full
148 |           md:w-5/6
149 |           my-6
150 |           mx-auto 
151 |           h-auto 
152 |           lg:h-auto
153 |           md:h-auto
154 |           "
155 |         >
156 |           {/*content*/}
157 |           <div
158 |             className={`
159 |             translate
160 |             duration-300
161 |             h-full
162 |             ${showModal ? "translate-y-0" : "translate-y-full"}
163 |             ${showModal ? "opacity-100" : "opacity-0"}
164 |           `}
165 |           >
166 |             <div
167 |               className="
168 |               translate
169 |               h-full
170 |               lg:h-auto
171 |               md:h-auto
172 |               border-0 
173 |               rounded-lg 
174 |               shadow-lg 
175 |               relative 
176 |               flex 
177 |               flex-col 
178 |               w-full 
179 |               bg-card
180 |               outline-none 
181 |               focus:outline-none
182 |             "
183 |             >
184 |               {/*header*/}
185 |               <div
186 |                 className="
187 |                 flex 
188 |                 items-center 
189 |                 p-6
190 |                 rounded-t
191 |                 justify-center
192 |                 relative
193 |                 "
194 |               >
195 |                 <button
196 |                   className="
197 |                     p-1
198 |                     border-0 
199 |                     hover:opacity-70
200 |                     transition
201 |                     absolute
202 |                     right-9
203 |                   "
204 |                   onClick={handleClose}
205 |                 >
206 |                   <IoMdClose size={18} />
207 |                 </button>
208 |                 <div className="text-lg font-semibold">{title}</div>
209 |                 <input
210 |                   className="text-sm absolute
211 |               left-9"
212 |                   type="file"
213 |                   accept="image/*"
214 |                   onChange={uploadImages}
215 |                   multiple
216 |                 />
217 |               </div>
218 |               <Separator />
219 |               {/*body*/}
220 |               <div className="relative flex-auto">{body}</div>
221 |               <Separator />
222 |               {/*footer*/}
223 |               <div className="flex flex-col gap-2 pb-3 px-6 pt-2">
224 |                 <div
225 |                   className="
226 |                     flex 
227 |                     flex-row 
228 |                     items-center 
229 |                     gap-4 
230 |                     w-full
231 |                   "
232 |                 >
233 |                   <Button
234 |                     size="lg"
235 |                     onClick={changeFeaturedImage}
236 |                     className="w-full"
237 |                   >
238 |                     {actionLabel}
239 |                   </Button>
240 |                 </div>
241 |                 {footer}
242 |               </div>
243 |             </div>
244 |           </div>
245 |         </div>
246 |       </div>
247 |     </>
248 |   );
249 | };
250 | 
251 | export default Modal;
252 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
  5 | import {
  6 |   CheckIcon,
  7 |   ChevronRightIcon,
  8 |   DotFilledIcon,
  9 | } from "@radix-ui/react-icons";
 10 | 
 11 | import { cn } from "@/lib/utils";
 12 | 
 13 | const DropdownMenu = DropdownMenuPrimitive.Root;
 14 | 
 15 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 16 | 
 17 | const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 18 | 
 19 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 20 | 
 21 | const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 22 | 
 23 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 24 | 
 25 | const DropdownMenuSubTrigger = React.forwardRef<
 26 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 27 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 28 |     inset?: boolean;
 29 |   }
 30 | >(({ className, inset, children, ...props }, ref) => (
 31 |   <DropdownMenuPrimitive.SubTrigger
 32 |     ref={ref}
 33 |     className={cn(
 34 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 35 |       inset && "pl-8",
 36 |       className
 37 |     )}
 38 |     {...props}
 39 |   >
 40 |     {children}
 41 |     <ChevronRightIcon className="ml-auto h-4 w-4" />
 42 |   </DropdownMenuPrimitive.SubTrigger>
 43 | ));
 44 | DropdownMenuSubTrigger.displayName =
 45 |   DropdownMenuPrimitive.SubTrigger.displayName;
 46 | 
 47 | const DropdownMenuSubContent = React.forwardRef<
 48 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 49 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 50 | >(({ className, ...props }, ref) => (
 51 |   <DropdownMenuPrimitive.SubContent
 52 |     ref={ref}
 53 |     className={cn(
 54 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 55 |       className
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | ));
 60 | DropdownMenuSubContent.displayName =
 61 |   DropdownMenuPrimitive.SubContent.displayName;
 62 | 
 63 | const DropdownMenuContent = React.forwardRef<
 64 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 65 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 66 | >(({ className, sideOffset = 4, ...props }, ref) => (
 67 |   <DropdownMenuPrimitive.Portal>
 68 |     <DropdownMenuPrimitive.Content
 69 |       ref={ref}
 70 |       sideOffset={sideOffset}
 71 |       className={cn(
 72 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
 73 |         "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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 74 |         className
 75 |       )}
 76 |       {...props}
 77 |     />
 78 |   </DropdownMenuPrimitive.Portal>
 79 | ));
 80 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 81 | 
 82 | const DropdownMenuItem = React.forwardRef<
 83 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 84 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 85 |     inset?: boolean;
 86 |   }
 87 | >(({ className, inset, ...props }, ref) => (
 88 |   <DropdownMenuPrimitive.Item
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 92 |       inset && "pl-8",
 93 |       className
 94 |     )}
 95 |     {...props}
 96 |   />
 97 | ));
 98 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 99 | 
100 | const DropdownMenuCheckboxItem = React.forwardRef<
101 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
102 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
103 | >(({ className, children, checked, ...props }, ref) => (
104 |   <DropdownMenuPrimitive.CheckboxItem
105 |     ref={ref}
106 |     className={cn(
107 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
108 |       className
109 |     )}
110 |     checked={checked}
111 |     {...props}
112 |   >
113 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
114 |       <DropdownMenuPrimitive.ItemIndicator>
115 |         <CheckIcon className="h-4 w-4" />
116 |       </DropdownMenuPrimitive.ItemIndicator>
117 |     </span>
118 |     {children}
119 |   </DropdownMenuPrimitive.CheckboxItem>
120 | ));
121 | DropdownMenuCheckboxItem.displayName =
122 |   DropdownMenuPrimitive.CheckboxItem.displayName;
123 | 
124 | const DropdownMenuRadioItem = React.forwardRef<
125 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
126 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
127 | >(({ className, children, ...props }, ref) => (
128 |   <DropdownMenuPrimitive.RadioItem
129 |     ref={ref}
130 |     className={cn(
131 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
132 |       className
133 |     )}
134 |     {...props}
135 |   >
136 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
137 |       <DropdownMenuPrimitive.ItemIndicator>
138 |         <DotFilledIcon className="h-4 w-4 fill-current" />
139 |       </DropdownMenuPrimitive.ItemIndicator>
140 |     </span>
141 |     {children}
142 |   </DropdownMenuPrimitive.RadioItem>
143 | ));
144 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
145 | 
146 | const DropdownMenuLabel = React.forwardRef<
147 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
148 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
149 |     inset?: boolean;
150 |   }
151 | >(({ className, inset, ...props }, ref) => (
152 |   <DropdownMenuPrimitive.Label
153 |     ref={ref}
154 |     className={cn(
155 |       "px-2 py-1.5 text-sm font-semibold",
156 |       inset && "pl-8",
157 |       className
158 |     )}
159 |     {...props}
160 |   />
161 | ));
162 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
163 | 
164 | const DropdownMenuSeparator = React.forwardRef<
165 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
166 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
167 | >(({ className, ...props }, ref) => (
168 |   <DropdownMenuPrimitive.Separator
169 |     ref={ref}
170 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
171 |     {...props}
172 |   />
173 | ));
174 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
175 | 
176 | const DropdownMenuShortcut = ({
177 |   className,
178 |   ...props
179 | }: React.HTMLAttributes<HTMLSpanElement>) => {
180 |   return (
181 |     <span
182 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
183 |       {...props}
184 |     />
185 |   );
186 | };
187 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
188 | 
189 | export {
190 |   DropdownMenu,
191 |   DropdownMenuTrigger,
192 |   DropdownMenuContent,
193 |   DropdownMenuItem,
194 |   DropdownMenuCheckboxItem,
195 |   DropdownMenuRadioItem,
196 |   DropdownMenuLabel,
197 |   DropdownMenuSeparator,
198 |   DropdownMenuShortcut,
199 |   DropdownMenuGroup,
200 |   DropdownMenuPortal,
201 |   DropdownMenuSub,
202 |   DropdownMenuSubContent,
203 |   DropdownMenuSubTrigger,
204 |   DropdownMenuRadioGroup,
205 | };
206 | 


--------------------------------------------------------------------------------