├── lib
    ├── constants.ts
    └── utils.ts
├── .eslintrc.json
├── .env.local.example
├── app
    ├── favicon.ico
    ├── login
    │   └── page.tsx
    ├── layout.tsx
    ├── page.tsx
    └── globals.css
├── next.config.mjs
├── postcss.config.mjs
├── components
    ├── features
    │   ├── LogoutButton.tsx
    │   ├── HomeBody.tsx
    │   ├── OneTapComp.tsx
    │   ├── UserButton
    │   │   ├── LogoutDropdownMenuItem.tsx
    │   │   └── UserButton.tsx
    │   └── AuthenticationDialog.tsx
    └── ui
    │   ├── avatar.tsx
    │   ├── button.tsx
    │   ├── dialog.tsx
    │   └── dropdown-menu.tsx
├── components.json
├── .gitignore
├── public
    ├── vercel.svg
    └── next.svg
├── tsconfig.json
├── archive
    └── middleware.ts
├── package.json
├── middleware.ts
├── README.md
└── tailwind.config.ts


/lib/constants.ts:
--------------------------------------------------------------------------------
1 | export const flowId = "sign-up-or-in";


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


--------------------------------------------------------------------------------
/.env.local.example:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_DESCOPE_PROJECT_ID=<YOUR_DESCOPE_PROJECT_ID>


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/descope-sample-apps/onetap-modal/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


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


--------------------------------------------------------------------------------
/components/features/LogoutButton.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useDescope } from "@descope/nextjs-sdk/client";
 4 | import { Button } from "../ui/button";
 5 | 
 6 | export default function LogoutButton() {
 7 |     const { logout } = useDescope();
 8 | 
 9 |     return <Button onClick={async () => {
10 |         await logout();
11 |         window.location.reload();
12 |     }}>Logout</Button>;
13 | }


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
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 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/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>


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


--------------------------------------------------------------------------------
/app/login/page.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { flowId } from '@/lib/constants';
 4 | import { Descope } from '@descope/nextjs-sdk';
 5 | import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 6 | import { useRouter, useSearchParams } from 'next/navigation';
 7 | import { Suspense } from 'react';
 8 | 
 9 | export default function Login() {
10 |     const router = useRouter();
11 |     return <Suspense fallback={null}><LoginContent router={router} /></Suspense>;
12 |   
13 | }
14 | 
15 | function LoginContent({ router } : { router: AppRouterInstance }) {
16 |     const searchParams = useSearchParams();
17 |     const chatMode = searchParams.get('chatMode');
18 |     return (
19 |         <Descope
20 |             flowId={flowId}
21 |             onSuccess={() => router.push(`/${chatMode ? `?chatMode=${chatMode}` : ''}`)}
22 |         />
23 |     );
24 | }


--------------------------------------------------------------------------------
/components/features/HomeBody.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useSession } from "@descope/nextjs-sdk/client";
 4 | import OneTapComp from "./OneTapComp";
 5 | import LogoutButton from "./LogoutButton";
 6 | import AuthenticationDialog from "./AuthenticationDialog";
 7 | 
 8 | export default function HomeBody() {
 9 |     const { isAuthenticated, isSessionLoading } = useSession();
10 | 
11 |     if (isSessionLoading) {
12 |         return <p>Loading...</p>;
13 |     }
14 | 
15 |     return (
16 |         <main className="flex min-h-screen flex-col items-center justify-between p-24">
17 |             <OneTapComp />
18 |             {isAuthenticated ? <div>
19 |                 <p>Authenticated</p>
20 |                 <LogoutButton />
21 |             </div> : <div>
22 |                 <p>Not Authenticated</p>
23 |                 <AuthenticationDialog />
24 |             </div>}
25 |         </main>
26 |     );
27 | 
28 | }


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter as FontSans } from "next/font/google"
 3 | import "./globals.css";
 4 | import { cn } from "@/lib/utils";
 5 | import { AuthProvider } from "@descope/nextjs-sdk";
 6 | 
 7 | const fontSans = FontSans({
 8 |   subsets: ["latin"],
 9 |   variable: "--font-sans",
10 | })
11 | 
12 | export const metadata: Metadata = {
13 |   title: "Create Next App",
14 |   description: "Generated by create next app",
15 | };
16 | 
17 | export default function RootLayout({
18 |   children,
19 | }: Readonly<{
20 |   children: React.ReactNode;
21 | }>) {
22 |   return (
23 |     <AuthProvider projectId={process.env.NEXT_PUBLIC_DESCOPE_PROJECT_ID!}>
24 |       <html lang="en">
25 |         <body className={cn(
26 |           "min-h-screen bg-background font-sans antialiased",
27 |           fontSans.variable
28 |         )}>{children}</body>
29 |       </html>
30 |     </AuthProvider>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/archive/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from 'next/server';
 2 | import type { NextRequest } from 'next/server';
 3 | 
 4 | export function middleware(request: NextRequest) {
 5 |   const url = request.nextUrl.clone();
 6 | 
 7 |   // Check if the query parameters exist
 8 |   const code = url.searchParams.get('code');
 9 |   const descopeLoginFlow = url.searchParams.get('descope-login-flow');
10 | 
11 |   if (code && descopeLoginFlow) {
12 |     // Retain the original query parameters in the redirect URL
13 |     const newUrl = new URL('/login', request.url);
14 |     newUrl.searchParams.set('code', code);
15 |     newUrl.searchParams.set('descope-login-flow', descopeLoginFlow);
16 |     return NextResponse.redirect(newUrl);
17 |   }
18 | 
19 |   // Continue with the request if the parameters are not present
20 |   return NextResponse.next();
21 | }
22 | 
23 | // Specify which paths should use the middleware
24 | export const config = {
25 |   matcher: '/', // Apply middleware to the root path, adjust as needed
26 | };
27 | 


--------------------------------------------------------------------------------
/components/features/OneTapComp.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useDescope, useSession } from "@descope/nextjs-sdk/client";
 4 | import { useEffect } from "react";
 5 | 
 6 | let oneTapInitialized = false;
 7 | 
 8 | const OneTapComp = () => {
 9 |     const oneTap = true;
10 |     const sdk = useDescope();
11 |     const { isAuthenticated, isSessionLoading } = useSession();
12 | 
13 |     const startOneTap = async () => {
14 |         // eslint-disable-next-line
15 |         if (oneTapInitialized) return;
16 | 
17 |         const res: any = await sdk.fedcm.oneTap('google-implicit');
18 |         console.log("Response: ", res.data);
19 |         oneTapInitialized = true;
20 |     };
21 |     useEffect(() => {
22 |         if (oneTap && !isAuthenticated && !isSessionLoading) {
23 |             startOneTap();
24 |         }
25 |     }, [isAuthenticated, isSessionLoading]);
26 | 
27 |     // Return some JSX here. For example, return null if there's nothing to render:
28 |     return null;
29 | };
30 | 
31 | export default OneTapComp


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs",
 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 |     "@descope/nextjs-sdk": "^0.0.16",
13 |     "@radix-ui/react-avatar": "^1.1.0",
14 |     "@radix-ui/react-dialog": "^1.0.5",
15 |     "@radix-ui/react-dropdown-menu": "^2.1.1",
16 |     "@radix-ui/react-slot": "^1.0.2",
17 |     "class-variance-authority": "^0.7.0",
18 |     "clsx": "^2.1.1",
19 |     "lucide-react": "^0.395.0",
20 |     "next": "14.2.3",
21 |     "react": "^18",
22 |     "react-dom": "^18",
23 |     "tailwind-merge": "^2.3.0",
24 |     "tailwindcss-animate": "^1.0.7"
25 |   },
26 |   "devDependencies": {
27 |     "@types/node": "^20",
28 |     "@types/react": "^18",
29 |     "@types/react-dom": "^18",
30 |     "eslint": "^8",
31 |     "eslint-config-next": "14.2.3",
32 |     "postcss": "^8",
33 |     "tailwindcss": "^3.4.1",
34 |     "typescript": "^5"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/components/features/UserButton/LogoutDropdownMenuItem.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useDescope } from "@descope/nextjs-sdk/client";
 4 | import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 5 | import { LoaderIcon, LogOut } from "lucide-react";
 6 | import { useState } from "react";
 7 | 
 8 | export default function LogoutDropdownMenuItem() {
 9 |     const { logout } = useDescope();
10 |     const [loading, setLoading] = useState(false);
11 | 
12 |     return <DropdownMenuItem className="cursor-pointer" onClick={async () => {
13 |         // setLoading(true);
14 |         await logout();
15 |         window.location.reload();
16 |         // setTimeout(() => setLoading(false), 1000);
17 |     }}>
18 |         {loading ? <>
19 |             <LoaderIcon className="mr-2 h-4 w-4 animate-spin" />
20 |             <span>Logging out...</span>
21 |         </> : <>
22 |             <LogOut className="mr-2 h-4 w-4" />
23 |             <span>Log out</span>
24 |         </>}
25 |         {/* <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut> */}
26 |     </DropdownMenuItem>
27 | }


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import AuthenticationDialog from "@/components/features/AuthenticationDialog";
 3 | import LogoutButton from "@/components/features/LogoutButton";
 4 | import OneTapComp from "@/components/features/OneTapComp";
 5 | import UserButton from "@/components/features/UserButton/UserButton";
 6 | import { AvatarFallback } from "@/components/ui/avatar";
 7 | import { useSession, useUser } from "@descope/nextjs-sdk/client";
 8 | import { session } from "@descope/nextjs-sdk/server";
 9 | import { Avatar, AvatarImage } from "@radix-ui/react-avatar";
10 | 
11 | export default function Home() {
12 |   const sessionRes = session();
13 | 
14 |   return (
15 |     <main className="flex min-h-screen flex-col items-center justify-between p-24">
16 |       <OneTapComp />
17 |       {sessionRes ? <div>
18 |         <p>Authenticated</p>
19 |         <UserButton
20 |           session={sessionRes}
21 |         />
22 |         {/* <LogoutButton /> */}
23 |       </div> : <div>
24 |         <p>Not Authenticated</p>
25 |         <AuthenticationDialog />
26 |       </div>}
27 |     </main>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | // src/middleware.ts
 2 | import { authMiddleware } from '@descope/nextjs-sdk/server'
 3 | 
 4 | export default authMiddleware({
 5 | 	// The Descope project ID to use for authentication
 6 | 	// Defaults to process.env.DESCOPE_PROJECT_ID
 7 | 	projectId: process.env.NEXT_PUBLIC_DESCOPE_PROJECT_ID!,
 8 | 
 9 | 	// The URL to redirect to if the user is not authenticated
10 | 	// Defaults to process.env.SIGN_IN_ROUTE or '/sign-in' if not provided
11 | 	// NOTE: In case it contains query parameters that exist in the original URL, they will override the original query parameters. e.g. if the original URL is /page?param1=1&param2=2 and the redirect URL is /sign-in?param1=3, the final redirect URL will be /sign-in?param1=3&param2=2
12 | 	// redirectUrl: '/login',
13 | 
14 | 	// An array of public routes that do not require authentication
15 | 	// In addition to the default public routes:
16 | 	// - process.env.SIGN_IN_ROUTE or /sign-in if not provided
17 | 	// - process.env.SIGN_UP_ROUTE or /sign-up if not provided
18 | 	publicRoutes: ['/', '/login']
19 | })
20 | 
21 | export const config = {
22 | 	matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)']
23 | }


--------------------------------------------------------------------------------
/components/features/AuthenticationDialog.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useState } from 'react';
 4 | import {
 5 |     Dialog,
 6 |     DialogContent,
 7 |     DialogTrigger,
 8 | } from "@/components/ui/dialog";
 9 | import { Descope } from "@descope/nextjs-sdk";
10 | import { Button } from "@/components/ui/button";
11 | import { flowId } from "@/lib/constants";
12 | import { useSearchParams } from 'next/navigation';
13 | 
14 | export default function AuthenticationDialog() {
15 |     const [isOpen, setIsOpen] = useState(false);
16 | 
17 |     const searchParams = useSearchParams();
18 |     const chatMode = searchParams.get('chatMode');
19 | 
20 |     const getRedirectUrl = () => {
21 |         return `${window.location.origin}/login?${chatMode ? `chatMode=${chatMode}` : ''}`;
22 |     }
23 |     <Descope flowId={flowId} redirectUrl={getRedirectUrl()} />
24 | 
25 |     return (
26 |         <Dialog open={isOpen} onOpenChange={setIsOpen}>
27 |             <DialogTrigger asChild>
28 |                 <Button>Sign up or in</Button>
29 |             </DialogTrigger>
30 |             <DialogContent className="min-h-[700px]">
31 |                 <Descope flowId={flowId} redirectUrl={getRedirectUrl()} />
32 |             </DialogContent>
33 |         </Dialog>
34 |     );
35 | }
36 | 


--------------------------------------------------------------------------------
/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>


--------------------------------------------------------------------------------
/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 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).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, add your Descope project ID (`NEXT_PUBLIC_DESCOPE_PROJECT_ID`) to the `.env.local`. You will also need to configure a Custom Social Provider with Google named "google-implicit".
 6 | 
 7 | Then, install dependencies and run the development server:
 8 | 
 9 | ```bash
10 | npm i
11 | npm run dev
12 | ```
13 | 
14 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
15 | 
16 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
17 | 
18 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
19 | 
20 | ## Learn More
21 | 
22 | To learn more about Next.js, take a look at the following resources:
23 | 
24 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
25 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
26 | 
27 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
28 | 
29 | ## Deploy on Vercel
30 | 
31 | 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.
32 | 
33 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
34 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 |   @tailwind components;
 3 |   @tailwind utilities;
 4 | 
 5 |   @layer base {
 6 |     :root {
 7 |       --background: 0 0% 100%;
 8 |       --foreground: 222.2 84% 4.9%;
 9 | 
10 |       --card: 0 0% 100%;
11 |       --card-foreground: 222.2 84% 4.9%;
12 | 
13 |       --popover: 0 0% 100%;
14 |       --popover-foreground: 222.2 84% 4.9%;
15 | 
16 |       --primary: 222.2 47.4% 11.2%;
17 |       --primary-foreground: 210 40% 98%;
18 | 
19 |       --secondary: 210 40% 96.1%;
20 |       --secondary-foreground: 222.2 47.4% 11.2%;
21 | 
22 |       --muted: 210 40% 96.1%;
23 |       --muted-foreground: 215.4 16.3% 46.9%;
24 | 
25 |       --accent: 210 40% 96.1%;
26 |       --accent-foreground: 222.2 47.4% 11.2%;
27 | 
28 |       --destructive: 0 84.2% 60.2%;
29 |       --destructive-foreground: 210 40% 98%;
30 | 
31 |       --border: 214.3 31.8% 91.4%;
32 |       --input: 214.3 31.8% 91.4%;
33 |       --ring: 222.2 84% 4.9%;
34 | 
35 |       --radius: 0.5rem;
36 |     }
37 | 
38 |     .dark {
39 |       --background: 222.2 84% 4.9%;
40 |       --foreground: 210 40% 98%;
41 | 
42 |       --card: 222.2 84% 4.9%;
43 |       --card-foreground: 210 40% 98%;
44 | 
45 |       --popover: 222.2 84% 4.9%;
46 |       --popover-foreground: 210 40% 98%;
47 | 
48 |       --primary: 210 40% 98%;
49 |       --primary-foreground: 222.2 47.4% 11.2%;
50 | 
51 |       --secondary: 217.2 32.6% 17.5%;
52 |       --secondary-foreground: 210 40% 98%;
53 | 
54 |       --muted: 217.2 32.6% 17.5%;
55 |       --muted-foreground: 215 20.2% 65.1%;
56 | 
57 |       --accent: 217.2 32.6% 17.5%;
58 |       --accent-foreground: 210 40% 98%;
59 | 
60 |       --destructive: 0 62.8% 30.6%;
61 |       --destructive-foreground: 210 40% 98%;
62 | 
63 |       --border: 217.2 32.6% 17.5%;
64 |       --input: 217.2 32.6% 17.5%;
65 |       --ring: 212.7 26.8% 83.9%;
66 |     }
67 |   }
68 | 
69 |   @layer base {
70 |     * {
71 |       @apply border-border;
72 |     }
73 |     body {
74 |       @apply bg-background text-foreground;
75 |     }
76 |   }


--------------------------------------------------------------------------------
/components/features/UserButton/UserButton.tsx:
--------------------------------------------------------------------------------
 1 | import { LogOut } from "lucide-react";
 2 | import { Avatar, AvatarFallback } from "../../ui/avatar";
 3 | import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuShortcut } from "../../ui/dropdown-menu";
 4 | import LogoutDropdownMenuItem from "./LogoutDropdownMenuItem";
 5 | 
 6 | function UserButton({ session }: { session: any }) {
 7 | 
 8 |     const getInitials = (name: string) => {
 9 |         return name
10 |             .split(" ")
11 |             .map((word) => word.charAt(0).toUpperCase())
12 |             .join("");
13 |     };
14 | 
15 |     if (!session) {
16 |         return null;
17 |     }
18 |     const name = session.token.name
19 | 
20 |     return <UserDropdown>
21 |         <div className="flex space-x-2 w-full justify-center items-center hover:bg-slate-100 transition p-2">
22 |             <Avatar>
23 |                 {/* <AvatarImage src="https://i.pravatar.cc/300" alt="avatar" /> */}
24 |                 <AvatarFallback className="font-serif text-sm text-gray-200 bg-slate-800">{getInitials(name)}</AvatarFallback>
25 |             </Avatar>
26 |             <p className="font-serif text-sm">{name}</p>
27 |         </div>
28 |     </UserDropdown>
29 | }
30 | 
31 | export default UserButton
32 | 
33 | 
34 | function UserDropdown({ children }: { children: React.ReactNode }) {
35 |     return <DropdownMenu>
36 |         <DropdownMenuTrigger className="outline-none">
37 |             {children}
38 |         </DropdownMenuTrigger>
39 |         <DropdownMenuContent>
40 |             <DropdownMenuLabel>My Account</DropdownMenuLabel>
41 |             <DropdownMenuSeparator />
42 |             {/* <DropdownMenuItem>Profile</DropdownMenuItem>
43 |             <DropdownMenuItem>Billing</DropdownMenuItem>
44 |             <DropdownMenuItem>Team</DropdownMenuItem>
45 |             <DropdownMenuItem>Subscription</DropdownMenuItem> */}
46 |            <LogoutDropdownMenuItem />
47 |         </DropdownMenuContent>
48 |     </DropdownMenu>
49 | }


--------------------------------------------------------------------------------
/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 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


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


--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { X } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogClose,
116 |   DialogTrigger,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


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


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