├── .eslintrc.json
├── app
    ├── favicon.ico
    ├── (auth)
    │   ├── (routes)
    │   │   ├── sign-in
    │   │   │   └── [[...sign-in]]
    │   │   │   │   └── page.tsx
    │   │   └── sign-up
    │   │   │   └── [[...sign-up]]
    │   │   │       └── page.tsx
    │   └── layout.tsx
    ├── (dashboard)
    │   ├── (routes)
    │   │   ├── video
    │   │   │   ├── constant.ts
    │   │   │   └── page.tsx
    │   │   ├── code
    │   │   │   ├── constant.ts
    │   │   │   └── page.tsx
    │   │   ├── music
    │   │   │   ├── constant.ts
    │   │   │   └── page.tsx
    │   │   ├── settings
    │   │   │   ├── constant.ts
    │   │   │   └── page.tsx
    │   │   ├── conversation
    │   │   │   ├── constant.ts
    │   │   │   └── page.tsx
    │   │   ├── image
    │   │   │   ├── constant.ts
    │   │   │   └── page.tsx
    │   │   └── dashboard
    │   │   │   └── page.tsx
    │   └── layout.tsx
    ├── (landing)
    │   ├── page.tsx
    │   └── layout.tsx
    ├── layout.tsx
    ├── api
    │   ├── music
    │   │   └── route.ts
    │   ├── video
    │   │   └── route.ts
    │   ├── conversation
    │   │   └── route.ts
    │   ├── image
    │   │   └── route.ts
    │   ├── code
    │   │   └── route.ts
    │   ├── stripe
    │   │   └── route.ts
    │   └── webhook
    │   │   └── route.ts
    └── globals.css
├── public
    ├── empty.png
    ├── logo.png
    ├── vercel.svg
    └── next.svg
├── postcss.config.js
├── components
    ├── toaster-provider.tsx
    ├── crisp-provider.tsx
    ├── bot-avatar.tsx
    ├── crisp-chat.tsx
    ├── theme-provider.tsx
    ├── modal-provider.tsx
    ├── user-avatar.tsx
    ├── loader.tsx
    ├── empty.tsx
    ├── navbar.tsx
    ├── ui
    │   ├── label.tsx
    │   ├── separator.tsx
    │   ├── progress.tsx
    │   ├── input.tsx
    │   ├── badge.tsx
    │   ├── avatar.tsx
    │   ├── button.tsx
    │   ├── card.tsx
    │   ├── dialog.tsx
    │   ├── select.tsx
    │   ├── form.tsx
    │   ├── sheet.tsx
    │   ├── command.tsx
    │   └── dropdown-menu.tsx
    ├── heading.tsx
    ├── subscription-button.tsx
    ├── mobile-sidebar.tsx
    ├── landing-navbar.tsx
    ├── free-counter.tsx
    ├── moddle-toggle.tsx
    ├── landing-hero.tsx
    ├── pro-modal.tsx
    └── sidebar.tsx
├── lib
    ├── stripe.ts
    ├── utils.ts
    ├── prismadb.ts
    ├── subscription.ts
    └── api-limit.ts
├── next.config.js
├── hooks
    └── use-pro-modal.tsx
├── components.json
├── middleware.ts
├── .gitignore
├── tailwind.config.ts
├── tsconfig.json
├── prisma
    └── schema.prisma
├── constant.ts
├── README.md
├── package.json
└── tailwind.config.js


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


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruxin23/ai-saas/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/public/empty.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruxin23/ai-saas/HEAD/public/empty.png


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ruxin23/ai-saas/HEAD/public/logo.png


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


--------------------------------------------------------------------------------
/app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsx:
--------------------------------------------------------------------------------
1 | import { SignIn } from "@clerk/nextjs";
2 | 
3 | export default function Page() {
4 |     return <SignIn />;
5 | }


--------------------------------------------------------------------------------
/app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsx:
--------------------------------------------------------------------------------
1 | import { SignUp } from "@clerk/nextjs";
2 | 
3 | export default function Page() {
4 |     return <SignUp />;
5 | }


--------------------------------------------------------------------------------
/components/toaster-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | 
3 | import { Toaster } from "react-hot-toast"
4 | 
5 | export const ToasterProvider = () => {
6 |   return <Toaster />
7 | };


--------------------------------------------------------------------------------
/lib/stripe.ts:
--------------------------------------------------------------------------------
1 | import Stripe from 'stripe'
2 | 
3 | export const stripe = new Stripe(process.env.STRIPE_API_KEY!, {
4 |   apiVersion: '2023-08-16',
5 |     typescript: true,
6 | })


--------------------------------------------------------------------------------
/components/crisp-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | 
3 | import { CrispChat } from "@/components/crisp-chat";
4 | 
5 | export const CrispProvider = () => {
6 |     return <CrispChat />
7 | };
8 | 


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/video/constant.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 | 
3 | export const formSchema = z.object({
4 |   prompt: z.string().min(1, {
5 |     message: "prompt is required"
6 |   }),
7 | });


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/code/constant.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 | 
3 | export const formSchema = z.object({
4 |   prompt: z.string().min(1, {
5 |     message: "Prompt is required.",
6 |   }),
7 | });
8 | 


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/music/constant.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 | 
3 | export const formSchema = z.object({
4 |   prompt: z.string().min(1, {
5 |     message: "Music prompt is required"
6 |   }),
7 | });


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/settings/constant.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 | 
3 | export const formSchema = z.object({
4 |   prompt: z.string().min(1, {
5 |     message: "Prompt is required."
6 |   }),
7 | });
8 | 


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/conversation/constant.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 | 
3 | export const formSchema = z.object({
4 |   prompt: z.string().min(1, {
5 |     message: "Prompt is required.",
6 |   }),
7 | });
8 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |     images: {
 4 |         domains: [
 5 |             "oaidalleapiprodscus.blob.core.windows.net"
 6 |         ]
 7 |     }
 8 | }
 9 | 
10 | module.exports = nextConfig
11 | 


--------------------------------------------------------------------------------
/components/bot-avatar.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarImage } from "@/components/ui/avatar";
2 | 
3 | export const BotAvatar = () => {
4 |     return (
5 |         <Avatar className="h-8 w-8">
6 |             <AvatarImage className="p-1" src="/logo.png" />
7 |         </Avatar>
8 |     );
9 | };


--------------------------------------------------------------------------------
/components/crisp-chat.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import { useEffect } from "react";
 3 | import { Crisp } from "crisp-sdk-web";
 4 | 
 5 | export const CrispChat = () => {
 6 |     useEffect(() => {
 7 |         Crisp.configure("22cd3a04-d375-4031-8827-3b40993cd44a");
 8 |     }, []);
 9 | 
10 |     return null;
11 | };


--------------------------------------------------------------------------------
/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 | 
 8 | export function absoluteUrl(path: string) {
 9 |   return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
10 | }


--------------------------------------------------------------------------------
/lib/prismadb.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from "@prisma/client";
 2 | declare global {
 3 |   var prisma: PrismaClient | undefined;
 4 | }
 5 | 
 6 | export const db = globalThis.prisma || new PrismaClient();
 7 | 
 8 | if (process.env.NODE_ENV !== "production") globalThis.prisma = db;
 9 | 
10 | export default db
11 | 


--------------------------------------------------------------------------------
/app/(auth)/layout.tsx:
--------------------------------------------------------------------------------
 1 | const AuthLayout = ({
 2 |     children
 3 |   }: {
 4 |     children: React.ReactNode;
 5 |   }) => {
 6 |     return ( 
 7 |       <main className="h-full bg-[#111827] flex items-center justify-center">
 8 |         {children}
 9 |       </main>
10 |     );
11 |   }
12 |    
13 |   export default AuthLayout;


--------------------------------------------------------------------------------
/app/(landing)/page.tsx:
--------------------------------------------------------------------------------
 1 | import { LandingNavbar } from "@/components/landing-navbar";
 2 | import { LandingHero } from "@/components/landing-hero";
 3 | 
 4 | const LandingPage = () => {
 5 |   return ( 
 6 |     <div className="h-full ">
 7 |       <LandingNavbar />
 8 |       <LandingHero />
 9 |     </div>
10 |    );
11 | }
12 |  
13 | export default LandingPage;


--------------------------------------------------------------------------------
/hooks/use-pro-modal.tsx:
--------------------------------------------------------------------------------
 1 | import {create} from "zustand"
 2 | 
 3 | interface useProModalStore {
 4 |     isOpen: boolean
 5 |     onOpen: () => void
 6 |     onClose: () => void
 7 | }
 8 | 
 9 | export const useProModal = create<useProModalStore>((set) => ({
10 |     isOpen: false,
11 |     onOpen: () => set({isOpen: true}),
12 |     onClose: () => set({isOpen: false})
13 | }))


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


--------------------------------------------------------------------------------
/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.js",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }


--------------------------------------------------------------------------------
/app/(landing)/layout.tsx:
--------------------------------------------------------------------------------
 1 | const LandingLayout = ({
 2 |     children
 3 |   }: {
 4 |     children: React.ReactNode;
 5 |   }) => {
 6 |     return (
 7 |       <main className="h-full bg-[#111827] overflow-auto">
 8 |         <div className="mx-auto max-w-screen-xl h-full w-full">
 9 |           {children}
10 |         </div>
11 |       </main>
12 |      );
13 |   }
14 |    
15 |   export default LandingLayout;


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


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { authMiddleware } from "@clerk/nextjs";
 2 | 
 3 | // This example protects all routes including api/trpc routes
 4 | // Please edit this to allow other routes to be public as needed.
 5 | // See https://clerk.com/docs/nextjs/middleware for more information about configuring your middleware
 6 | export default authMiddleware({
 7 |   publicRoutes: ["/","/api/webhook"],
 8 | });
 9 | 
10 | export const config = {
11 |   matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
12 | };
13 | 


--------------------------------------------------------------------------------
/.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 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss'
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     './pages/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './components/**/*.{js,ts,jsx,tsx,mdx}',
 7 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       backgroundImage: {
12 |         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
13 |         'gradient-conic':
14 |           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
15 |       },
16 |     },
17 |   },
18 |   plugins: [],
19 | }
20 | export default config
21 | 


--------------------------------------------------------------------------------
/components/user-avatar.tsx:
--------------------------------------------------------------------------------
 1 | import { useUser } from "@clerk/nextjs";
 2 | import {
 3 |     Avatar,
 4 |     AvatarFallback,
 5 |     AvatarImage
 6 | } from "@/components/ui/avatar";
 7 | const UserAvatar = () => {
 8 |     const { user } = useUser();
 9 |     return (
10 |         <Avatar className="w-8 h-8">
11 |             <AvatarImage src={user?.imageUrl} />
12 |             <AvatarFallback>
13 |                 {user?.firstName?.charAt(0)}
14 |                 {user?.lastName?.charAt(0)}
15 |             </AvatarFallback>
16 |         </Avatar>
17 |     );
18 | }
19 | 
20 | export default UserAvatar;


--------------------------------------------------------------------------------
/components/loader.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image"
 2 | 
 3 | export const Loader = () => {
 4 |     return (
 5 |         <div className="h-full flex flex-col gap-y-4 items-center justify-center">
 6 |             <div className="w-10 h-10 relative animate-spin">
 7 |                 <Image
 8 |                     alt="Logo"
 9 |                     src="/logo.png"
10 |                     fill
11 |                 />
12 |             </div>
13 |             <p className="text-sm text-muted-foreground">
14 |                 Genius is thinking...
15 |             </p>
16 |         </div>
17 |     );
18 | };


--------------------------------------------------------------------------------
/components/empty.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | interface EmptyProps {
 4 |     label: string;
 5 | }
 6 | const Empty = ({
 7 |     label
 8 | }: EmptyProps) => {
 9 |     return (
10 |         <div className="flex flex-col items-center justify-center p-20 h-full">
11 |             <div className="relative h-72 w-72">
12 |                 <Image src="/empty.png" alt="Empty" fill />
13 |             </div>
14 |             <p className="text-muted-foreground text-sm text-center">
15 |                 {label}
16 |             </p>
17 |         </div>
18 |     );
19 | }
20 | 
21 | export default Empty;


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


--------------------------------------------------------------------------------
/components/navbar.tsx:
--------------------------------------------------------------------------------
 1 | import { UserButton } from "@clerk/nextjs"
 2 | import MobileSidebar from './mobile-sidebar'
 3 | import { getApiLimitCount } from "@/lib/api-limit"
 4 | import { checkSubscription } from "@/lib/subscription";
 5 | import { ModeToggle } from "./moddle-toggle";
 6 | 
 7 | const Navbar = async () => {
 8 |     const apiLimitCount = await getApiLimitCount()
 9 |     const isPro = await checkSubscription()
10 |     return (
11 |         <div className='flex items-center p-4'>
12 |             <MobileSidebar apiLimitCount={apiLimitCount} isPro={isPro} />
13 |             <div className='flex w-full justify-between'>
14 |                 <ModeToggle />
15 |                 <UserButton afterSignOutUrl="/" />
16 |             </div>
17 |         </div>
18 |     )
19 | }
20 | 
21 | export default Navbar
22 | 
23 | 


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


--------------------------------------------------------------------------------
/lib/subscription.ts:
--------------------------------------------------------------------------------
 1 | import { auth } from "@clerk/nextjs";
 2 | 
 3 | import prismadb from "@/lib/prismadb";
 4 | 
 5 | const DAY_IN_MS = 86_400_000;
 6 | 
 7 | export const checkSubscription = async () => {
 8 |   const { userId } = auth();
 9 | 
10 |   if (!userId) {
11 |     return false;
12 |   }
13 | 
14 |   const userSubscription = await prismadb.userSubscription.findUnique({
15 |     where: {
16 |       userId: userId,
17 |     },
18 |     select: {
19 |       stripeSubscriptionId: true,
20 |       stripeCurrentPeriodEnd: true,
21 |       stripeCustomerId: true,
22 |       stripePriceId: true,
23 |     },
24 |   })
25 | 
26 |   if (!userSubscription) {
27 |     return false;
28 |   }
29 | 
30 |   const isValid =
31 |     userSubscription.stripePriceId &&
32 |     userSubscription.stripeCurrentPeriodEnd?.getTime()! + DAY_IN_MS > Date.now()
33 | 
34 |   return !!isValid;
35 | };
36 | 


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


--------------------------------------------------------------------------------
/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Progress = React.forwardRef<
 9 |   React.ElementRef<typeof ProgressPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
11 | >(({ className, value, ...props }, ref) => (
12 |   <ProgressPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <ProgressPrimitive.Indicator
21 |       className="h-full w-full flex-1 bg-primary transition-all"
22 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
23 |     />
24 |   </ProgressPrimitive.Root>
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 | 
28 | export { Progress }
29 | 


--------------------------------------------------------------------------------
/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-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 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 | 


--------------------------------------------------------------------------------
/app/(dashboard)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Navbar from "@/components/navbar"
 2 | import Sidebar from "@/components/sidebar"
 3 | import { getApiLimitCount } from "@/lib/api-limit"
 4 | import { checkSubscription } from "@/lib/subscription";
 5 | 
 6 | const DashboardLayout = async ({
 7 |     children
 8 | }: {
 9 |     children: React.ReactNode
10 | }) => {
11 |     const isPro = await checkSubscription()
12 |     const apiLimitCount = await getApiLimitCount()
13 |     return (
14 |         <div className="relative h-full">
15 |             <div className="hidden md:flex h-full md:flex-col md:w-72
16 |             md:fixed md:inset-y-0 bg-gray-800">
17 |                 <Sidebar apiLimitCount={apiLimitCount} isPro={isPro} />
18 |             </div>
19 |             <main className="md:pl-72">
20 |                 <Navbar />
21 |                 {children}
22 |             </main>
23 |         </div>
24 |     )
25 | }
26 | 
27 | export default DashboardLayout


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/image/constant.ts:
--------------------------------------------------------------------------------
 1 | import * as z from "zod";
 2 | 
 3 | export const formSchema = z.object({
 4 |   prompt: z.string().min(1, {
 5 |     message: "Photo prompt is required",
 6 |   }),
 7 |   amount: z.string().min(1),
 8 |   resolution: z.string().min(1),
 9 | });
10 | 
11 | export const amountOptions = [
12 |   {
13 |     value: "1",
14 |     label: "1 Photo",
15 |   },
16 |   {
17 |     value: "2",
18 |     label: "2 Photos",
19 |   },
20 |   {
21 |     value: "3",
22 |     label: "3 Photos",
23 |   },
24 |   {
25 |     value: "4",
26 |     label: "4 Photos",
27 |   },
28 |   {
29 |     value: "5",
30 |     label: "5 Photos",
31 |   },
32 | ];
33 | 
34 | export const resolutionOptions = [
35 |   {
36 |     value: "256x256",
37 |     label: "256x256",
38 |   },
39 |   {
40 |     value: "512x512",
41 |     label: "512x512",
42 |   },
43 |   {
44 |     value: "1024x1024",
45 |     label: "1024x1024",
46 |   },
47 | ];
48 | 


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | // This is your Prisma schema file,
 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
 3 | 
 4 | datasource db {
 5 |   provider     = "mysql"
 6 |   url          = env("DATABASE_URL")
 7 |   relationMode = "prisma"
 8 | }
 9 | 
10 | generator client {
11 |   provider = "prisma-client-js"
12 | }
13 | 
14 | model UserApiLimit {
15 |   id        String   @id @default(cuid())
16 |   userId    String   @unique
17 |   count     Int      @default(0)
18 |   createdAt DateTime @default(now())
19 |   updatedAt DateTime @updatedAt
20 | }
21 | 
22 | model UserSubscription {
23 |   id                     String    @id @default(cuid())
24 |   userId                 String    @unique
25 |   stripeCustomerId       String?   @unique @map(name: "stripe_customer_id")
26 |   stripeSubscriptionId   String?   @unique @map(name: "stripe_subscription_id")
27 |   stripePriceId          String?   @map(name: "stripe_price_id")
28 |   stripeCurrentPeriodEnd DateTime? @map(name: "stripe_current_period_end")
29 | }
30 | 


--------------------------------------------------------------------------------
/components/heading.tsx:
--------------------------------------------------------------------------------
 1 | import { LucideIcon } from "lucide-react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | interface HeadingProps {
 6 |     title: string;
 7 |     description: string;
 8 |     icon: LucideIcon;
 9 |     iconColor?: string;
10 |     bgColor?: string;
11 | }
12 | 
13 | export const Heading = ({
14 |     title,
15 |     description,
16 |     icon: Icon,
17 |     iconColor,
18 |     bgColor,
19 | }: HeadingProps) => {
20 |     return (
21 |         <>
22 |             <div className="px-4 lg:px-8 flex items-center gap-x-3 mb-8">
23 |                 <div className={cn("p-2 w-fit rounded-md", bgColor)}>
24 |                     <Icon className={cn("w-10 h-10", iconColor)} />
25 |                 </div>
26 |                 <div>
27 |                     <h2 className="text-3xl font-bold">{title}</h2>
28 |                     <p className="text-sm text-muted-foreground">
29 |                         {description}
30 |                     </p>
31 |                 </div>
32 |             </div>
33 |         </>
34 |     );
35 | };


--------------------------------------------------------------------------------
/constant.ts:
--------------------------------------------------------------------------------
 1 | import { Code, ImageIcon, MessageSquare, Music, VideoIcon } from "lucide-react";
 2 | 
 3 | export const MAX_FREE_COUNTS = 5;
 4 | 
 5 | export const tools = [
 6 |   {
 7 |     label: "Conversation",
 8 |     icon: MessageSquare,
 9 |     href: "/conversation",
10 |     color: "text-violet-500",
11 |     bgColor: "bg-violet-500/10",
12 |   },
13 |   {
14 |     label: "Music Generation",
15 |     icon: Music,
16 |     href: "/music",
17 |     color: "text-emerald-500",
18 |     bgColor: "bg-emerald-500/10",
19 |   },
20 |   {
21 |     label: "Image Generation",
22 |     icon: ImageIcon,
23 |     color: "text-pink-700",
24 |     bgColor: "bg-pink-700/10",
25 |     href: "/image",
26 |   },
27 |   {
28 |     label: "Video Generation",
29 |     icon: VideoIcon,
30 |     color: "text-orange-700",
31 |     bgColor: "bg-orange-700/10",
32 |     href: "/video",
33 |   },
34 |   {
35 |     label: "Code Generation",
36 |     icon: Code,
37 |     color: "text-green-700",
38 |     bgColor: "bg-green-700/10",
39 |     href: "/code",
40 |   },
41 | ];
42 | 


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/settings/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Settings } from "lucide-react";
 2 | 
 3 | import { Heading } from "@/components/heading";
 4 | import { SubscriptionButton } from "@/components/subscription-button";
 5 | import { checkSubscription } from "@/lib/subscription";
 6 | 
 7 | const SettingsPage = async () => {
 8 |     const isPro = await checkSubscription();
 9 | 
10 |     return (
11 |         <div>
12 |             <Heading
13 |                 title="Settings"
14 |                 description="Manage account settings."
15 |                 icon={Settings}
16 |                 iconColor="text-gray-700"
17 |                 bgColor="bg-gray-700/10"
18 |             />
19 |             <div className="px-4 lg:px-8 space-y-4">
20 |                 <div className="text-muted-foreground text-sm">
21 |                     {isPro ? "You are currently on a Pro plan." : "You are currently on a free plan."}
22 |                 </div>
23 |                 <SubscriptionButton isPro={isPro} />
24 |             </div>
25 |         </div>
26 |     );
27 | }
28 | 
29 | export default SettingsPage;
30 | 
31 | 


--------------------------------------------------------------------------------
/components/subscription-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import axios from "axios";
 4 | import { useState } from "react";
 5 | import { Zap } from "lucide-react";
 6 | import { toast } from "react-hot-toast";
 7 | 
 8 | import { Button } from "@/components/ui/button";
 9 | 
10 | export const SubscriptionButton = ({
11 |     isPro = false
12 | }: {
13 |     isPro: boolean;
14 | }) => {
15 |     const [loading, setLoading] = useState(false);
16 | 
17 |     const onClick = async () => {
18 |         try {
19 |             setLoading(true);
20 | 
21 |             const response = await axios.get("/api/stripe");
22 | 
23 |             window.location.href = response.data.url;
24 |         } catch (error) {
25 |             toast.error("Something went wrong");
26 |         } finally {
27 |             setLoading(false);
28 |         }
29 |     };
30 | 
31 |     return (
32 |         <Button variant={isPro ? "default" : "premium"} disabled={loading} onClick={onClick} >
33 |             {isPro ? "Manage Subscription" : "Upgrade"}
34 |             {!isPro && <Zap className="w-4 h-4 ml-2 fill-white" />}
35 |         </Button>
36 |     )
37 | };
38 | 


--------------------------------------------------------------------------------
/components/mobile-sidebar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { Menu } from "lucide-react";
 3 | import { Button } from "@/components/ui/button";
 4 | import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 5 | import Sidebar from "./sidebar";
 6 | import { useEffect, useState } from "react";
 7 | 
 8 | interface MobileSidebarProps {
 9 |     apiLimitCount: number
10 |     isPro: boolean
11 | }
12 | const MobileSidebar = ({ apiLimitCount, isPro = false }: MobileSidebarProps) => {
13 |     const [isMounted, setIsMounted] = useState(false)
14 |     useEffect(() => {
15 |         setIsMounted(true)
16 |     }, [])
17 |     if (!isMounted) return null
18 |     return (
19 |         <Sheet>
20 |             <SheetTrigger>
21 |                 <Button variant="ghost" size="icon" className="md:hidden">
22 |                     <Menu />
23 |                 </Button>
24 |             </SheetTrigger>
25 |             <SheetContent side="left" className="p-0">
26 |                 <Sidebar apiLimitCount={apiLimitCount} isPro={isPro} />
27 |             </SheetContent>
28 |         </Sheet>
29 | 
30 |     );
31 | }
32 | 
33 | export default MobileSidebar;


--------------------------------------------------------------------------------
/components/landing-navbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Montserrat } from "next/font/google";
 4 | import Image from "next/image"
 5 | import Link from "next/link"
 6 | import { useAuth } from "@clerk/nextjs";
 7 | 
 8 | import { cn } from "@/lib/utils";
 9 | import { Button } from "@/components/ui/button";
10 | 
11 | const font = Montserrat({ weight: '600', subsets: ['latin'] });
12 | 
13 | export const LandingNavbar = () => {
14 |   const { isSignedIn } = useAuth();
15 | 
16 |   return (
17 |     <nav className="p-4 bg-transparent flex items-center justify-between">
18 |       <Link href="/" className="flex items-center">
19 |         <div className="relative h-8 w-8 mr-4">
20 |           <Image fill alt="Logo" src="/logo.png" />
21 |         </div>
22 |         <h1 className={cn("text-2xl font-bold text-white", font.className)}>
23 |           Genius
24 |         </h1>
25 |       </Link>
26 |       <div className="flex items-center gap-x-2">
27 |         <Link href={isSignedIn ? "/dashboard" : "/sign-up"}>
28 |           <Button variant="outline" className="rounded-full">
29 |             Get Started
30 |           </Button>
31 |         </Link>
32 |       </div>
33 |     </nav>
34 |   )
35 | }


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import './globals.css'
 2 | import type { Metadata } from 'next'
 3 | import { Inter } from 'next/font/google'
 4 | import { ClerkProvider } from '@clerk/nextjs'
 5 | import { ToasterProvider } from '@/components/toaster-provider'
 6 | import { ModalProvider } from '@/components/modal-provider'
 7 | import { CrispProvider } from '@/components/crisp-provider'
 8 | import { ThemeProvider } from '@/components/theme-provider'
 9 | const inter = Inter({ subsets: ['latin'] })
10 | 
11 | export const metadata: Metadata = {
12 |   title: 'Genius',
13 |   description: 'Genius is a platform for building AI-powered apps.',
14 | }
15 | 
16 | export default function RootLayout({
17 |   children,
18 | }: {
19 |   children: React.ReactNode
20 | }) {
21 |   return (
22 |     <ClerkProvider>
23 |       <html lang="en">
24 |         <CrispProvider />
25 |         <body className={inter.className}>
26 |           <ThemeProvider
27 |             attribute='class'
28 |             defaultTheme='dark'
29 |             enableSystem={true}
30 |             storageKey='ai-saas'>
31 |             <ToasterProvider />
32 |             <ModalProvider />
33 | 
34 |             {children}
35 |           </ThemeProvider>
36 |         </body>
37 |       </html>
38 |     </ClerkProvider>
39 |   )
40 | }
41 | 


--------------------------------------------------------------------------------
/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/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |         premium: "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-primary-foreground border-0"
19 |       },
20 |     },
21 |     defaultVariants: {
22 |       variant: "default",
23 |     },
24 |   }
25 | )
26 | 
27 | export interface BadgeProps
28 |   extends React.HTMLAttributes<HTMLDivElement>,
29 |     VariantProps<typeof badgeVariants> {}
30 | 
31 | function Badge({ className, variant, ...props }: BadgeProps) {
32 |   return (
33 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
34 |   )
35 | }
36 | 
37 | export { Badge, badgeVariants }
38 | 


--------------------------------------------------------------------------------
/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, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | 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.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 | 


--------------------------------------------------------------------------------
/lib/api-limit.ts:
--------------------------------------------------------------------------------
 1 | import { auth } from "@clerk/nextjs";
 2 | 
 3 | import prismadb from "@/lib/prismadb";
 4 | import { MAX_FREE_COUNTS } from "@/constant";
 5 | 
 6 | export const incrementApiLimit = async () => {
 7 |   const { userId } = auth();
 8 | 
 9 |   if (!userId) {
10 |     return;
11 |   }
12 | 
13 |   const userApiLimit = await prismadb.userApiLimit.findUnique({
14 |     where: { userId: userId },
15 |   });
16 | 
17 |   if (userApiLimit) {
18 |     await prismadb.userApiLimit.update({
19 |       where: { userId: userId },
20 |       data: { count: userApiLimit.count + 1 },
21 |     });
22 |   } else {
23 |     await prismadb.userApiLimit.create({
24 |       data: { userId: userId, count: 1 },
25 |     });
26 |   }
27 | };
28 | 
29 | export const checkApiLimit = async () => {
30 |   const { userId } = auth();
31 | 
32 |   if (!userId) {
33 |     return false;
34 |   }
35 | 
36 |   const userApiLimit = await prismadb.userApiLimit.findUnique({
37 |     where: { userId: userId },
38 |   });
39 | 
40 |   if (!userApiLimit || userApiLimit.count < MAX_FREE_COUNTS) {
41 |     return true;
42 |   } else {
43 |     return false;
44 |   }
45 | };
46 | 
47 | export const getApiLimitCount = async () => {
48 |   const { userId } = auth();
49 | 
50 |   if (!userId) {
51 |     return 0;
52 |   }
53 | 
54 |   const userApiLimit = await prismadb.userApiLimit.findUnique({
55 |     where: {
56 |       userId
57 |     }
58 |   });
59 | 
60 |   if (!userApiLimit) {
61 |     return 0;
62 |   }
63 | 
64 |   return userApiLimit.count;
65 | };


--------------------------------------------------------------------------------
/components/free-counter.tsx:
--------------------------------------------------------------------------------
 1 | import { Zap } from "lucide-react";
 2 | import { useEffect, useState } from "react";
 3 | 
 4 | import { MAX_FREE_COUNTS } from "@/constant";
 5 | import { Card, CardContent } from "@/components/ui/card";
 6 | import { Button } from "@/components/ui/button";
 7 | import { Progress } from "@/components/ui/progress";
 8 | import { useProModal } from "@/hooks/use-pro-modal";
 9 | 
10 | export const FreeCounter = ({
11 |   isPro = false,
12 |   apiLimitCount = 0,
13 | }: {
14 |   isPro: boolean,
15 |   apiLimitCount: number
16 | }) => {
17 |   const [mounted, setMounted] = useState(false);
18 |   const proModal = useProModal();
19 | 
20 |   useEffect(() => {
21 |     setMounted(true);
22 |   }, []);
23 | 
24 |   if (!mounted) {
25 |     return null;
26 |   }
27 | 
28 | 
29 |   if (isPro) {
30 |     return null;
31 |   }
32 | 
33 |   return (
34 |     <div className="px-3">
35 |       <Card className="bg-white/10 border-0">
36 |         <CardContent className="py-6">
37 |           <div className="text-center text-sm text-white mb-4 space-y-2">
38 |             <p>
39 |               {apiLimitCount} / {MAX_FREE_COUNTS} Free Generations
40 |             </p>
41 |             <Progress className="h-3" value={(apiLimitCount / MAX_FREE_COUNTS) * 100} />
42 |           </div>
43 |           <Button onClick={proModal.onOpen} variant="premium" className="w-full">
44 |             Upgrade
45 |             <Zap className="w-4 h-4 ml-2 fill-white" />
46 |           </Button>
47 |         </CardContent>
48 |       </Card>
49 |     </div>
50 |   )
51 | }


--------------------------------------------------------------------------------
/app/api/music/route.ts:
--------------------------------------------------------------------------------
 1 | import Replicate from "replicate";
 2 | import { auth } from "@clerk/nextjs";
 3 | import { NextResponse } from "next/server";
 4 | 
 5 | import { incrementApiLimit, checkApiLimit } from "@/lib/api-limit";
 6 | import { checkSubscription } from "@/lib/subscription";
 7 | 
 8 | const replicate = new Replicate({
 9 |   auth: process.env.REPLICATE_API_TOKEN!,
10 | });
11 | 
12 | export async function POST(
13 |   req: Request
14 | ) {
15 |   try {
16 |     const { userId } = auth();
17 |     const body = await req.json();
18 |     const { prompt  } = body;
19 | 
20 |     if (!userId) {
21 |       return new NextResponse("Unauthorized", { status: 401 });
22 |     }
23 | 
24 |     if (!prompt) {
25 |       return new NextResponse("Prompt is required", { status: 400 });
26 |     }
27 | 
28 |     const freeTrial = await checkApiLimit();
29 |     const isPro = await checkSubscription();
30 | 
31 |     if (!freeTrial && !isPro) {
32 |       return new NextResponse("Free trial has expired. Please upgrade to pro.", { status: 403 });
33 |     }
34 | 
35 |     const response = await replicate.run(
36 |       "riffusion/riffusion:8cf61ea6c56afd61d8f5b9ffd14d7c216c0a93844ce2d82ac1c9ecc9c7f24e05",
37 |       {
38 |         input: {
39 |           prompt_a: prompt
40 |         }
41 |       }
42 |     );
43 | 
44 |     if (!isPro) {
45 |       await incrementApiLimit();
46 |     }
47 | 
48 |     return NextResponse.json(response);
49 |   } catch (error) {
50 |     console.log('[MUSIC_ERROR]', error);
51 |     return new NextResponse("Internal Error", { status: 500 });
52 |   }
53 | };
54 | 


--------------------------------------------------------------------------------
/app/api/video/route.ts:
--------------------------------------------------------------------------------
 1 | import Replicate from "replicate";
 2 | import { auth } from "@clerk/nextjs";
 3 | import { NextResponse } from "next/server";
 4 | 
 5 | import { incrementApiLimit, checkApiLimit } from "@/lib/api-limit";
 6 | import { checkSubscription } from "@/lib/subscription";
 7 | 
 8 | const replicate = new Replicate({
 9 |   auth: process.env.REPLICATE_API_TOKEN!,
10 | });
11 | 
12 | export async function POST(
13 |   req: Request
14 | ) {
15 |   try {
16 |     const { userId } = auth();
17 |     const body = await req.json();
18 |     const { prompt  } = body;
19 | 
20 |     if (!userId) {
21 |       return new NextResponse("Unauthorized", { status: 401 });
22 |     }
23 | 
24 |     if (!prompt) {
25 |       return new NextResponse("Prompt is required", { status: 400 });
26 |     }
27 | 
28 |     const freeTrial = await checkApiLimit();
29 |     const isPro = await checkSubscription();
30 | 
31 |     if (!freeTrial && !isPro) {
32 |       return new NextResponse("Free trial has expired. Please upgrade to pro.", { status: 403 });
33 |     }
34 | 
35 |     const response = await replicate.run(
36 |       "anotherjesse/zeroscope-v2-xl:71996d331e8ede8ef7bd76eba9fae076d31792e4ddf4ad057779b443d6aea62f",
37 |       {
38 |         input: {
39 |           prompt,
40 |         }
41 |       }
42 |     );
43 | 
44 |     if (!isPro) {
45 |       await incrementApiLimit();
46 |     }
47 | 
48 |     return NextResponse.json(response);
49 |   } catch (error) {
50 |     console.log('[VIDEO_ERROR]', error);
51 |     return new NextResponse("Internal Error", { status: 500 });
52 |   }
53 | };
54 | 


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


--------------------------------------------------------------------------------
/components/moddle-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { MoonIcon, SunIcon } 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 className="bg-transparent border-0" variant="outline" size="icon">
22 |                     <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
23 |                     <MoonIcon 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/landing-hero.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import TypewriterComponent from "typewriter-effect";
 4 | import Link from "next/link";
 5 | import { useAuth } from "@clerk/nextjs";
 6 | 
 7 | import { Button } from "@/components/ui/button";
 8 | 
 9 | export const LandingHero = () => {
10 |   const { isSignedIn } = useAuth();
11 | 
12 |   return (
13 |     <div className="text-white font-bold py-36 text-center space-y-5">
14 |       <div className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl space-y-5 font-extrabold">
15 |         <h1>The Best AI Tool for</h1>
16 |         <div className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
17 |           <TypewriterComponent
18 |             options={{
19 |               strings: [
20 |                 "Chatbot.",
21 |                 "Photo Generation.",
22 |                 "Blog Writing.",
23 |                 "Mail Writing."
24 |               ],
25 |               autoStart: true,
26 |               loop: true,
27 |             }}
28 |           />
29 |         </div>
30 |       </div>
31 |       <div className="text-sm md:text-xl font-light text-zinc-400">
32 |         Create content using AI 10x faster.
33 |       </div>
34 |       <div>
35 |         <Link href={isSignedIn ? "/dashboard" : "/sign-up"}>
36 |           <Button variant="premium" className="md:text-lg p-4 md:p-6 rounded-full font-semibold">
37 |             Start Generating For Free
38 |           </Button>
39 |         </Link>
40 |       </div>
41 |       <div className="text-zinc-400 text-xs md:text-sm font-normal">
42 |         No credit card required.
43 |       </div>
44 |     </div>
45 |   );
46 | };


--------------------------------------------------------------------------------
/app/api/conversation/route.ts:
--------------------------------------------------------------------------------
 1 | import { auth } from "@clerk/nextjs";
 2 | import { NextResponse } from "next/server";
 3 | import { Configuration, OpenAIApi } from "openai";
 4 | 
 5 | import { checkSubscription } from "@/lib/subscription";
 6 | import { incrementApiLimit, checkApiLimit } from "@/lib/api-limit";
 7 | 
 8 | const configuration = new Configuration({
 9 |   apiKey: process.env.OPENAI_API_KEY,
10 | });
11 | 
12 | const openai = new OpenAIApi(configuration);
13 | 
14 | export async function POST(
15 |   req: Request
16 | ) {
17 |   try {
18 |     const { userId } = auth();
19 |     const body = await req.json();
20 |     const { messages  } = body;
21 | 
22 |     if (!userId) {
23 |       return new NextResponse("Unauthorized", { status: 401 });
24 |     }
25 | 
26 |     if (!configuration.apiKey) {
27 |       return new NextResponse("OpenAI API Key not configured.", { status: 500 });
28 |     }
29 | 
30 |     if (!messages) {
31 |       return new NextResponse("Messages are required", { status: 400 });
32 |     }
33 | 
34 |     const freeTrial = await checkApiLimit();
35 |     const isPro = await checkSubscription();
36 | 
37 |     if (!freeTrial && !isPro) {
38 |       return new NextResponse("Free trial has expired. Please upgrade to pro.", { status: 403 });
39 |     }
40 | 
41 |     const response = await openai.createChatCompletion({
42 |       model: "gpt-3.5-turbo",
43 |       messages
44 |     });
45 | 
46 |     if (!isPro) {
47 |       await incrementApiLimit();
48 |     }
49 | 
50 |     return NextResponse.json(response.data.choices[0].message);
51 |   } catch (error) {
52 |     console.log('[CONVERSATION_ERROR]', error);
53 |     return new NextResponse("Internal Error", { status: 500 });
54 |   }
55 | };
56 | 


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/dashboard/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { ArrowRight } from "lucide-react";
 3 | import { tools } from "@/constant";
 4 | import { Card } from "@/components/ui/card";
 5 | import { cn } from "@/lib/utils";
 6 | import { useRouter } from "next/navigation";
 7 | export default function Dashboard() {
 8 |     const router = useRouter()
 9 |     return (
10 |         <div>
11 |             <div className="mb-8 space-y-4">
12 |                 <h2 className="text-2xl md:text-4xl font-bold text-center">
13 |                     Explore the power of AI
14 |                 </h2>
15 |                 <p className="text-muted-foreground font-light text-sm md:text-lg text-center">
16 |                     Chat with the smartest AI - Experience the power of AI
17 |                 </p>
18 |             </div>
19 |             <div className="px-4 md:px-20 lg:px-32 space-y-4">
20 |                 {tools.map((tool) => (
21 |                     <Card onClick={() => router.push(tool.href)} key={tool.href} className="p-4 border-black/5 flex items-center justify-between hover:shadow-md transition cursor-pointer">
22 |                         <div className="flex items-center gap-x-4">
23 |                             <div className={cn("p-2 w-fit rounded-md", tool.bgColor)}>
24 |                                 <tool.icon className={cn("w-8 h-8", tool.color)} />
25 |                             </div>
26 |                             <div className="font-semibold">
27 |                                 {tool.label}
28 |                             </div>
29 |                         </div>
30 |                         <ArrowRight className="w-5 h-5" />
31 |                     </Card>
32 |                 ))}
33 |             </div>
34 |         </div>
35 | 
36 |     )
37 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ai-saas",
 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 |     "postinstall": "prisma generate"
11 |   },
12 |   "dependencies": {
13 |     "@clerk/nextjs": "^4.24.1",
14 |     "@hookform/resolvers": "^3.3.1",
15 |     "@prisma/client": "^5.4.1",
16 |     "@radix-ui/react-avatar": "^1.0.4",
17 |     "@radix-ui/react-dialog": "^1.0.4",
18 |     "@radix-ui/react-dropdown-menu": "^2.0.6",
19 |     "@radix-ui/react-label": "^2.0.2",
20 |     "@radix-ui/react-progress": "^1.0.3",
21 |     "@radix-ui/react-select": "^2.0.0",
22 |     "@radix-ui/react-separator": "^1.0.3",
23 |     "@radix-ui/react-slot": "^1.0.2",
24 |     "@types/node": "20.6.5",
25 |     "@types/react": "18.2.22",
26 |     "@types/react-dom": "18.2.7",
27 |     "autoprefixer": "10.4.16",
28 |     "axios": "^1.5.1",
29 |     "class-variance-authority": "^0.7.0",
30 |     "clsx": "^2.0.0",
31 |     "cmdk": "^0.2.0",
32 |     "crisp-sdk-web": "^1.0.21",
33 |     "eslint": "8.50.0",
34 |     "eslint-config-next": "13.5.2",
35 |     "lucide-react": "^0.279.0",
36 |     "next": "13.5.2",
37 |     "next-themes": "^0.2.1",
38 |     "openai": "3.3.0",
39 |     "postcss": "8.4.30",
40 |     "prisma": "^5.4.1",
41 |     "react": "18.2.0",
42 |     "react-dom": "18.2.0",
43 |     "react-hook-form": "^7.46.2",
44 |     "react-hot-toast": "^2.4.1",
45 |     "react-markdown": "^8.0.7",
46 |     "replicate": "^0.18.1",
47 |     "stripe": "^13.8.0",
48 |     "tailwind-merge": "^1.14.0",
49 |     "tailwindcss": "3.3.3",
50 |     "tailwindcss-animate": "^1.0.7",
51 |     "typescript": "5.2.2",
52 |     "typewriter-effect": "^2.21.0",
53 |     "zod": "^3.22.2",
54 |     "zustand": "^4.4.1"
55 |   }
56 | }
57 | 


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


--------------------------------------------------------------------------------
/app/api/image/route.ts:
--------------------------------------------------------------------------------
 1 | import { auth } from "@clerk/nextjs";
 2 | import { NextResponse } from "next/server";
 3 | import { Configuration, OpenAIApi } from "openai";
 4 | 
 5 | import { checkSubscription } from "@/lib/subscription";
 6 | import { incrementApiLimit, checkApiLimit } from "@/lib/api-limit";
 7 | 
 8 | const configuration = new Configuration({
 9 |   apiKey: process.env.OPENAI_API_KEY,
10 | });
11 | 
12 | const openai = new OpenAIApi(configuration);
13 | 
14 | export async function POST(
15 |   req: Request
16 | ) {
17 |   try {
18 |     const { userId } = auth();
19 |     const body = await req.json();
20 |     const { prompt, amount = 1, resolution = "512x512" } = body;
21 | 
22 |     if (!userId) {
23 |       return new NextResponse("Unauthorized", { status: 401 });
24 |     }
25 | 
26 |     if (!configuration.apiKey) {
27 |       return new NextResponse("OpenAI API Key not configured.", { status: 500 });
28 |     }
29 | 
30 |     if (!prompt) {
31 |       return new NextResponse("Prompt is required", { status: 400 });
32 |     }
33 | 
34 |     if (!amount) {
35 |       return new NextResponse("Amount is required", { status: 400 });
36 |     }
37 | 
38 |     if (!resolution) {
39 |       return new NextResponse("Resolution is required", { status: 400 });
40 |     }
41 | 
42 |     const freeTrial = await checkApiLimit();
43 |     const isPro = await checkSubscription();
44 | 
45 |     if (!freeTrial && !isPro) {
46 |       return new NextResponse("Free trial has expired. Please upgrade to pro.", { status: 403 });
47 |     }
48 | 
49 |     const response = await openai.createImage({
50 |       prompt,
51 |       n: parseInt(amount, 10),
52 |       size: resolution,
53 |     });
54 | 
55 |     if (!isPro) {
56 |       await incrementApiLimit();
57 |     }
58 | 
59 |     return NextResponse.json(response.data.data);
60 |   } catch (error) {
61 |     console.log('[IMAGE_ERROR]', error);
62 |     return new NextResponse("Internal Error", { status: 500 });
63 |   }
64 | };
65 | 


--------------------------------------------------------------------------------
/app/api/code/route.ts:
--------------------------------------------------------------------------------
 1 | import { auth } from "@clerk/nextjs";
 2 | import { NextResponse } from "next/server";
 3 | import { ChatCompletionRequestMessage, Configuration, OpenAIApi } from "openai";
 4 | 
 5 | import { checkSubscription } from "@/lib/subscription";
 6 | import { incrementApiLimit, checkApiLimit } from "@/lib/api-limit";
 7 | 
 8 | const configuration = new Configuration({
 9 |   apiKey: process.env.OPENAI_API_KEY,
10 | });
11 | 
12 | const openai = new OpenAIApi(configuration);
13 | 
14 | const instructionMessage: ChatCompletionRequestMessage = {
15 |   role: "system",
16 |   content: "You are a code generator. You must answer only in markdown code snippets. Use code comments for explanations."
17 | };
18 | 
19 | export async function POST(
20 |   req: Request
21 | ) {
22 |   try {
23 |     const { userId } = auth();
24 |     const body = await req.json();
25 |     const { messages  } = body;
26 | 
27 |     if (!userId) {
28 |       return new NextResponse("Unauthorized", { status: 401 });
29 |     }
30 | 
31 |     if (!configuration.apiKey) {
32 |       return new NextResponse("OpenAI API Key not configured.", { status: 500 });
33 |     }
34 | 
35 |     if (!messages) {
36 |       return new NextResponse("Messages are required", { status: 400 });
37 |     }
38 | 
39 |     const freeTrial = await checkApiLimit();
40 |     const isPro = await checkSubscription();
41 | 
42 |     if (!freeTrial && !isPro) {
43 |       return new NextResponse("Free trial has expired. Please upgrade to pro.", { status: 403 });
44 |     }
45 | 
46 |     const response = await openai.createChatCompletion({
47 |       model: "gpt-3.5-turbo",
48 |       messages: [instructionMessage, ...messages]
49 |     });
50 | 
51 |     if (!isPro) {
52 |       await incrementApiLimit();
53 |     }
54 | 
55 |     return NextResponse.json(response.data.choices[0].message);
56 |   } catch (error) {
57 |     console.log('[CODE_ERROR]', error);
58 |     return new NextResponse("Internal Error", { status: 500 });
59 |   }
60 | };
61 | 


--------------------------------------------------------------------------------
/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 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 |         premium: "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white border-0",
22 |       },
23 |       size: {
24 |         default: "h-10 px-4 py-2",
25 |         sm: "h-9 rounded-md px-3",
26 |         lg: "h-11 rounded-md px-8",
27 |         icon: "h-10 w-10",
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 | 


--------------------------------------------------------------------------------
/app/api/stripe/route.ts:
--------------------------------------------------------------------------------
 1 | import { auth, currentUser } from "@clerk/nextjs";
 2 | import { NextResponse } from "next/server";
 3 | 
 4 | import prismadb from "@/lib/prismadb";
 5 | import { stripe } from "@/lib/stripe";
 6 | import { absoluteUrl } from "@/lib/utils";
 7 | 
 8 | const settingsUrl = absoluteUrl("/settings");
 9 | 
10 | export async function GET() {
11 |   try {
12 |     const { userId } = auth();
13 |     const user = await currentUser();
14 | 
15 |     if (!userId || !user) {
16 |       return new NextResponse("Unauthorized", { status: 401 });
17 |     }
18 | 
19 |     const userSubscription = await prismadb.userSubscription.findUnique({
20 |       where: {
21 |         userId
22 |       }
23 |     })
24 | 
25 |     if (userSubscription && userSubscription.stripeCustomerId) {
26 |       const stripeSession = await stripe.billingPortal.sessions.create({
27 |         customer: userSubscription.stripeCustomerId,
28 |         return_url: settingsUrl,
29 |       })
30 | 
31 |       return new NextResponse(JSON.stringify({ url: stripeSession.url }))
32 |     }
33 | 
34 |     const stripeSession = await stripe.checkout.sessions.create({
35 |       success_url: settingsUrl,
36 |       cancel_url: settingsUrl,
37 |       payment_method_types: ["card"],
38 |       mode: "subscription",
39 |       billing_address_collection: "auto",
40 |       customer_email: user.emailAddresses[0].emailAddress,
41 |       line_items: [
42 |         {
43 |           price_data: {
44 |             currency: "USD",
45 |             product_data: {
46 |               name: "Genius Pro",
47 |               description: "Unlimited AI Generations"
48 |             },
49 |             unit_amount: 2000,
50 |             recurring: {
51 |               interval: "month"
52 |             }
53 |           },
54 |           quantity: 1,
55 |         },
56 |       ],
57 |       metadata: {
58 |         userId,
59 |       },
60 |     })
61 | 
62 |     return new NextResponse(JSON.stringify({ url: stripeSession.url }))
63 |   } catch (error) {
64 |     console.log("[STRIPE_ERROR]", error);
65 |     return new NextResponse("Internal Error", { status: 500 });
66 |   }
67 | };


--------------------------------------------------------------------------------
/app/api/webhook/route.ts:
--------------------------------------------------------------------------------
 1 | import Stripe from "stripe"
 2 | import { headers } from "next/headers"
 3 | import { NextResponse } from "next/server"
 4 | 
 5 | import prismadb from "@/lib/prismadb"
 6 | import { stripe } from "@/lib/stripe"
 7 | 
 8 | export async function POST(req: Request) {
 9 |   const body = await req.text()
10 |   const signature = headers().get("Stripe-Signature") as string
11 | 
12 |   let event: Stripe.Event
13 | 
14 |   try {
15 |     event = stripe.webhooks.constructEvent(
16 |       body,
17 |       signature,
18 |       process.env.STRIPE_WEBHOOK_SECRET!
19 |     )
20 |   } catch (error: any) {
21 |     return new NextResponse(`Webhook Error: ${error.message}`, { status: 400 })
22 |   }
23 | 
24 |   const session = event.data.object as Stripe.Checkout.Session
25 | 
26 |   if (event.type === "checkout.session.completed") {
27 |     const subscription = await stripe.subscriptions.retrieve(
28 |       session.subscription as string
29 |     )
30 | 
31 |     if (!session?.metadata?.userId) {
32 |       return new NextResponse("User id is required", { status: 400 });
33 |     }
34 | 
35 |     await prismadb.userSubscription.create({
36 |       data: {
37 |         userId: session?.metadata?.userId,
38 |         stripeSubscriptionId: subscription.id,
39 |         stripeCustomerId: subscription.customer as string,
40 |         stripePriceId: subscription.items.data[0].price.id,
41 |         stripeCurrentPeriodEnd: new Date(
42 |           subscription.current_period_end * 1000
43 |         ),
44 |       },
45 |     })
46 |   }
47 | 
48 |   if (event.type === "invoice.payment_succeeded") {
49 |     const subscription = await stripe.subscriptions.retrieve(
50 |       session.subscription as string
51 |     )
52 | 
53 |     await prismadb.userSubscription.update({
54 |       where: {
55 |         stripeSubscriptionId: subscription.id,
56 |       },
57 |       data: {
58 |         stripePriceId: subscription.items.data[0].price.id,
59 |         stripeCurrentPeriodEnd: new Date(
60 |           subscription.current_period_end * 1000
61 |         ),
62 |       },
63 |     })
64 |   }
65 | 
66 |   return new NextResponse(null, { status: 200 })
67 | };
68 | 


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


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


--------------------------------------------------------------------------------
/components/pro-modal.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState } from "react";
 4 | import { Check, Zap } from "lucide-react";
 5 | import { toast } from "react-hot-toast";
 6 | import axios from "axios";
 7 | 
 8 | import {
 9 |   Dialog,
10 |   DialogContent,
11 |   DialogHeader,
12 |   DialogTitle,
13 |   DialogDescription,
14 |   DialogFooter
15 | } from "@/components/ui/dialog";
16 | import { Badge } from "@/components/ui/badge";
17 | import { Button } from "@/components/ui/button";
18 | import { useProModal } from "@/hooks/use-pro-modal";
19 | import { tools } from "@/constant";
20 | import { Card } from "@/components/ui/card";
21 | import { cn } from "@/lib/utils";
22 | 
23 | export const ProModal = () => {
24 |   const proModal = useProModal();
25 |   const [loading, setLoading] = useState(false);
26 | 
27 |   const onSubscribe = async () => {
28 |     try {
29 |       setLoading(true);
30 |       const response = await axios.get("/api/stripe");
31 | 
32 |       window.location.href = response.data.url;
33 |     } catch (error) {
34 |       toast.error("Something went wrong");
35 |     } finally {
36 |       setLoading(false);
37 |     }
38 |   }
39 | 
40 |   return (
41 |     <Dialog open={proModal.isOpen} onOpenChange={proModal.onClose}>
42 |       <DialogContent>
43 |         <DialogHeader>
44 |           <DialogTitle className="flex justify-center items-center flex-col gap-y-4 pb-2">
45 |             <div className="flex items-center gap-x-2 font-bold text-xl">
46 |               Upgrade to Genius
47 |               <Badge variant="premium" className="uppercase text-sm py-1">
48 |                 pro
49 |               </Badge>
50 |             </div>
51 |           </DialogTitle>
52 |           <DialogDescription className="text-center pt-2 space-y-2 text-zinc-900 font-medium">
53 |             {tools.map((tool) => (
54 |               <Card key={tool.href} className="p-3 border-black/5 flex items-center justify-between">
55 |                 <div className="flex items-center gap-x-4">
56 |                   <div className={cn("p-2 w-fit rounded-md", tool.bgColor)}>
57 |                     <tool.icon className={cn("w-6 h-6", tool.color)} />
58 |                   </div>
59 |                   <div className="font-semibold text-sm">
60 |                     {tool.label}
61 |                   </div>
62 |                 </div>
63 |                 <Check className="text-primary w-5 h-5" />
64 |               </Card>
65 |             ))}
66 |           </DialogDescription>
67 |         </DialogHeader>
68 |         <DialogFooter>
69 |           <Button onClick={onSubscribe} disabled={loading} size="lg" variant="premium" className="w-full">
70 |             Upgrade
71 |             <Zap className="w-4 h-4 ml-2 fill-white" />
72 |           </Button>
73 |         </DialogFooter>
74 |       </DialogContent>
75 |     </Dialog>
76 |   );
77 | };


--------------------------------------------------------------------------------
/components/sidebar.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import Link from "next/link";
  4 | import Image from "next/image";
  5 | import { Montserrat } from 'next/font/google'
  6 | import { Code, ImageIcon, LayoutDashboard, MessageSquare, Music, Settings, VideoIcon } from "lucide-react";
  7 | import { usePathname } from "next/navigation";
  8 | 
  9 | import { cn } from "@/lib/utils";
 10 | import { FreeCounter } from "@/components/free-counter";
 11 | 
 12 | const poppins = Montserrat({ weight: '600', subsets: ['latin'] });
 13 | 
 14 | const routes = [
 15 |     {
 16 |         label: 'Dashboard',
 17 |         icon: LayoutDashboard,
 18 |         href: '/dashboard',
 19 |         color: "text-sky-500"
 20 |     },
 21 |     {
 22 |         label: 'Conversation',
 23 |         icon: MessageSquare,
 24 |         href: '/conversation',
 25 |         color: "text-violet-500",
 26 |     },
 27 |     {
 28 |         label: 'Image Generation',
 29 |         icon: ImageIcon,
 30 |         color: "text-pink-700",
 31 |         href: '/image',
 32 |     },
 33 |     {
 34 |         label: 'Video Generation',
 35 |         icon: VideoIcon,
 36 |         color: "text-orange-700",
 37 |         href: '/video',
 38 |     },
 39 |     {
 40 |         label: 'Music Generation',
 41 |         icon: Music,
 42 |         color: "text-emerald-500",
 43 |         href: '/music',
 44 |     },
 45 |     {
 46 |         label: 'Code Generation',
 47 |         icon: Code,
 48 |         color: "text-green-700",
 49 |         href: '/code',
 50 |     },
 51 |     {
 52 |         label: 'Settings',
 53 |         icon: Settings,
 54 |         href: '/settings',
 55 |     },
 56 | ];
 57 | 
 58 | const Sidebar = ({
 59 |     apiLimitCount = 0,
 60 |     isPro = false
 61 | }: {
 62 |     apiLimitCount: number;
 63 |     isPro: boolean;
 64 | }) => {
 65 |     const pathname = usePathname();
 66 | 
 67 |     return (
 68 |         <div className="space-y-4 py-4 flex flex-col h-full bg-[#111827] text-white">
 69 |             <div className="px-3 py-2 flex-1">
 70 |                 <Link href="/dashboard" className="flex items-center pl-3 mb-14">
 71 |                     <div className="relative h-8 w-8 mr-4">
 72 |                         <Image fill alt="Logo" src="/logo.png" />
 73 |                     </div>
 74 |                     <h1 className={cn("text-2xl font-bold", poppins.className)}>
 75 |                         Genius
 76 |                     </h1>
 77 |                 </Link>
 78 |                 <div className="space-y-1">
 79 |                     {routes.map((route) => (
 80 |                         <Link
 81 |                             key={route.href}
 82 |                             href={route.href}
 83 |                             className={cn(
 84 |                                 "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:text-white hover:bg-white/10 rounded-lg transition",
 85 |                                 pathname === route.href ? "text-white bg-white/10" : "text-zinc-400",
 86 |                             )}
 87 |                         >
 88 |                             <div className="flex items-center flex-1">
 89 |                                 <route.icon className={cn("h-5 w-5 mr-3", route.color)} />
 90 |                                 {route.label}
 91 |                             </div>
 92 |                         </Link>
 93 |                     ))}
 94 |                 </div>
 95 |             </div>
 96 |             <FreeCounter
 97 |                 apiLimitCount={apiLimitCount}
 98 |                 isPro={isPro}
 99 |             />
100 |         </div>
101 |     );
102 | };
103 | 
104 | export default Sidebar;


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/music/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as z from "zod";
  4 | import axios from "axios";
  5 | import { useState } from "react";
  6 | import { zodResolver } from "@hookform/resolvers/zod";
  7 | import { useForm } from "react-hook-form";
  8 | import { toast } from "react-hot-toast";
  9 | import { useRouter } from "next/navigation";
 10 | import { Music, Send } from "lucide-react";
 11 | 
 12 | import { Heading } from "@/components/heading";
 13 | import { Button } from "@/components/ui/button";
 14 | import { Input } from "@/components/ui/input";
 15 | import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
 16 | import { Loader } from "@/components/loader";
 17 | import Empty from "@/components/empty";
 18 | 
 19 | import { formSchema } from "./constant";
 20 | import { useProModal } from "@/hooks/use-pro-modal";
 21 | 
 22 | const MusicPage = () => {
 23 |   const proModal = useProModal();
 24 |   const router = useRouter();
 25 |   const [music, setMusic] = useState<string>();
 26 | 
 27 |   const form = useForm<z.infer<typeof formSchema>>({
 28 |     resolver: zodResolver(formSchema),
 29 |     defaultValues: {
 30 |       prompt: "",
 31 |     }
 32 |   });
 33 | 
 34 |   const isLoading = form.formState.isSubmitting;
 35 | 
 36 |   const onSubmit = async (values: z.infer<typeof formSchema>) => {
 37 |     try {
 38 |       setMusic(undefined);
 39 | 
 40 |       const response = await axios.post('/api/music', values);
 41 |       console.log(response)
 42 | 
 43 |       setMusic(response.data.audio);
 44 |       form.reset();
 45 |     } catch (error: any) {
 46 |       if (error?.response?.status === 403) {
 47 |         proModal.onOpen();
 48 |       }
 49 |       else {
 50 |         toast.error("Something went wrong.");
 51 |       }
 52 |     } finally {
 53 |       router.refresh();
 54 |     }
 55 |   }
 56 | 
 57 |   return (
 58 |     <div>
 59 |       <Heading
 60 |         title="Music Generation"
 61 |         description="Turn your prompt into music."
 62 |         icon={Music}
 63 |         iconColor="text-emerald-500"
 64 |         bgColor="bg-emerald-500/10"
 65 |       />
 66 |       <div className="px-4 lg:px-8">
 67 |         <Form {...form}>
 68 |           <form
 69 |             onSubmit={form.handleSubmit(onSubmit)}
 70 |             className="
 71 |               rounded-lg 
 72 |               border 
 73 |               w-full 
 74 |               p-4 
 75 |               px-3 
 76 |               md:px-6 
 77 |               focus-within:shadow-sm
 78 |               grid
 79 |               grid-cols-12
 80 |               gap-2
 81 |             "
 82 |           >
 83 |             <FormField
 84 |               name="prompt"
 85 |               render={({ field }) => (
 86 |                 <FormItem className="col-span-12 lg:col-span-10">
 87 |                   <FormControl className="m-0 p-0">
 88 |                     <Input
 89 |                       className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
 90 |                       disabled={isLoading}
 91 |                       placeholder="Piano solo"
 92 |                       {...field}
 93 |                     />
 94 |                   </FormControl>
 95 |                 </FormItem>
 96 |               )}
 97 |             />
 98 |             <Button className="col-span-12 lg:col-span-2 w-full" type="submit" disabled={isLoading} size="icon">
 99 |               Generate
100 |             </Button>
101 |           </form>
102 |         </Form>
103 |         {isLoading && (
104 |           <div className="p-20">
105 |             <Loader />
106 |           </div>
107 |         )}
108 |         {!music && !isLoading && (
109 |           <Empty label="No music generated." />
110 |         )}
111 |         {music && (
112 |           <audio controls className="w-full mt-8">
113 |             <source src={music} />
114 |           </audio>
115 |         )}
116 |       </div>
117 |     </div>
118 |   );
119 | }
120 | 
121 | export default MusicPage;


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/video/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as z from "zod";
  4 | import axios from "axios";
  5 | import { useState } from "react";
  6 | import { zodResolver } from "@hookform/resolvers/zod";
  7 | import { useForm } from "react-hook-form";
  8 | import { toast } from "react-hot-toast";
  9 | import { FileAudio } from "lucide-react";
 10 | import { useRouter } from "next/navigation";
 11 | 
 12 | import { Heading } from "@/components/heading";
 13 | import { Button } from "@/components/ui/button";
 14 | import { Input } from "@/components/ui/input";
 15 | import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
 16 | import { Loader } from "@/components/loader";
 17 | import Empty from "@/components/empty";
 18 | 
 19 | import { formSchema } from "./constant";
 20 | import { useProModal } from "@/hooks/use-pro-modal";
 21 | 
 22 | const VideoPage = () => {
 23 |   const proModal = useProModal();
 24 |   const router = useRouter();
 25 |   const [video, setVideo] = useState<string>();
 26 | 
 27 |   const form = useForm<z.infer<typeof formSchema>>({
 28 |     resolver: zodResolver(formSchema),
 29 |     defaultValues: {
 30 |       prompt: "",
 31 |     }
 32 |   });
 33 | 
 34 |   const isLoading = form.formState.isSubmitting;
 35 | 
 36 |   const onSubmit = async (values: z.infer<typeof formSchema>) => {
 37 |     try {
 38 |       setVideo(undefined);
 39 | 
 40 |       const response = await axios.post('/api/video', values);
 41 | 
 42 |       setVideo(response.data[0]);
 43 |       form.reset();
 44 |     } catch (error: any) {
 45 |       if (error?.response?.status === 403) {
 46 |         proModal.onOpen();
 47 |       } else {
 48 |         toast.error("Something went wrong.");
 49 |       }
 50 |     } finally {
 51 |       router.refresh();
 52 |     }
 53 |   }
 54 | 
 55 |   return (
 56 |     <div>
 57 |       <Heading
 58 |         title="Video Generation"
 59 |         description="Turn your prompt into video."
 60 |         icon={FileAudio}
 61 |         iconColor="text-orange-700"
 62 |         bgColor="bg-orange-700/10"
 63 |       />
 64 |       <div className="px-4 lg:px-8">
 65 |         <Form {...form}>
 66 |           <form
 67 |             onSubmit={form.handleSubmit(onSubmit)}
 68 |             className="
 69 |               rounded-lg 
 70 |               border 
 71 |               w-full 
 72 |               p-4 
 73 |               px-3 
 74 |               md:px-6 
 75 |               focus-within:shadow-sm
 76 |               grid
 77 |               grid-cols-12
 78 |               gap-2
 79 |             "
 80 |           >
 81 |             <FormField
 82 |               name="prompt"
 83 |               render={({ field }) => (
 84 |                 <FormItem className="col-span-12 lg:col-span-10">
 85 |                   <FormControl className="m-0 p-0">
 86 |                     <Input
 87 |                       className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
 88 |                       disabled={isLoading}
 89 |                       placeholder="Clown fish swimming in a coral reef"
 90 |                       {...field}
 91 |                     />
 92 |                   </FormControl>
 93 |                 </FormItem>
 94 |               )}
 95 |             />
 96 |             <Button className="col-span-12 lg:col-span-2 w-full" type="submit" disabled={isLoading} size="icon">
 97 |               Generate
 98 |             </Button>
 99 |           </form>
100 |         </Form>
101 |         {isLoading && (
102 |           <div className="p-20">
103 |             <Loader />
104 |           </div>
105 |         )}
106 |         {!video && !isLoading && (
107 |           <Empty label="No video files generated." />
108 |         )}
109 |         {video && (
110 |           <video controls className="w-full aspect-video mt-8 rounded-lg border bg-black">
111 |             <source src={video} />
112 |           </video>
113 |         )}
114 |       </div>
115 |     </div>
116 |   );
117 | }
118 | 
119 | export default VideoPage;


--------------------------------------------------------------------------------
/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 = ({
 14 |   className,
 15 |   ...props
 16 | }: DialogPrimitive.DialogPortalProps) => (
 17 |   <DialogPrimitive.Portal className={cn(className)} {...props} />
 18 | )
 19 | DialogPortal.displayName = DialogPrimitive.Portal.displayName
 20 | 
 21 | const DialogOverlay = React.forwardRef<
 22 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 23 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 24 | >(({ className, ...props }, ref) => (
 25 |   <DialogPrimitive.Overlay
 26 |     ref={ref}
 27 |     className={cn(
 28 |       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 29 |       className
 30 |     )}
 31 |     {...props}
 32 |   />
 33 | ))
 34 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 35 | 
 36 | const DialogContent = React.forwardRef<
 37 |   React.ElementRef<typeof DialogPrimitive.Content>,
 38 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 39 | >(({ className, children, ...props }, ref) => (
 40 |   <DialogPortal>
 41 |     <DialogOverlay />
 42 |     <DialogPrimitive.Content
 43 |       ref={ref}
 44 |       className={cn(
 45 |         "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 md:w-full",
 46 |         className
 47 |       )}
 48 |       {...props}
 49 |     >
 50 |       {children}
 51 |       <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">
 52 |         <X className="h-4 w-4" />
 53 |         <span className="sr-only">Close</span>
 54 |       </DialogPrimitive.Close>
 55 |     </DialogPrimitive.Content>
 56 |   </DialogPortal>
 57 | ))
 58 | DialogContent.displayName = DialogPrimitive.Content.displayName
 59 | 
 60 | const DialogHeader = ({
 61 |   className,
 62 |   ...props
 63 | }: React.HTMLAttributes<HTMLDivElement>) => (
 64 |   <div
 65 |     className={cn(
 66 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 67 |       className
 68 |     )}
 69 |     {...props}
 70 |   />
 71 | )
 72 | DialogHeader.displayName = "DialogHeader"
 73 | 
 74 | const DialogFooter = ({
 75 |   className,
 76 |   ...props
 77 | }: React.HTMLAttributes<HTMLDivElement>) => (
 78 |   <div
 79 |     className={cn(
 80 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 81 |       className
 82 |     )}
 83 |     {...props}
 84 |   />
 85 | )
 86 | DialogFooter.displayName = "DialogFooter"
 87 | 
 88 | const DialogTitle = React.forwardRef<
 89 |   React.ElementRef<typeof DialogPrimitive.Title>,
 90 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 91 | >(({ className, ...props }, ref) => (
 92 |   <DialogPrimitive.Title
 93 |     ref={ref}
 94 |     className={cn(
 95 |       "text-lg font-semibold leading-none tracking-tight",
 96 |       className
 97 |     )}
 98 |     {...props}
 99 |   />
100 | ))
101 | DialogTitle.displayName = DialogPrimitive.Title.displayName
102 | 
103 | const DialogDescription = React.forwardRef<
104 |   React.ElementRef<typeof DialogPrimitive.Description>,
105 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
106 | >(({ className, ...props }, ref) => (
107 |   <DialogPrimitive.Description
108 |     ref={ref}
109 |     className={cn("text-sm text-muted-foreground", className)}
110 |     {...props}
111 |   />
112 | ))
113 | DialogDescription.displayName = DialogPrimitive.Description.displayName
114 | 
115 | export {
116 |   Dialog,
117 |   DialogTrigger,
118 |   DialogContent,
119 |   DialogHeader,
120 |   DialogFooter,
121 |   DialogTitle,
122 |   DialogDescription,
123 | }
124 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { Check, ChevronDown } from "lucide-react"
  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-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown 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("py-1.5 pl-8 pr-2 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-8 pr-2 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 left-2 flex h-3.5 w-3.5 items-center justify-center">
 90 |       <SelectPrimitive.ItemIndicator>
 91 |         <Check className="h-4 w-4" />
 92 |       </SelectPrimitive.ItemIndicator>
 93 |     </span>
 94 | 
 95 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
 96 |   </SelectPrimitive.Item>
 97 | ))
 98 | SelectItem.displayName = SelectPrimitive.Item.displayName
 99 | 
100 | const SelectSeparator = React.forwardRef<
101 |   React.ElementRef<typeof SelectPrimitive.Separator>,
102 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
103 | >(({ className, ...props }, ref) => (
104 |   <SelectPrimitive.Separator
105 |     ref={ref}
106 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
107 |     {...props}
108 |   />
109 | ))
110 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
111 | 
112 | export {
113 |   Select,
114 |   SelectGroup,
115 |   SelectValue,
116 |   SelectTrigger,
117 |   SelectContent,
118 |   SelectLabel,
119 |   SelectItem,
120 |   SelectSeparator,
121 | }
122 | 


--------------------------------------------------------------------------------
/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as LabelPrimitive from "@radix-ui/react-label"
  3 | import { Slot } from "@radix-ui/react-slot"
  4 | import {
  5 |   Controller,
  6 |   ControllerProps,
  7 |   FieldPath,
  8 |   FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 | } from "react-hook-form"
 12 | 
 13 | import { cn } from "@/lib/utils"
 14 | import { Label } from "@/components/ui/label"
 15 | 
 16 | const Form = FormProvider
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 21 | > = {
 22 |   name: TName
 23 | }
 24 | 
 25 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue
 27 | )
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   )
 40 | }
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext)
 44 |   const itemContext = React.useContext(FormItemContext)
 45 |   const { getFieldState, formState } = useFormContext()
 46 | 
 47 |   const fieldState = getFieldState(fieldContext.name, formState)
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error("useFormField should be used within <FormField>")
 51 |   }
 52 | 
 53 |   const { id } = itemContext
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   }
 63 | }
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string
 67 | }
 68 | 
 69 | const FormItemContext = React.createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue
 71 | )
 72 | 
 73 | const FormItem = React.forwardRef<
 74 |   HTMLDivElement,
 75 |   React.HTMLAttributes<HTMLDivElement>
 76 | >(({ className, ...props }, ref) => {
 77 |   const id = React.useId()
 78 | 
 79 |   return (
 80 |     <FormItemContext.Provider value={{ id }}>
 81 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 82 |     </FormItemContext.Provider>
 83 |   )
 84 | })
 85 | FormItem.displayName = "FormItem"
 86 | 
 87 | const FormLabel = React.forwardRef<
 88 |   React.ElementRef<typeof LabelPrimitive.Root>,
 89 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 90 | >(({ className, ...props }, ref) => {
 91 |   const { error, formItemId } = useFormField()
 92 | 
 93 |   return (
 94 |     <Label
 95 |       ref={ref}
 96 |       className={cn(error && "text-destructive", className)}
 97 |       htmlFor={formItemId}
 98 |       {...props}
 99 |     />
100 |   )
101 | })
102 | FormLabel.displayName = "FormLabel"
103 | 
104 | const FormControl = React.forwardRef<
105 |   React.ElementRef<typeof Slot>,
106 |   React.ComponentPropsWithoutRef<typeof Slot>
107 | >(({ ...props }, ref) => {
108 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109 | 
110 |   return (
111 |     <Slot
112 |       ref={ref}
113 |       id={formItemId}
114 |       aria-describedby={
115 |         !error
116 |           ? `${formDescriptionId}`
117 |           : `${formDescriptionId} ${formMessageId}`
118 |       }
119 |       aria-invalid={!!error}
120 |       {...props}
121 |     />
122 |   )
123 | })
124 | FormControl.displayName = "FormControl"
125 | 
126 | const FormDescription = React.forwardRef<
127 |   HTMLParagraphElement,
128 |   React.HTMLAttributes<HTMLParagraphElement>
129 | >(({ className, ...props }, ref) => {
130 |   const { formDescriptionId } = useFormField()
131 | 
132 |   return (
133 |     <p
134 |       ref={ref}
135 |       id={formDescriptionId}
136 |       className={cn("text-sm text-muted-foreground", className)}
137 |       {...props}
138 |     />
139 |   )
140 | })
141 | FormDescription.displayName = "FormDescription"
142 | 
143 | const FormMessage = React.forwardRef<
144 |   HTMLParagraphElement,
145 |   React.HTMLAttributes<HTMLParagraphElement>
146 | >(({ className, children, ...props }, ref) => {
147 |   const { error, formMessageId } = useFormField()
148 |   const body = error ? String(error?.message) : children
149 | 
150 |   if (!body) {
151 |     return null
152 |   }
153 | 
154 |   return (
155 |     <p
156 |       ref={ref}
157 |       id={formMessageId}
158 |       className={cn("text-sm font-medium text-destructive", className)}
159 |       {...props}
160 |     >
161 |       {body}
162 |     </p>
163 |   )
164 | })
165 | FormMessage.displayName = "FormMessage"
166 | 
167 | export {
168 |   useFormField,
169 |   Form,
170 |   FormItem,
171 |   FormLabel,
172 |   FormControl,
173 |   FormDescription,
174 |   FormMessage,
175 |   FormField,
176 | }
177 | 


--------------------------------------------------------------------------------
/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  5 | import { cva, type VariantProps } from "class-variance-authority"
  6 | import { X } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | 
 10 | const Sheet = SheetPrimitive.Root
 11 | 
 12 | const SheetTrigger = SheetPrimitive.Trigger
 13 | 
 14 | const SheetClose = SheetPrimitive.Close
 15 | 
 16 | const SheetPortal = ({
 17 |   className,
 18 |   ...props
 19 | }: SheetPrimitive.DialogPortalProps) => (
 20 |   <SheetPrimitive.Portal className={cn(className)} {...props} />
 21 | )
 22 | SheetPortal.displayName = SheetPrimitive.Portal.displayName
 23 | 
 24 | const SheetOverlay = React.forwardRef<
 25 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 26 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 27 | >(({ className, ...props }, ref) => (
 28 |   <SheetPrimitive.Overlay
 29 |     className={cn(
 30 |       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 31 |       className
 32 |     )}
 33 |     {...props}
 34 |     ref={ref}
 35 |   />
 36 | ))
 37 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 38 | 
 39 | const sheetVariants = cva(
 40 |   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 41 |   {
 42 |     variants: {
 43 |       side: {
 44 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 45 |         bottom:
 46 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 47 |         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 48 |         right:
 49 |           "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 50 |       },
 51 |     },
 52 |     defaultVariants: {
 53 |       side: "right",
 54 |     },
 55 |   }
 56 | )
 57 | 
 58 | interface SheetContentProps
 59 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 60 |     VariantProps<typeof sheetVariants> {}
 61 | 
 62 | const SheetContent = React.forwardRef<
 63 |   React.ElementRef<typeof SheetPrimitive.Content>,
 64 |   SheetContentProps
 65 | >(({ side = "right", className, children, ...props }, ref) => (
 66 |   <SheetPortal>
 67 |     <SheetOverlay />
 68 |     <SheetPrimitive.Content
 69 |       ref={ref}
 70 |       className={cn(sheetVariants({ side }), className)}
 71 |       {...props}
 72 |     >
 73 |       {children}
 74 |       <SheetPrimitive.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-secondary">
 75 |         <X className="h-4 w-4" />
 76 |         <span className="sr-only">Close</span>
 77 |       </SheetPrimitive.Close>
 78 |     </SheetPrimitive.Content>
 79 |   </SheetPortal>
 80 | ))
 81 | SheetContent.displayName = SheetPrimitive.Content.displayName
 82 | 
 83 | const SheetHeader = ({
 84 |   className,
 85 |   ...props
 86 | }: React.HTMLAttributes<HTMLDivElement>) => (
 87 |   <div
 88 |     className={cn(
 89 |       "flex flex-col space-y-2 text-center sm:text-left",
 90 |       className
 91 |     )}
 92 |     {...props}
 93 |   />
 94 | )
 95 | SheetHeader.displayName = "SheetHeader"
 96 | 
 97 | const SheetFooter = ({
 98 |   className,
 99 |   ...props
100 | }: React.HTMLAttributes<HTMLDivElement>) => (
101 |   <div
102 |     className={cn(
103 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
104 |       className
105 |     )}
106 |     {...props}
107 |   />
108 | )
109 | SheetFooter.displayName = "SheetFooter"
110 | 
111 | const SheetTitle = React.forwardRef<
112 |   React.ElementRef<typeof SheetPrimitive.Title>,
113 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
114 | >(({ className, ...props }, ref) => (
115 |   <SheetPrimitive.Title
116 |     ref={ref}
117 |     className={cn("text-lg font-semibold text-foreground", className)}
118 |     {...props}
119 |   />
120 | ))
121 | SheetTitle.displayName = SheetPrimitive.Title.displayName
122 | 
123 | const SheetDescription = React.forwardRef<
124 |   React.ElementRef<typeof SheetPrimitive.Description>,
125 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
126 | >(({ className, ...props }, ref) => (
127 |   <SheetPrimitive.Description
128 |     ref={ref}
129 |     className={cn("text-sm text-muted-foreground", className)}
130 |     {...props}
131 |   />
132 | ))
133 | SheetDescription.displayName = SheetPrimitive.Description.displayName
134 | 
135 | export {
136 |   Sheet,
137 |   SheetTrigger,
138 |   SheetClose,
139 |   SheetContent,
140 |   SheetHeader,
141 |   SheetFooter,
142 |   SheetTitle,
143 |   SheetDescription,
144 | }
145 | 


--------------------------------------------------------------------------------
/components/ui/command.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import { DialogProps } from "@radix-ui/react-dialog"
  5 | import { Command as CommandPrimitive } from "cmdk"
  6 | import { Search } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | import { Dialog, DialogContent } from "@/components/ui/dialog"
 10 | 
 11 | const Command = React.forwardRef<
 12 |   React.ElementRef<typeof CommandPrimitive>,
 13 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 14 | >(({ className, ...props }, ref) => (
 15 |   <CommandPrimitive
 16 |     ref={ref}
 17 |     className={cn(
 18 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 19 |       className
 20 |     )}
 21 |     {...props}
 22 |   />
 23 | ))
 24 | Command.displayName = CommandPrimitive.displayName
 25 | 
 26 | interface CommandDialogProps extends DialogProps {}
 27 | 
 28 | const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 29 |   return (
 30 |     <Dialog {...props}>
 31 |       <DialogContent className="overflow-hidden p-0 shadow-lg">
 32 |         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 33 |           {children}
 34 |         </Command>
 35 |       </DialogContent>
 36 |     </Dialog>
 37 |   )
 38 | }
 39 | 
 40 | const CommandInput = React.forwardRef<
 41 |   React.ElementRef<typeof CommandPrimitive.Input>,
 42 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 43 | >(({ className, ...props }, ref) => (
 44 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 45 |     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 46 |     <CommandPrimitive.Input
 47 |       ref={ref}
 48 |       className={cn(
 49 |         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 50 |         className
 51 |       )}
 52 |       {...props}
 53 |     />
 54 |   </div>
 55 | ))
 56 | 
 57 | CommandInput.displayName = CommandPrimitive.Input.displayName
 58 | 
 59 | const CommandList = React.forwardRef<
 60 |   React.ElementRef<typeof CommandPrimitive.List>,
 61 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 62 | >(({ className, ...props }, ref) => (
 63 |   <CommandPrimitive.List
 64 |     ref={ref}
 65 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 66 |     {...props}
 67 |   />
 68 | ))
 69 | 
 70 | CommandList.displayName = CommandPrimitive.List.displayName
 71 | 
 72 | const CommandEmpty = React.forwardRef<
 73 |   React.ElementRef<typeof CommandPrimitive.Empty>,
 74 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 75 | >((props, ref) => (
 76 |   <CommandPrimitive.Empty
 77 |     ref={ref}
 78 |     className="py-6 text-center text-sm"
 79 |     {...props}
 80 |   />
 81 | ))
 82 | 
 83 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 84 | 
 85 | const CommandGroup = React.forwardRef<
 86 |   React.ElementRef<typeof CommandPrimitive.Group>,
 87 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 88 | >(({ className, ...props }, ref) => (
 89 |   <CommandPrimitive.Group
 90 |     ref={ref}
 91 |     className={cn(
 92 |       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 93 |       className
 94 |     )}
 95 |     {...props}
 96 |   />
 97 | ))
 98 | 
 99 | CommandGroup.displayName = CommandPrimitive.Group.displayName
100 | 
101 | const CommandSeparator = React.forwardRef<
102 |   React.ElementRef<typeof CommandPrimitive.Separator>,
103 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
104 | >(({ className, ...props }, ref) => (
105 |   <CommandPrimitive.Separator
106 |     ref={ref}
107 |     className={cn("-mx-1 h-px bg-border", className)}
108 |     {...props}
109 |   />
110 | ))
111 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
112 | 
113 | const CommandItem = React.forwardRef<
114 |   React.ElementRef<typeof CommandPrimitive.Item>,
115 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
116 | >(({ className, ...props }, ref) => (
117 |   <CommandPrimitive.Item
118 |     ref={ref}
119 |     className={cn(
120 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
121 |       className
122 |     )}
123 |     {...props}
124 |   />
125 | ))
126 | 
127 | CommandItem.displayName = CommandPrimitive.Item.displayName
128 | 
129 | const CommandShortcut = ({
130 |   className,
131 |   ...props
132 | }: React.HTMLAttributes<HTMLSpanElement>) => {
133 |   return (
134 |     <span
135 |       className={cn(
136 |         "ml-auto text-xs tracking-widest text-muted-foreground",
137 |         className
138 |       )}
139 |       {...props}
140 |     />
141 |   )
142 | }
143 | CommandShortcut.displayName = "CommandShortcut"
144 | 
145 | export {
146 |   Command,
147 |   CommandDialog,
148 |   CommandInput,
149 |   CommandList,
150 |   CommandEmpty,
151 |   CommandGroup,
152 |   CommandItem,
153 |   CommandShortcut,
154 |   CommandSeparator,
155 | }
156 | 


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/conversation/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { Heading } from "@/components/heading";
  3 | import { ChatCompletionRequestMessage } from "openai";
  4 | import { useState } from "react";
  5 | import axios from "axios";
  6 | import { useRouter } from "next/navigation";
  7 | import { MessageSquare } from "lucide-react";
  8 | import * as z from "zod";
  9 | import { useForm } from "react-hook-form";
 10 | import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
 11 | import { zodResolver } from "@hookform/resolvers/zod";
 12 | import { formSchema } from "./constant";
 13 | import { Button } from "@/components/ui/button";
 14 | import { Input } from "@/components/ui/input";
 15 | import Empty from "@/components/empty";
 16 | import { Loader } from "@/components/loader";
 17 | import UserAvatar from "@/components/user-avatar";
 18 | import { cn } from "@/lib/utils";
 19 | import { BotAvatar } from "@/components/bot-avatar";
 20 | import { useProModal } from "@/hooks/use-pro-modal";
 21 | import toast from "react-hot-toast";
 22 | const ConversationPage = () => {
 23 |     const ProModal = useProModal();
 24 |     const router = useRouter();
 25 |     const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);
 26 |     const form = useForm<z.infer<typeof formSchema>>({
 27 |         resolver: zodResolver(formSchema),
 28 |         defaultValues: {
 29 |             prompt: ""
 30 |         }
 31 |     });
 32 |     const isLoading = form.formState.isSubmitting;
 33 |     const onSubmit = async (values: z.infer<typeof formSchema>) => {
 34 |         try {
 35 |             const userMessage: ChatCompletionRequestMessage = { role: "user", content: values.prompt };
 36 |             const newMessages = [...messages, userMessage];
 37 |             const response = await axios.post('/api/conversation', { messages: newMessages });
 38 |             setMessages((current) => [...current, userMessage, response.data]);
 39 |             form.reset();
 40 |         } catch (err:any) {
 41 |             if(err?.response?.status === 403) {
 42 |                 ProModal.onOpen();
 43 |             }else{
 44 |                 toast.error("Something went wrong.");
 45 |             }
 46 |         } finally {
 47 |             router.refresh()
 48 |         }
 49 |     }
 50 |     return (
 51 |         <div>
 52 |             <Heading
 53 |                 title="Conversation"
 54 |                 description="Our most advanced conversation model."
 55 |                 icon={MessageSquare}
 56 |                 iconColor="text-violet-500"
 57 |                 bgColor="bg-violet-500/10"
 58 |             />
 59 |             <div className="px-4 lg:px-8">
 60 |                 <Form {...form}>
 61 |                     <form
 62 |                         onSubmit={form.handleSubmit(onSubmit)}
 63 |                         className="
 64 |                 rounded-lg 
 65 |                 border 
 66 |                 w-full 
 67 |                 p-4 
 68 |                 px-3 
 69 |                 md:px-6 
 70 |                 focus-within:shadow-sm
 71 |                 grid
 72 |                 grid-cols-12
 73 |                 gap-2
 74 |               "
 75 |                     >
 76 |                         <FormField
 77 |                             name="prompt"
 78 |                             render={({ field }) => (
 79 |                                 <FormItem className="col-span-12 lg:col-span-10">
 80 |                                     <FormControl className="m-0 p-0">
 81 |                                         <Input
 82 |                                             className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
 83 |                                             disabled={isLoading}
 84 |                                             placeholder="How do I calculate the radius of a circle?"
 85 |                                             {...field}
 86 |                                         />
 87 |                                     </FormControl>
 88 |                                 </FormItem>
 89 |                             )}
 90 |                         />
 91 |                         <Button className="col-span-12 lg:col-span-2 w-full" type="submit" disabled={isLoading} size="icon">
 92 |                             Generate
 93 |                         </Button>
 94 |                     </form>
 95 |                 </Form>
 96 |             </div>
 97 |             <div className="space-y-4 mt-4">
 98 |                 {isLoading && (
 99 |                     <div className="p-8 rounded-lg w-full flex items-center justify-center bg-muted">
100 |                         <Loader />
101 |                     </div>
102 |                 )}
103 |                 {messages.length === 0 && !isLoading && (
104 |                     <Empty label="No conversation started." />
105 |                 )}
106 |                 <div className="flex flex-col-reverse gap-y-4">
107 |                     {messages.map((message) => (
108 |                         <div
109 |                             key={message.content}
110 |                             className={cn(
111 |                                 "p-8 w-full flex items-start gap-x-8 rounded-lg",
112 |                                 message.role === "user" ? "bg-white border border-black/10" : "bg-muted",
113 |                             )}
114 |                         >
115 |                             {message.role === "user" ? <UserAvatar /> : <BotAvatar />}
116 |                             <p className="text-sm">
117 |                                 {message.content}
118 |                             </p>
119 |                         </div>
120 |                     ))}
121 |                 </div>
122 |             </div>
123 |         </div>
124 |     );
125 | }
126 | 
127 | export default ConversationPage;


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/code/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { Heading } from "@/components/heading";
  3 | import { ChatCompletionRequestMessage } from "openai";
  4 | import { useState } from "react";
  5 | import axios from "axios";
  6 | import { useRouter } from "next/navigation";
  7 | import { Code, MessageSquare } from "lucide-react";
  8 | import * as z from "zod";
  9 | import { useForm } from "react-hook-form";
 10 | import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
 11 | import { zodResolver } from "@hookform/resolvers/zod";
 12 | import { formSchema } from "./constant";
 13 | import { Button } from "@/components/ui/button";
 14 | import { Input } from "@/components/ui/input";
 15 | import Empty from "@/components/empty";
 16 | import { Loader } from "@/components/loader";
 17 | import UserAvatar from "@/components/user-avatar";
 18 | import { cn } from "@/lib/utils";
 19 | import { BotAvatar } from "@/components/bot-avatar";
 20 | import ReactMarkdown from "react-markdown";
 21 | import { useProModal } from "@/hooks/use-pro-modal";
 22 | import toast from "react-hot-toast";
 23 | const CodePage = () => {
 24 |     const router = useRouter();
 25 |     const proModal = useProModal();
 26 |     const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);
 27 |     const form = useForm<z.infer<typeof formSchema>>({
 28 |         resolver: zodResolver(formSchema),
 29 |         defaultValues: {
 30 |             prompt: ""
 31 |         }
 32 |     });
 33 | 
 34 |     const isLoading = form.formState.isSubmitting;
 35 |     const onSubmit = async (values: z.infer<typeof formSchema>) => {
 36 |         try {
 37 |             const userMessage: ChatCompletionRequestMessage = { role: "user", content: values.prompt };
 38 |             const newMessages = [...messages, userMessage];
 39 |             console.log(newMessages);
 40 |             const response = await axios.post('/api/code', { messages: newMessages });
 41 |             setMessages((current) => [...current, userMessage, response.data]);
 42 | 
 43 |             form.reset();
 44 |         } catch (err:any) {
 45 |             if(err?.response?.status === 403) {
 46 |                 proModal.onOpen();
 47 |             }else{
 48 |                 toast.error("Something went wrong.");
 49 |             }
 50 |         } finally {
 51 |             router.refresh()
 52 |         }
 53 |     }
 54 |     return (
 55 |         <div>
 56 |             <Heading
 57 |                 title="Code Generation"
 58 |                 description="Generate code from natural language."
 59 |                 icon={Code}
 60 |                 iconColor="text-green-700"
 61 |                 bgColor="bg-green-700/10"
 62 |             />
 63 |             <div className="px-4 lg:px-8">
 64 |                 <Form {...form}>
 65 |                     <form
 66 |                         onSubmit={form.handleSubmit(onSubmit)}
 67 |                         className="
 68 |                 rounded-lg 
 69 |                 border 
 70 |                 w-full 
 71 |                 p-4 
 72 |                 px-3 
 73 |                 md:px-6 
 74 |                 focus-within:shadow-sm
 75 |                 grid
 76 |                 grid-cols-12
 77 |                 gap-2
 78 |               "
 79 |                     >
 80 |                         <FormField
 81 |                             name="prompt"
 82 |                             render={({ field }) => (
 83 |                                 <FormItem className="col-span-12 lg:col-span-10">
 84 |                                     <FormControl className="m-0 p-0">
 85 |                                         <Input
 86 |                                             className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
 87 |                                             disabled={isLoading}
 88 |                                             placeholder="Simple toggle button using React hooks"
 89 |                                             {...field}
 90 |                                         />
 91 |                                     </FormControl>
 92 |                                 </FormItem>
 93 |                             )}
 94 |                         />
 95 |                         <Button className="col-span-12 lg:col-span-2 w-full" type="submit" disabled={isLoading} size="icon">
 96 |                             Generate
 97 |                         </Button>
 98 |                     </form>
 99 |                 </Form>
100 |             </div>
101 |             <div className="space-y-4 mt-4">
102 |                 {isLoading && (
103 |                     <div className="p-8 rounded-lg w-full flex items-center justify-center bg-muted">
104 |                         <Loader />
105 |                     </div>
106 |                 )}
107 |                 {messages.length === 0 && !isLoading && (
108 |                     <Empty label="No conversation started." />
109 |                 )}
110 |                 <div className="flex flex-col-reverse gap-y-4">
111 |                     {messages.map((message) => (
112 |                         <div
113 |                             key={message.content}
114 |                             className={cn(
115 |                                 "p-8 w-full flex items-start gap-x-8 rounded-lg",
116 |                                 message.role === "user" ? "bg-white border border-black/10" : "bg-muted",
117 |                             )}
118 |                         >
119 |                             {message.role === "user" ? <UserAvatar /> : <BotAvatar />}
120 |                             <ReactMarkdown components={{
121 |                                 pre: ({ node, ...props }) => (
122 |                                     <div className="overflow-auto w-full my-2 bg-black/10 p-2 rounded-lg">
123 |                                         <pre {...props} />
124 |                                     </div>
125 |                                 ),
126 |                                 code: ({ node, ...props }) => (
127 |                                     <code className="bg-black/10 rounded-lg p-1" {...props} />
128 |                                 )
129 |                             }} className="text-sm overflow-hidden leading-7">
130 |                                 {message.content || ""}
131 |                             </ReactMarkdown>
132 |                         </div>
133 |                     ))}
134 |                 </div>
135 |             </div>
136 |         </div>
137 |     );
138 | }
139 | 
140 | export default CodePage;


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


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/image/page.tsx:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | "use client";
  4 | 
  5 | import * as z from "zod";
  6 | import axios from "axios";
  7 | import Image from "next/image";
  8 | import { useState } from "react";
  9 | import { zodResolver } from "@hookform/resolvers/zod";
 10 | import { Download, ImageIcon } from "lucide-react";
 11 | import { useForm } from "react-hook-form";
 12 | import { useRouter } from "next/navigation";
 13 | 
 14 | import { Heading } from "@/components/heading";
 15 | import { Button } from "@/components/ui/button";
 16 | import { Card, CardFooter } from "@/components/ui/card";
 17 | import { Input } from "@/components/ui/input";
 18 | import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
 19 | import { Loader } from "@/components/loader";
 20 | import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 21 | import Empty from "@/components/empty";
 22 | 
 23 | import { amountOptions, formSchema, resolutionOptions } from "./constant";
 24 | import { useProModal } from "@/hooks/use-pro-modal";
 25 | import toast from "react-hot-toast";
 26 | 
 27 | const PhotoPage = () => {
 28 |     const router = useRouter();
 29 |     const proModal = useProModal();
 30 |     const [photos, setPhotos] = useState<string[]>([]);
 31 | 
 32 |     const form = useForm<z.infer<typeof formSchema>>({
 33 |         
 34 |         resolver: zodResolver(formSchema),
 35 |         defaultValues: {
 36 |             prompt: "",
 37 |             amount: "1",
 38 |             resolution: "512x512"
 39 |         }
 40 |     });
 41 | 
 42 |     const isLoading = form.formState.isSubmitting;
 43 | 
 44 |     const onSubmit = async (values: z.infer<typeof formSchema>) => {
 45 |         try {
 46 |             setPhotos([]);
 47 | 
 48 |             const response = await axios.post('/api/image', values);
 49 | 
 50 |             const urls = response.data.map((image: { url: string }) => image.url);
 51 | 
 52 |             setPhotos(urls);
 53 |         } catch (error: any) {
 54 |             if (error?.response?.status === 403) {
 55 |                 proModal.onOpen();
 56 |             } else{
 57 |                 toast.error("Something went wrong.");
 58 |             }
 59 |         } finally {
 60 |             router.refresh();
 61 |         }
 62 |     }
 63 | 
 64 |     return (
 65 |         <div>
 66 |             <Heading
 67 |                 title="Image Generation"
 68 |                 description="Turn your prompt into an image."
 69 |                 icon={ImageIcon}
 70 |                 iconColor="text-pink-700"
 71 |                 bgColor="bg-pink-700/10"
 72 |             />
 73 |             <div className="px-4 lg:px-8">
 74 |                 <Form {...form}>
 75 |                     <form
 76 |                         onSubmit={form.handleSubmit(onSubmit)}
 77 |                         className="
 78 |               rounded-lg 
 79 |               border 
 80 |               w-full 
 81 |               p-4 
 82 |               px-3 
 83 |               md:px-6 
 84 |               focus-within:shadow-sm
 85 |               grid
 86 |               grid-cols-12
 87 |               gap-2
 88 |             "
 89 |                     >
 90 |                         <FormField
 91 |                             name="prompt"
 92 |                             render={({ field }) => (
 93 |                                 <FormItem className="col-span-12 lg:col-span-6">
 94 |                                     <FormControl className="m-0 p-0">
 95 |                                         <Input
 96 |                                             className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
 97 |                                             disabled={isLoading}
 98 |                                             placeholder="A picture of a horse in Swiss alps"
 99 |                                             {...field}
100 |                                         />
101 |                                     </FormControl>
102 |                                 </FormItem>
103 |                             )}
104 |                         />
105 |                         <FormField
106 |                             control={form.control}
107 |                             name="amount"
108 |                             render={({ field }) => (
109 |                                 <FormItem className="col-span-12 lg:col-span-2">
110 |                                     <Select
111 |                                         disabled={isLoading}
112 |                                         onValueChange={field.onChange}
113 |                                         value={field.value}
114 |                                         defaultValue={field.value}
115 |                                     >
116 |                                         <FormControl>
117 |                                             <SelectTrigger>
118 |                                                 <SelectValue defaultValue={field.value} />
119 |                                             </SelectTrigger>
120 |                                         </FormControl>
121 |                                         <SelectContent>
122 |                                             {amountOptions.map((option) => (
123 |                                                 <SelectItem
124 |                                                     key={option.value}
125 |                                                     value={option.value}
126 |                                                 >
127 |                                                     {option.label}
128 |                                                 </SelectItem>
129 |                                             ))}
130 |                                         </SelectContent>
131 |                                     </Select>
132 |                                 </FormItem>
133 |                             )}
134 |                         />
135 |                         <FormField
136 |                             control={form.control}
137 |                             name="resolution"
138 |                             render={({ field }) => (
139 |                                 <FormItem className="col-span-12 lg:col-span-2">
140 |                                     <Select
141 |                                         disabled={isLoading}
142 |                                         onValueChange={field.onChange}
143 |                                         value={field.value}
144 |                                         defaultValue={field.value}
145 |                                     >
146 |                                         <FormControl>
147 |                                             <SelectTrigger>
148 |                                                 <SelectValue defaultValue={field.value} />
149 |                                             </SelectTrigger>
150 |                                         </FormControl>
151 |                                         <SelectContent>
152 |                                             {resolutionOptions.map((option) => (
153 |                                                 <SelectItem
154 |                                                     key={option.value}
155 |                                                     value={option.value}
156 |                                                 >
157 |                                                     {option.label}
158 |                                                 </SelectItem>
159 |                                             ))}
160 |                                         </SelectContent>
161 |                                     </Select>
162 |                                 </FormItem>
163 |                             )}
164 |                         />
165 |                         <Button className="col-span-12 lg:col-span-2 w-full" type="submit" disabled={isLoading} size="icon">
166 |                             Generate
167 |                         </Button>
168 |                     </form>
169 |                 </Form>
170 |                 {isLoading && (
171 |                     <div className="p-20">
172 |                         <Loader />
173 |                     </div>
174 |                 )}
175 |                 {photos.length === 0 && !isLoading && (
176 |                     <Empty label="No images generated." />
177 |                 )}
178 |                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mt-8">
179 |                     {photos.map((src) => (
180 |                         <Card key={src} className="rounded-lg overflow-hidden">
181 |                             <div className="relative aspect-square">
182 |                                 <Image
183 |                                     fill
184 |                                     alt="Generated"
185 |                                     src={src}
186 |                                 />
187 |                             </div>
188 |                             <CardFooter className="p-2">
189 |                                 <Button onClick={() => window.open(src)} variant="secondary" className="w-full">
190 |                                     <Download className="h-4 w-4 mr-2" />
191 |                                     Download
192 |                                 </Button>
193 |                             </CardFooter>
194 |                         </Card>
195 |                     ))}
196 |                 </div>
197 |             </div>
198 |         </div>
199 |     );
200 | }
201 | 
202 | export default PhotoPage;


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