├── .eslintrc.json
├── .gitignore
├── README.md
├── app
    ├── (auth)
    │   ├── (routes)
    │   │   ├── sign-in
    │   │   │   └── page.tsx
    │   │   └── sign-up
    │   │   │   └── page.tsx
    │   └── layout.tsx
    ├── (dashboard)
    │   ├── (routes)
    │   │   ├── dashboard
    │   │   │   └── page.tsx
    │   │   ├── email-generator
    │   │   │   ├── constants.ts
    │   │   │   └── page.tsx
    │   │   └── settings
    │   │   │   └── page.tsx
    │   └── layout.tsx
    ├── (landing)
    │   ├── layout.tsx
    │   └── page.tsx
    ├── api
    │   ├── emailgenerator
    │   │   └── route.ts
    │   ├── lemon
    │   │   └── route.ts
    │   └── webhook
    │   │   └── route.ts
    ├── favicon.ico
    ├── globals.css
    └── layout.tsx
├── components.json
├── components
    ├── empty.tsx
    ├── features.tsx
    ├── footer.tsx
    ├── free-counter.tsx
    ├── heading.tsx
    ├── hero.tsx
    ├── loader.tsx
    ├── mobile-sidebar.tsx
    ├── modal-provider.tsx
    ├── navbar-landing.tsx
    ├── navbar.tsx
    ├── pro-modal.tsx
    ├── sidebar.tsx
    ├── subscription-button.tsx
    ├── toaster-provider.tsx
    └── ui
    │   ├── avatar.tsx
    │   ├── badge.tsx
    │   ├── button.tsx
    │   ├── card.tsx
    │   ├── dialog.tsx
    │   ├── form.tsx
    │   ├── input.tsx
    │   ├── label.tsx
    │   ├── progress.tsx
    │   ├── select.tsx
    │   ├── sheet.tsx
    │   └── textarea.tsx
├── constants.ts
├── hooks
    └── use-pro-modal.tsx
├── lib
    ├── api-limit.ts
    ├── lemon.ts
    ├── prismadb.ts
    ├── subscription.ts
    └── utils.ts
├── middleware.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── prisma
    ├── migrations
    │   ├── 20231217152338_init
    │   │   └── migration.sql
    │   ├── 20231217190716_init
    │   │   └── migration.sql
    │   └── migration_lock.toml
    └── schema.prisma
├── public
    ├── empty.png
    ├── loading.png
    ├── logo.png
    ├── next.svg
    └── vercel.svg
├── tailwind.config.js
├── tailwind.config.ts
└── tsconfig.json


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


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


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


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


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


--------------------------------------------------------------------------------
/app/(auth)/layout.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | export default function AuthLayout({
 3 |     children,
 4 |   }: {
 5 |     children: React.ReactNode
 6 |   }) {
 7 |     return (
 8 |       <div className="flex items-center justify-center h-full">
 9 |           {children}
10 |          
11 |       </div>
12 |     )
13 |   }
14 |   


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/dashboard/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Card } from '@/components/ui/card';
 4 | import { cn } from '@/lib/utils';
 5 | import { ArrowRight, MessageSquare } from 'lucide-react';
 6 | import { useRouter } from 'next/navigation';
 7 | 
 8 | 
 9 | const tools = [
10 |     {
11 |         label: "Email generator",
12 |         icon: MessageSquare,
13 |         href: "/email-generator",
14 |         color: "text-violet-500",
15 |         bgColor : "bg-violet-500/10",
16 |         
17 |     }
18 | 
19 | ]
20 | 
21 | export default function DashboardPage() {
22 | 
23 |     const router = useRouter()
24 |     return (
25 |         <div>
26 |             <div className='mb-8 space-y-4'>
27 |                 <h2 className='text-2xl md:text-4xl font-bold text-center'>
28 |                     Generate your emails
29 |                 </h2>
30 |                 <p className='text-muted-foreground font-light text-sm md:text-lg text-center'>
31 |                   Use our AI assistant to generate awesome emails!
32 | 
33 |                 </p>
34 |                 <div className='px-4 md:px-20 lg:px-32 space-y-4'>
35 |                     {tools.map((tool) => (
36 |                         <Card key={tool.href}
37 |                             onClick={() => router.push(tool.href)}
38 |                             className="p-4 border-black/5 flex items-center justify-between hover:shadow-md transition cursor-pointer"
39 |                         >
40 |                             <div className='flex items-center gap-x-4'>
41 |                                 <div className={cn('p-2 w-fit rounded-md', tool.bgColor)}>
42 |                                     <tool.icon className={cn('w-8 h-8', tool.color)} />
43 | 
44 |                                 </div>
45 |                                 <div className='font-semibold'>
46 |                                     {tool.label}
47 |                                 </div>
48 | 
49 |                             </div>
50 |                             <ArrowRight className='w-5 h-5' />
51 |                         </Card>
52 |                     ))}
53 |                 </div>
54 | 
55 |             </div>
56 |         </div>
57 |     )
58 | }
59 | 


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/email-generator/constants.ts:
--------------------------------------------------------------------------------
  1 | import * as z from "zod"
  2 | 
  3 | export const formSchema = z.object({
  4 |     message : z.string().min(1,{
  5 |         message : "Write your email",
  6 |     }),
  7 |     tone : z.string().min(1),
  8 |     languages : z.string().min(1),
  9 |     words : z.string().min(1),
 10 |     purpose : z.string().min(1)
 11 | })
 12 | 
 13 | export const  languageOptions = [
 14 |         {label: "Albanian", value: "Albanian"},
 15 |         {label: "Arabic", value: "Arabic"},
 16 |         {label: "Armenian", value: "Armenian"},
 17 |         {label: "Awadhi", value: "Awadhi"},
 18 |         {label: "Azerbaijani", value: "Azerbaijani"},
 19 |         {label: "Bashkir", value: "Bashkir"},
 20 |         {label: "Basque", value: "Basque"},
 21 |         {label: "Belarusian", value: "Belarusian"},
 22 |         {label: "Bengali", value: "Bengali"},
 23 |         {label: "Bhojpuri", value: "Bhojpuri"},
 24 |         {label: "Bosnian", value: "Bosnian"},
 25 |         {label: "Brazilian Portuguese", value: "Brazilian Portuguese"},
 26 |         {label: "Bulgarian", value: "Bulgarian"},
 27 |         {label: "Cantonese (Yue)", value: "Cantonese (Yue)"},
 28 |         {label: "Catalan", value: "Catalan"},
 29 |         {label: "Chhattisgarhi", value: "Chhattisgarhi"},
 30 |         {label: "Chinese", value: "Chinese"},
 31 |         {label: "Croatian", value: "Croatian"},
 32 |         {label: "Czech", value: "Czech"},
 33 |         {label: "Danish", value: "Danish"},
 34 |         {label: "Dogri", value: "Dogri"},
 35 |         {label: "Dutch", value: "Dutch"},
 36 |         {label: "English", value: "English"},
 37 |         {label: "Estonian", value: "Estonian"},
 38 |         {label: "Faroese", value: "Faroese"},
 39 |         {label: "Finnish", value: "Finnish"},
 40 |         {label: "French", value: "French"},
 41 |         {label: "Galician", value: "Galician"},
 42 |         {label: "Georgian", value: "Georgian"},
 43 |         {label: "German", value: "German"},
 44 |         {label: "Greek", value: "Greek"},
 45 |         {label: "Gujarati", value: "Gujarati"},
 46 |         {label: "Haryanvi", value: "Haryanvi"},
 47 |         {label: "Hindi", value: "Hindi"},
 48 |         {label: "Hungarian", value: "Hungarian"},
 49 |         {label: "Indonesian", value: "Indonesian"},
 50 |         {label: "Irish", value: "Irish"},
 51 |         {label: "Italian", value: "Italian"},
 52 |         {label: "Japanese", value: "Japanese"},
 53 |         {label: "Javanese", value: "Javanese"},
 54 |         {label: "Kannada", value: "Kannada"},
 55 |         {label: "Kashmiri", value: "Kashmiri"},
 56 |         {label: "Kazakh", value: "Kazakh"},
 57 |         {label: "Konkani", value: "Konkani"},
 58 |         {label: "Korean", value: "Korean"},
 59 |         {label: "Kyrgyz", value: "Kyrgyz"},
 60 |         {label: "Latvian", value: "Latvian"},
 61 |         {label: "Lithuanian", value: "Lithuanian"},
 62 |         {label: "Macedonian", value: "Macedonian"},
 63 |         {label: "Maithili", value: "Maithili"},
 64 |         {label: "Malay", value: "Malay"},
 65 |         {label: "Maltese", value: "Maltese"},
 66 |         {label: "Mandarin", value: "Mandarin"},
 67 |         {label: "Mandarin Chinese", value: "Mandarin Chinese"},
 68 |         {label: "Marathi", value: "Marathi"},
 69 |         {label: "Marwari", value: "Marwari"},
 70 |         {label: "Min Nan", value: "Min Nan"},
 71 |         {label: "Moldovan", value: "Moldovan"},
 72 |         {label: "Mongolian", value: "Mongolian"},
 73 |         {label: "Montenegrin", value: "Montenegrin"},
 74 |         {label: "Nepali", value: "Nepali"},
 75 |         {label: "Norwegian", value: "Norwegian"},
 76 |         {label: "Oriya", value: "Oriya"},
 77 |         {label: "Pashto", value: "Pashto"},
 78 |         {label: "Persian (Farsi)", value: "Persian (Farsi)"},
 79 |         {label: "Polish", value: "Polish"},
 80 |         {label: "Portuguese", value: "Portuguese"},
 81 |         {label: "Punjabi", value: "Punjabi"},
 82 |         {label: "Rajasthani", value: "Rajasthani"},
 83 |         {label: "Romanian", value: "Romanian"},
 84 |         {label: "Russian", value: "Russian"},
 85 |         {label: "Sanskrit", value: "Sanskrit"},
 86 |         {label: "Santali", value: "Santali"},
 87 |         {label: "Serbian", value: "Serbian"},
 88 |         {label: "Sindhi", value: "Sindhi"},
 89 |         {label: "Sinhala", value: "Sinhala"},
 90 |         {label: "Slovak", value: "Slovak"},
 91 |         {label: "Slovene", value: "Slovene"},
 92 |         {label: "Slovenian", value: "Slovenian"},
 93 |         {label: "Spanish", value: "Spanish"},
 94 |         {label: "Swahili", value: "Swahili"},
 95 |         {label: "Swedish", value: "Swedish"},
 96 |         {label: "Tajik", value: "Tajik"},
 97 |         {label: "Tamil", value: "Tamil"},
 98 |         {label: "Tatar", value: "Tatar"},
 99 |         {label: "Telugu", value: "Telugu"},
100 |         {label: "Thai", value: "Thai"},
101 |         {label: "Turkish", value: "Turkish"},
102 |         {label: "Turkmen", value: "Turkmen"},
103 |         {label: "Ukrainian", value: "Ukrainian"},
104 |         {label: "Urdu", value: "Urdu"},
105 |         {label: "Uzbek", value: "Uzbek"},
106 |        
107 | ]
108 | 
109 | export const voiceOptions = [
110 |     {
111 |         value : "Professional",
112 |         label : "Professional"
113 |     },
114 |     {
115 |         value : "Formal",
116 |         label : "Formal"
117 |     },
118 |     {
119 |         value : "Informal",
120 |         label : "Informal"
121 |     },
122 |     {
123 |         value : "Funny",
124 |         label : "Funny"
125 |     },
126 |     {
127 |         value : "Urgent",
128 |         label : "Urgent"
129 |     },
130 | ]
131 | export const Wordsptions = [
132 |     
133 |     {
134 |         value : "100",
135 |         label : "Short"
136 |     },
137 |     {
138 |         value : "500",
139 |         label : "Medium"
140 |     },
141 |     {
142 |         value : "1000",
143 |         label : "Large"
144 |     },
145 |    
146 | ]
147 | 
148 | export const PurposeOptions = [
149 |     
150 |         {label: "Apology", value: "an apology"},
151 |         {label: "Birthday Wishes", value: "a birthday Wishes"},
152 |         {label: "Celebration", value: "a celebration"},
153 |         {label: "Cold Email", value: " a cold Email"},
154 |         {label: "Company Updates", value: "a company update"},
155 |         {label: "Deadline Reminders", value: "a deadline reminder"},
156 |         {label: "Event Invitations", value: "a event invitation"},
157 |         {label: "Follow-ups", value: "a follow-up"},
158 |         {label: "Greetings", value: "a greeting"},
159 |         {label: "Holiday Greetings", value: "a holiday Greeting"},
160 |         {label: "Job Application", value: "a job Application"},
161 |         {label: "Meeting Requests", value: "a meeting Request"},
162 |         {label: "Mentorship Requests", value: "a Mentorship Request"},
163 |         {label: "Official Communications", value: "a official communication"},
164 |         {label: "Sales", value: "a sales message"},
165 |         {label: "Security Alerts", value: "a security alert"}
166 |       
167 |       
168 | ]
169 | 
170 | 


--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/email-generator/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import axios from "axios";
  4 | import * as z from "zod";
  5 | import { Heading } from "@/components/heading";
  6 | import { ClipboardCopy, Mail } from "lucide-react";
  7 | import { useForm } from "react-hook-form";
  8 | import { zodResolver } from "@hookform/resolvers/zod";
  9 | import toast from "react-hot-toast";
 10 | 
 11 | import {
 12 |   formSchema,
 13 |   languageOptions,
 14 |   PurposeOptions,
 15 |   voiceOptions,
 16 |   Wordsptions,
 17 | } from "./constants";
 18 | import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
 19 | 
 20 | import { Button } from "@/components/ui/button";
 21 | import { useRouter } from "next/navigation";
 22 | import { useState } from "react";
 23 | import ChatCompletionRequestMessage from "openai";
 24 | 
 25 | import ReactMarkdown from "react-markdown";
 26 | import { Card, CardContent, CardHeader } from "@/components/ui/card";
 27 | import { Avatar } from "@radix-ui/react-avatar";
 28 | import { Label } from "@radix-ui/react-label";
 29 | import {
 30 |   Select,
 31 |   SelectContent,
 32 |   SelectItem,
 33 |   SelectTrigger,
 34 |   SelectValue,
 35 | } from "@/components/ui/select";
 36 | import { Textarea } from "@/components/ui/textarea";
 37 | import * as copy from "copy-to-clipboard";
 38 | import Loader from "@/components/loader";
 39 | import Empty from "@/components/empty";
 40 | 
 41 | 
 42 | export default function EmailGeneratorPage() {
 43 |   const router = useRouter();
 44 |   const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);
 45 | 
 46 |   const form = useForm<z.infer<typeof formSchema>>({
 47 |     resolver: zodResolver(formSchema),
 48 |     defaultValues: {
 49 |       message: "",
 50 |       words: "500",
 51 |       languages: "English",
 52 |       tone: "Formal",
 53 |       purpose : "a greeting"
 54 |     },
 55 |   });
 56 | 
 57 |   const isLoading = form.formState.isSubmitting;
 58 | 
 59 |   const onSubmit = async (values: z.infer<typeof formSchema>) => {
 60 |     try {
 61 |       setMessages([]);
 62 |       const email =
 63 |         "Generate an email about " + values.purpose + " with the message " +
 64 |         values.message +
 65 |         " words limit " +
 66 |         values.words +
 67 |         " language " +
 68 |         values.languages +
 69 |         " voice tone " +
 70 |         values.tone;
 71 |       const userMessage: ChatCompletionRequestMessage = {
 72 |         // @ts-ignore
 73 |         role: "user",
 74 |         content: email,
 75 |       };
 76 |       const newEmail = [userMessage];
 77 | 
 78 |       const response = await axios.post("/api/emailgenerator", {
 79 |         messages: newEmail,
 80 |       });
 81 |       
 82 |       
 83 |       setMessages(response.data);
 84 | 
 85 |       form.reset();
 86 |     } catch (error: any) {
 87 |     } finally {
 88 |       router.refresh();
 89 |     }
 90 |   };
 91 | 
 92 |   const copyToClipboard = () => {
 93 |     // @ts-ignore
 94 |     if (messages.content) {
 95 |       // @ts-ignore
 96 |       copy(messages.content);
 97 |     }
 98 | 
 99 |     toast.success("Copied");
100 |   };
101 | 
102 |   return (
103 |     <div>
104 |       <Heading
105 |         title="Email Generator"
106 |         description=""
107 |         icon={Mail}
108 |         iconColor="text-green-500"
109 |         bgColor="bg-green-500/10"
110 |       />
111 |       <div className="p-8 flex sm:flex-row flex-col sm:gap-x-6">
112 |         <div className="sm:w-1/2 w-full">
113 |           <Card>
114 |             <CardHeader>
115 |               <div className="flex items-center space-x-4">
116 |                 <Avatar className="h-8 w-8" />
117 |                 <h2 className="text-2xl font-bold">Compose the perfect email</h2>
118 |               </div>
119 |             </CardHeader>
120 |             <CardContent className="space-y-4">
121 |               <Form {...form}>
122 |                 <form onSubmit={form.handleSubmit(onSubmit)} className="">
123 |                   <div className="space-y-2">
124 |                     <Label htmlFor="message">Message</Label>
125 | 
126 |                     <FormField
127 |                       name="message"
128 |                       render={({ field }) => (
129 |                         <FormItem className="col-span-12 lg:col-span-6">
130 |                           <FormControl className="m-0 p-0">
131 |                             <Textarea
132 |                               className="min-h-[150px]"
133 |                               disabled={isLoading}
134 |                               placeholder="Provide a brief description of your email"
135 |                               {...field}
136 |                             />
137 |                           </FormControl>
138 |                         </FormItem>
139 |                       )}
140 |                     />
141 |                   </div>
142 |                   <div className="grid grid-cols-1 gap-4">
143 |                     <div className="space-y-2">
144 |                       <Label htmlFor="words">Length</Label>
145 |                       <FormField
146 |                         name="words"
147 |                         render={({ field }) => (
148 |                           <FormItem className="">
149 |                             <Select
150 |                               disabled={isLoading}
151 |                               onValueChange={field.onChange}
152 |                               value={field.value}
153 |                               defaultValue={field.value}
154 |                             >
155 |                               <FormControl>
156 |                                 <SelectTrigger>
157 |                                   <SelectValue defaultValue={field.value} />
158 |                                 </SelectTrigger>
159 |                               </FormControl>
160 |                               <SelectContent>
161 |                                 {Wordsptions.map((option) => (
162 |                                   <SelectItem
163 |                                     key={option.value}
164 |                                     value={option.value}
165 |                                   >
166 |                                     {option.label}
167 |                                   </SelectItem>
168 |                                 ))}
169 |                               </SelectContent>
170 |                             </Select>
171 |                           </FormItem>
172 |                         )}
173 |                       />
174 |                     </div>
175 |                     <div className="space-y-2">
176 |                       <Label htmlFor="voice-tone">Voice Tone</Label>
177 |                       <FormField
178 |                         name="tone"
179 |                         render={({ field }) => (
180 |                           <FormItem className="">
181 |                             <Select
182 |                               disabled={isLoading}
183 |                               onValueChange={field.onChange}
184 |                               value={field.value}
185 |                               defaultValue={field.value}
186 |                             >
187 |                               <FormControl>
188 |                                 <SelectTrigger>
189 |                                   <SelectValue defaultValue={field.value} />
190 |                                 </SelectTrigger>
191 |                               </FormControl>
192 |                               <SelectContent>
193 |                                 {voiceOptions.map((option) => (
194 |                                   <SelectItem
195 |                                     key={option.value}
196 |                                     value={option.value}
197 |                                   >
198 |                                     {option.label}
199 |                                   </SelectItem>
200 |                                 ))}
201 |                               </SelectContent>
202 |                             </Select>
203 |                           </FormItem>
204 |                         )}
205 |                       />
206 |                     </div>
207 |                     <div className="space-y-2">
208 |                       <Label htmlFor="language">Language</Label>
209 |                       <FormField
210 |                         name="languages"
211 |                         render={({ field }) => (
212 |                           <FormItem className="">
213 |                             <Select
214 |                               disabled={isLoading}
215 |                               onValueChange={field.onChange}
216 |                               value={field.value}
217 |                               defaultValue={field.value}
218 |                             >
219 |                               <FormControl>
220 |                                 <SelectTrigger>
221 |                                   <SelectValue defaultValue={field.value} />
222 |                                 </SelectTrigger>
223 |                               </FormControl>
224 |                               <SelectContent>
225 |                                 {languageOptions.map((option) => (
226 |                                   <SelectItem
227 |                                     key={option.value}
228 |                                     value={option.value}
229 |                                   >
230 |                                     {option.label}
231 |                                   </SelectItem>
232 |                                 ))}
233 |                               </SelectContent>
234 |                             </Select>
235 |                           </FormItem>
236 |                         )}
237 |                       />
238 |                     </div>
239 |                     <div className="space-y-2">
240 |                       <Label htmlFor="purpose">Purpose</Label>
241 |                       <FormField
242 |                         name="purpose"
243 |                         render={({ field }) => (
244 |                           <FormItem className="">
245 |                             <Select
246 |                               disabled={isLoading}
247 |                               onValueChange={field.onChange}
248 |                               value={field.value}
249 |                               defaultValue={field.value}
250 |                             >
251 |                               <FormControl>
252 |                                 <SelectTrigger>
253 |                                   <SelectValue defaultValue={field.value} />
254 |                                 </SelectTrigger>
255 |                               </FormControl>
256 |                               <SelectContent>
257 |                                 {PurposeOptions.map((option) => (
258 |                                   <SelectItem
259 |                                     key={option.value}
260 |                                     value={option.value}
261 |                                   >
262 |                                     {option.label}
263 |                                   </SelectItem>
264 |                                 ))}
265 |                               </SelectContent>
266 |                             </Select>
267 |                           </FormItem>
268 |                         )}
269 |                       />
270 |                     </div>
271 |                   </div>
272 |                   <div className="py-4">
273 |                     <Button disabled={isLoading} className="w-full">
274 |                       Generate
275 |                     </Button>
276 |                   </div>
277 |                 </form>
278 |               </Form>
279 |             </CardContent>
280 |           </Card>
281 |         </div>
282 | 
283 |         <div className="sm:w-1/2 w-full space-y-4 mt-4 relative bg-gray-200 h-full rounded-lg p-8 overflow-auto">
284 |           {isLoading && (
285 |             <div className="p-8 rounded-lg w-full flex items-center justifiy-center bg-muted">
286 |               <Loader />
287 |             </div>
288 |           )}
289 |           {messages.length === 0 && !isLoading && (
290 |             <div>
291 |               <Empty label="No email" />
292 |             </div>
293 |           )}
294 |           <div className="flex  flex-col-reverse gap-y-4">
295 |           
296 |           <ReactMarkdown
297 |            className="text-sm overflow-hidden leading-7 flex flex-col">
298 | 
299 | {// @ts-ignore 
300 | messages.content || ""}
301 |           </ReactMarkdown>
302 |            
303 |               
304 |               
305 |            
306 |             <div className="absolute bottom-0.5  float-right right-5">
307 |               <button onClick={copyToClipboard}>
308 |                 <ClipboardCopy className="opacity-70 w-6 h-6" />
309 |               </button>
310 |             </div>
311 |           </div>
312 |         </div>
313 |       </div>
314 |     </div>
315 |   );
316 | }
317 | 


--------------------------------------------------------------------------------
/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 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 7 | import Link from "next/link";
 8 | 
 9 | export default async function SettingsPage() {
10 |   const isPro = await checkSubscription();
11 | 
12 |   return ( 
13 |     <div>
14 |       <Heading
15 |         title="Settings"
16 |         description="Manage account settings."
17 |         icon={Settings}
18 |         iconColor="text-gray-700"
19 |         bgColor="bg-gray-700/10"
20 |       />
21 |       <div className="px-4 lg:px-8 space-y-4">
22 |         <div className="text-muted-foreground text-sm">
23 |           
24 |         </div>
25 |        
26 |       </div>
27 |       <main className="p-6 flex flex-col gap-8">
28 |         <Card className="p-4">
29 |           <CardHeader>
30 |             <CardTitle className="text-lg font-semibold">Current Plan</CardTitle>
31 |           </CardHeader>
32 |           <CardContent className="flex flex-col gap-2 text-sm">
33 |             <div className="font-medium">{isPro ? "Pro plan." : "Free plan."}</div>
34 |             <ul className="list-disc list-inside space-y-1">
35 |               <li>Total messages: 1500</li>
36 |               <li>24/7 customer support</li>
37 |               <li>Free updates and upgrades</li>
38 |             </ul>
39 |             <div className="mt-2 font-medium">
40 |               Subscription Cost: <span className="text-green-600">$5/month</span>
41 |             </div>
42 |             <div className="mt-2 font-medium">
43 |             <SubscriptionButton isPro={isPro} />
44 |             </div>
45 | 
46 |           </CardContent>
47 |         </Card>
48 |      
49 |       </main>
50 | 
51 |     </div>
52 |    );
53 | }
54 |  
55 | 
56 | 


--------------------------------------------------------------------------------
/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 | export default async function DashboardLayout({
 7 |   children,
 8 | }: {
 9 |   children: React.ReactNode;
10 | }) {
11 |   const apiLimitCount = await getApiLimitCount();
12 |   const isPro = await checkSubscription();
13 |   return (
14 |     <div className="h-sfull relative">
15 |       <div className="hidden h-full md:flex md:flex-col md:fixed md:w-64 md:inset-y-0 z-[80] bg-gray-900">
16 |         <Sidebar isPro={isPro} apiLimitCount={apiLimitCount} />
17 |       </div>
18 |       <main className="md:pl-72">
19 |         <Navbar />
20 |         {children}
21 |       </main>
22 |     </div>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/app/(landing)/layout.tsx:
--------------------------------------------------------------------------------
 1 | const LandingLayout = ({
 2 |     children
 3 |   }: {
 4 |     children: React.ReactNode;
 5 |   }) => {
 6 |     return (
 7 |       <main className="h-full  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;


--------------------------------------------------------------------------------
/app/(landing)/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Features } from "@/components/features";
 2 | import { Footer } from "@/components/footer";
 3 | import HeroSection from "@/components/hero";
 4 | import { LandingNavbar } from "@/components/navbar-landing";
 5 | 
 6 | 
 7 | 
 8 | export default function HomePage(){
 9 |     return(<div>
10 |         <LandingNavbar/>
11 |         <HeroSection/>
12 |         <Features/>
13 |         <Footer/>
14 | 
15 |     </div>)
16 | }


--------------------------------------------------------------------------------
/app/api/emailgenerator/route.ts:
--------------------------------------------------------------------------------
 1 | import { auth } from "@clerk/nextjs";
 2 | import { NextResponse } from "next/server";
 3 | import OpenAI from "openai";
 4 | import { ChatCompletionMessageParam } from "openai/resources/index.mjs";
 5 | import { increaseApiLimit, checkApiLimit } from "@/lib/api-limit";
 6 | import { checkSubscription } from "@/lib/subscription";
 7 | 
 8 | const openai = new OpenAI({
 9 |   apiKey: process.env.OPENAI_API_KEY,
10 | });
11 | 
12 | const instructionMessage: ChatCompletionMessageParam = {
13 |     role: "system",
14 |     content : "You are a professional writer and you will help me to write emails."
15 | }
16 | 
17 | 
18 | export async function POST(req: Request) {
19 |   try {
20 |     const { userId } = auth();
21 |     const body = await req.json();
22 |     const { messages } = body;
23 | 
24 |     if (!userId) {
25 |       return new NextResponse("Unauthorized", { status: 401 });
26 |     }
27 | 
28 |     if (!openai.apiKey) {
29 |       return new NextResponse("OpenAI API Key not configured", { status: 500 });
30 |     }
31 |     if (!messages) {
32 |       return new NextResponse("Message are required", { status: 400 });
33 |     }
34 |     const freeTrial = await checkApiLimit();
35 |     const isPro = await checkSubscription();
36 | 
37 |     if (!freeTrial && !isPro) {
38 |       return new NextResponse("Free trial has expired", { status: 403 });
39 |     }
40 | 
41 |     const response = await openai.chat.completions.create({
42 |         model : "gpt-3.5-turbo-1106",
43 |         messages : [instructionMessage,...messages]
44 |     });
45 | 
46 |     if (!isPro) {
47 |       await increaseApiLimit();
48 |     }
49 | 
50 |     return NextResponse.json(response.choices[0].message);
51 |   } catch (error) {
52 |     console.log("[EMAIL_ERROR]", error);
53 |     return new NextResponse("Internal Error", { status: 500 });
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/app/api/lemon/route.ts:
--------------------------------------------------------------------------------
  1 | import { auth, currentUser } from "@clerk/nextjs";
  2 | import { NextResponse } from "next/server";
  3 | import prismadb from "@/lib/prismadb";
  4 | import { lemon } from "@/lib/lemon";
  5 | import { absoluteUrl } from "@/lib/utils";
  6 | // @ts-ignore
  7 | import { CreateCheckoutResult } from "lemonsqueezy.ts/dist/types";
  8 | import axios from "axios";
  9 | 
 10 | const settingsUrl = absoluteUrl("/settings");
 11 | 
 12 | export type CreateCheckoutResponse = {
 13 |   checkoutURL: string;
 14 | };
 15 | 
 16 | export async function GET() {
 17 |   try {
 18 |     const { userId } = auth();
 19 |     const user = await currentUser();
 20 | 
 21 |     if (!userId || !user) {
 22 |       return new NextResponse("Unauthorized", { status: 401 });
 23 |     }
 24 | 
 25 |     const userSubscription = await prismadb.userSubscription.findUnique({
 26 |       where: {
 27 |         userId,
 28 |       },
 29 |     });
 30 | 
 31 |     if (userSubscription && userSubscription.lemonCustomerId) {
 32 |       const lemonSession = await axios.get(
 33 |         `https://api.lemonsqueezy.com/v1/subscriptions/${userSubscription.lemonSubscriptionId}`,
 34 |         {
 35 |           headers: {
 36 |             Authorization: `Bearer ${process.env.LEMON_SQUEEZY_API_KEY}`,
 37 |             Accept: "application/vnd.api+json",
 38 |             "Content-Type": "application/vnd.api+json",
 39 |           },
 40 |         }
 41 |       );
 42 |       return new NextResponse(
 43 |         JSON.stringify({
 44 |           url: lemonSession.data.data.attributes.urls.customer_portal,
 45 |         })
 46 |       );
 47 |     }
 48 | 
 49 |     const variant = (
 50 |       await lemon.listAllVariants({
 51 |         productId: process.env.LEMONS_SQUEEZY_PRODUCT_ID,
 52 |       })
 53 |     ).data[0];
 54 | 
 55 |     const checkout = (await axios
 56 |       .post(
 57 |         "https://api.lemonsqueezy.com/v1/checkouts",
 58 |         {
 59 |           data: {
 60 |             type: "checkouts",
 61 |             attributes: {
 62 |               checkout_data: {
 63 |                 email: user.emailAddresses[0].emailAddress,
 64 |                 custom: [userId],
 65 |               },
 66 |               product_options: {
 67 |                 redirect_url: settingsUrl,
 68 |               },
 69 |             },
 70 |             relationships: {
 71 |               store: {
 72 |                 data: { type: "stores", id: process.env.LEMONSQUEEZY_STORE_ID },
 73 |               },
 74 |               variant: { data: { type: "variants", id: variant.id } },
 75 |             },
 76 |           },
 77 |         },
 78 |         {
 79 |           headers: {
 80 |             Authorization: `Bearer ${process.env.LEMON_SQUEEZY_API_KEY}`,
 81 |             Accept: "application/vnd.api+json",
 82 |             "Content-Type": "application/vnd.api+json",
 83 |           },
 84 |         }
 85 |       )
 86 |       .catch((error) => {
 87 |         if (error.response) {
 88 |           console.log(error.response);
 89 |         }
 90 |       })) as CreateCheckoutResult;
 91 | 
 92 |     return new NextResponse(
 93 |       JSON.stringify({ url: checkout.data.data.attributes.url })
 94 |     );
 95 |   } catch (error) {
 96 |     console.log("[LEMON_ERROR]", error);
 97 |     return new NextResponse("Internal Error", { status: 500 });
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/app/api/webhook/route.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | import { headers } from "next/headers"
  3 | import { NextResponse } from "next/server"
  4 | import { Buffer } from "buffer";
  5 | import crypto from "crypto";
  6 | import prismadb from "@/lib/prismadb"
  7 | import { lemon } from "@/lib/lemon"
  8 | import rawBody from "raw-body";
  9 | import { Readable } from "stream";
 10 | 
 11 | 
 12 | 
 13 | 
 14 | export async function POST(req: Request) {
 15 |     const body = await rawBody(Readable.from(Buffer.from(await req.text())));
 16 |     const headersList = headers();
 17 |     const payload = JSON.parse(body.toString());
 18 |     const sigString = headersList.get("x-signature");
 19 |     const secret = process.env.LEMONS_SQUEEZY_SIGNATURE_SECRET as string;
 20 |     const hmac = crypto.createHmac("sha256", secret);
 21 |     const digest = Buffer.from(hmac.update(body).digest("hex"), "utf8");
 22 |     const signature = Buffer.from(
 23 |       Array.isArray(sigString) ? sigString.join("") : sigString || "",
 24 |       "utf8"
 25 |     );
 26 | 
 27 |   
 28 |   if (
 29 |     parseInt(payload.data.attributes.product_id) !==
 30 |     parseInt(process.env.LEMONS_SQUEEZY_PRODUCT_ID as string)
 31 |   ) {
 32 |     return NextResponse.json({ message: "Invalid product" }, { status: 403 });
 33 |   }
 34 | 
 35 |   
 36 |   if (!crypto.timingSafeEqual(digest, signature)) {
 37 |     return NextResponse.json({ message: "Invalid signature" }, { status: 403 });
 38 |   }
 39 | 
 40 |   const userId = payload.meta.custom_data[0];
 41 | 
 42 |   
 43 |   if (!userId) {
 44 |     return NextResponse.json({ message: "No userId provided" }, { status: 403 });
 45 |   }
 46 | 
 47 | 
 48 | 
 49 | 
 50 |    if (payload.meta.event_name === "subscription_created") {
 51 |     const subscription = await lemon.retrieveSubscription({ id: payload.data.id });
 52 | 
 53 | 
 54 | 
 55 |     await prismadb.userSubscription.create({
 56 |       data: {
 57 |         userId: userId,
 58 |         lemonSubscriptionId: `${subscription.data?.id}`,
 59 |         lemonCustomerId: `${payload.data?.attributes.customer_id}`,
 60 |         lemonVariantId: `${subscription.data.attributes.variant_id}`,
 61 |         lemonCurrentPeriodEnd: new Date(
 62 |             subscription.data?.attributes.renews_at
 63 |         ),
 64 |         lemonSubscriptionStatus : `${subscription.data.attributes.status}`
 65 |       }
 66 |     })
 67 |   } 
 68 | 
 69 |   if (payload.meta.event_name === "subscription_updated") {
 70 |     const subscription = await lemon.retrieveSubscription({ id: payload.data.id });
 71 |     
 72 | 
 73 |     await prismadb.userSubscription.update({
 74 |       where: {
 75 |         lemonSubscriptionId:`${subscription.data.id}`,
 76 |       },
 77 |       data: {
 78 |         lemonVariantId: `${subscription.data.attributes.variant_id}`,
 79 |         lemonCurrentPeriodEnd: new Date(
 80 |             subscription.data.attributes.renews_at
 81 |         ),
 82 |         lemonSubscriptionStatus : `${subscription.data.attributes.status}`
 83 |       },
 84 |     })
 85 |   } 
 86 |   if (payload.meta.event_name === "subscription_cancelled") {
 87 |     const subscription = await lemon.retrieveSubscription({ id: payload.data.id });
 88 |     
 89 | 
 90 |     await prismadb.userSubscription.update({
 91 |       where: {
 92 |         lemonSubscriptionId:`${subscription.data.id}`,
 93 |       },
 94 |       data: {
 95 |         lemonVariantId: `${subscription.data.attributes.variant_id}`,
 96 |         lemonCurrentPeriodEnd: new Date(
 97 |             subscription.data.attributes.renews_at
 98 |         ),
 99 |         lemonSubscriptionStatus : `${subscription.data.attributes.status}`
100 |       },
101 |     })
102 |   } 
103 |   if (payload.meta.event_name === "subscription_paused") {
104 |     const subscription = await lemon.retrieveSubscription({ id: payload.data.id });
105 |     
106 | 
107 |     await prismadb.userSubscription.update({
108 |       where: {
109 |         lemonSubscriptionId:`${subscription.data.id}`,
110 |       },
111 |       data: {
112 |         lemonVariantId: `${subscription.data.attributes.variant_id}`,
113 |         lemonCurrentPeriodEnd: new Date(
114 |             subscription.data.attributes.renews_at
115 |         ),
116 |         lemonSubscriptionStatus : `${subscription.data.attributes.status}`
117 |       },
118 |     })
119 |   } 
120 |   if (payload.meta.event_name === "subscription_resumed") {
121 |     const subscription = await lemon.retrieveSubscription({ id: payload.data.id });
122 |     
123 | 
124 |     await prismadb.userSubscription.update({
125 |       where: {
126 |         lemonSubscriptionId:`${subscription.data.id}`,
127 |       },
128 |       data: {
129 |         lemonVariantId: `${subscription.data.attributes.variant_id}`,
130 |         lemonCurrentPeriodEnd: new Date(
131 |             subscription.data.attributes.renews_at
132 |         ),
133 |         lemonSubscriptionStatus : `${subscription.data.attributes.status}`
134 |       },
135 |     })
136 |   } 
137 |   if (payload.meta.event_name === "subscription_unpaused") {
138 |     const subscription = await lemon.retrieveSubscription({ id: payload.data.id });
139 |     
140 | 
141 |     await prismadb.userSubscription.update({
142 |       where: {
143 |         lemonSubscriptionId:`${subscription.data.id}`,
144 |       },
145 |       data: {
146 |         lemonVariantId: `${subscription.data.attributes.variant_id}`,
147 |         lemonCurrentPeriodEnd: new Date(
148 |             subscription.data.attributes.renews_at
149 |         ),
150 |         lemonSubscriptionStatus : `${subscription.data.attributes.status}`
151 |       },
152 |     })
153 |   } 
154 |   if (payload.meta.event_name === "subscription_expired") {
155 |     const subscription = await lemon.retrieveSubscription({ id: payload.data.id });
156 |     
157 |     await prismadb.userSubscription.update({
158 |       where: {
159 |         lemonSubscriptionId:`${subscription.data.id}`,
160 |       },
161 |       data: {
162 |         lemonVariantId: `${subscription.data.attributes.variant_id}`,
163 |         lemonCurrentPeriodEnd: new Date(
164 |             subscription.data.attributes.renews_at
165 |         ),
166 |         lemonSubscriptionStatus : `${subscription.data.attributes.status}`
167 |       },
168 |     })
169 | 
170 |  
171 |   } 
172 | 
173 |   return new NextResponse(null, { status: 200 })
174 | };


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m121/emailgenerator/15082779bbb0d23786503e1b1c1035f43726bcfc/app/favicon.ico


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


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from 'next'
 2 | import { Inter } from 'next/font/google'
 3 | import './globals.css'
 4 | import { ClerkProvider } from '@clerk/nextjs'
 5 | import { ToasterProvider } from '@/components/toaster-provider'
 6 | import ModalProvider from '@/components/modal-provider'
 7 | 
 8 | const inter = Inter({ subsets: ['latin'] })
 9 | 
10 | export const metadata: Metadata = {
11 |   title: 'Email Generator',
12 |   description: 'Email Generator',
13 | }
14 | 
15 | export default function RootLayout({
16 |   children,
17 | }: {
18 |   children: React.ReactNode
19 | }) {
20 |   return (
21 |     <ClerkProvider>
22 |     <html lang="en">
23 |       <body className={inter.className}>
24 |       <ModalProvider />
25 |       <ToasterProvider/>
26 |         {children}</body>
27 |     </html>
28 |     </ClerkProvider>
29 |   )
30 | }


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


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


--------------------------------------------------------------------------------
/components/features.tsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent, CardHeader } from "./ui/card"
 2 | 
 3 | export const Features = () =>{
 4 |     return (<div className="py-4 sm:py-16">
 5 |          <section>
 6 |           <h2 className="text-3xl font-bold text-center py-4 text-gray-800">Key Features</h2>
 7 |           <div className="grid gap-6 md:grid-cols-3 sm:mt-8 mt-4">
 8 |             <Card>
 9 |               
10 |               <CardContent>
11 |                 <p className="text-lg text-gray-500 text-center py-16">
12 |                Effortlessly compose diverse emails that resonate with customers, connect with family, and engage friends, all with ease
13 |                 </p>
14 |               </CardContent>
15 |             </Card>
16 |             <Card>
17 |              
18 |               <CardContent>
19 |                 <p className="text-lg text-gray-500 text-center py-16">
20 |                 Respond to any business email in any language and tone, showcasing adaptability and enhancing connections.
21 |                 </p>
22 |               </CardContent>
23 |             </Card>
24 |             <Card>
25 |               
26 |               <CardContent>
27 |                 <p className="text-lg text-gray-500 py-16 text-center">
28 |                 Refines grammar in any email, ensuring polished communication before you hit send.
29 |                 </p>
30 |               </CardContent>
31 |             </Card>
32 |           </div>
33 |         </section>
34 |     </div>)
35 | }


--------------------------------------------------------------------------------
/components/footer.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image"
 2 | 
 3 | export const Footer = () => {
 4 | return (<div>
 5 |     <footer className="text-gray-600 body-font">
 6 |   <div className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
 7 |     <a className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
 8 |       <div className="relative w-14 h-14  mr-4">
 9 |       <Image src="/logo.png" fill alt="logo" />
10 | 
11 |       </div>
12 |      
13 |     </a>
14 |     <p className="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">© 2024 Made by
15 |       <a href="https://github.com/m121" className="text-gray-600 ml-1" rel="noopener noreferrer" target="_blank">@m121</a>
16 |     </p>
17 |     <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
18 |       <a className="text-gray-500">
19 |         <svg fill="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-5 h-5" viewBox="0 0 24 24">
20 |           <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
21 |         </svg>
22 |       </a>
23 |       <a className="ml-3 text-gray-500">
24 |         <svg fill="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-5 h-5" viewBox="0 0 24 24">
25 |           <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
26 |         </svg>
27 |       </a>
28 |       <a className="ml-3 text-gray-500">
29 |         <svg fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-5 h-5" viewBox="0 0 24 24">
30 |           <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
31 |           <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
32 |         </svg>
33 |       </a>
34 |       <a className="ml-3 text-gray-500">
35 |         <svg fill="currentColor" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0" className="w-5 h-5" viewBox="0 0 24 24">
36 |           <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
37 |           <circle cx="4" cy="4" r="2" stroke="none"></circle>
38 |         </svg>
39 |       </a>
40 |     </span>
41 |   </div>
42 | </footer>
43 | </div>)
44 | }


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


--------------------------------------------------------------------------------
/components/heading.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | 
 3 | import { LucideIcon } from "lucide-react";
 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>
23 |         <div className="px-4 lg:px-8 flex items-center gap-x-3 mb-8">
24 |          
25 |           <div>
26 |             <h2 className="text-3xl font-bold">{title}</h2>
27 |             <p className="text-sm text-muted-foreground">{description}</p>
28 |           </div>
29 |         </div>
30 |       </div>
31 |     </>
32 |   );
33 | };
34 | 


--------------------------------------------------------------------------------
/components/hero.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { Button } from "./ui/button";
 3 | 
 4 | export default function HeroSection(){
 5 |     return (<div>
 6 |     
 7 | <section className="text-gray-600 body-font">
 8 |   <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
 9 |     <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start text-center sm:text-left mb-16 md:mb-0 items-center ">
10 |     <h1 className="title-font sm:text-7xl text-4xl mb-2 font-light  text-gray-800 text-center sm:text-left">Don't get stuck writing 
11 | <span className="font-black"> emails anymore.</span> <br/> 
12 |       </h1>
13 |       <p className="mb-8 leading-relaxed text-xl sm:text-2xl text-gray-500 "> We boost your email writing productivity by 90% with AI Email Generator.</p>
14 |                 <div className="flex justify-center">
15 |         <Button ><Link href="/sign-up">Get Started</Link></Button>
16 |         
17 |         
18 |       </div>
19 |     </div>
20 |     <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
21 |     <div style={{position: "relative", paddingBottom: "56.25%", height: "0"}}><iframe src="https://www.loom.com/embed/f74b5ccd35634a0a8ce7cc0ad9b827ff?sid=acc5e9ca-4f31-4a05-a24d-f41ebebe79a1" frameBorder="0" allowFullScreen  style={{position: "absolute", top: "0", left: "0", width: "100%", height: "100%"}}></iframe></div>
22 |     </div>
23 |   </div>
24 | </section>
25 |     </div>)
26 | }


--------------------------------------------------------------------------------
/components/loader.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image"
 2 | 
 3 | 
 4 | export default function Loader(){
 5 |     return (<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="loading"
 9 |             fill
10 |             src="/loading.png"
11 |             />
12 | 
13 | 
14 |         </div>
15 |         <p className="text-sm text-muted-foreground">Generating</p>
16 | 
17 |     </div>)
18 | }


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


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


--------------------------------------------------------------------------------
/components/navbar-landing.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 { Button } from "@/components/ui/button";
 9 | 
10 | const font = Montserrat({ weight: '600', subsets: ['latin'] });
11 | 
12 | export const LandingNavbar = () => {
13 |   const { isSignedIn } = useAuth();
14 | 
15 |   return (
16 |     <nav className="p-4 bg-transparent flex items-center justify-between">
17 |       <Link href="/" className="flex items-center">
18 |         <div className="relative w-14 h-14  mr-4">
19 |           <Image fill alt="Logo" src="/logo.png" />
20 |         </div>
21 |         <h1 className="text-2xl font-bold text-white">
22 |           Email Generator
23 |         </h1>
24 |       </Link>
25 |       <div className="flex items-center gap-x-2">
26 |         <Link href={isSignedIn ? "/email-generator" : "/sign-up"}>
27 |         <Button >Get Started</Button>
28 |         </Link>
29 |       </div>
30 |     </nav>
31 |   )
32 | }


--------------------------------------------------------------------------------
/components/navbar.tsx:
--------------------------------------------------------------------------------
 1 | import { UserButton } from "@clerk/nextjs";
 2 | 
 3 | import MobileSidebar from "@/components/mobile-sidebar";
 4 | import { getApiLimitCount } from "@/lib/api-limit";
 5 | import { checkSubscription } from "@/lib/subscription";
 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 isPro={isPro} apiLimitCount={apiLimitCount} />
13 |       <div className="flex w-full justify-end">
14 |         <UserButton afterSignOutUrl="/" />
15 |       </div>
16 |     </div>
17 |   );
18 | };
19 | 
20 | export default Navbar;
21 | 


--------------------------------------------------------------------------------
/components/pro-modal.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import axios from "axios";
 4 | import { useState } from "react";
 5 | import { Check, Zap } from "lucide-react";
 6 | import { toast } from "react-hot-toast";
 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 "@/constants";
20 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
21 | import { cn } from "@/lib/utils";
22 | 
23 | 
24 | export const ProModal = () => {
25 |   const proModal = useProModal();
26 |   const [loading, setLoading] = useState(false);
27 | 
28 |   const onSubscribe = async () => {
29 |     try {
30 |       setLoading(true);
31 |       const  response  = await axios.get("/api/lemon")
32 |     
33 | 
34 |       window.location.href = response.data.url;
35 |     } catch (error) {
36 |       toast.error("Something went wrong");
37 |     } finally {
38 |       setLoading(false);
39 |     }
40 |   }
41 | 
42 |   return (
43 |     <Dialog open={proModal.isOpen} onOpenChange={proModal.onClose}>
44 |       <DialogContent>
45 |         <DialogHeader>
46 |           <DialogTitle className="flex justify-center items-center flex-col gap-y-4 pb-2">
47 |             <div className="flex items-center gap-x-2 font-bold text-xl">
48 |               Upgrade to 
49 |               <Badge  className="uppercase text-sm py-1">
50 |                 pro
51 |               </Badge>
52 |             </div>
53 |           </DialogTitle>
54 |           <DialogDescription className="text-center pt-2 space-y-2 text-zinc-900 font-medium">
55 |           <Card className="p-4">
56 |           <CardHeader>
57 |             <CardTitle className="text-lg font-semibold">Pro plan</CardTitle>
58 |           </CardHeader>
59 |           <CardContent className="flex flex-col gap-2 text-sm">
60 |             <div className="font-medium"></div>
61 |             <ul className="list-disc list-inside space-y-1">
62 |               <li>Total messages: 1500</li>
63 |               <li>24/7 customer support</li>
64 |               <li>Free updates and upgrades</li>
65 |             </ul>
66 |             <div className="mt-2 font-medium">
67 |               Subscription Cost: <span className="text-green-600">$5/month</span>
68 |             </div>
69 |             <div className="mt-2 font-medium">
70 |            
71 |             </div>
72 | 
73 |           </CardContent>
74 |         </Card>
75 |           </DialogDescription>
76 |         </DialogHeader>
77 |         <DialogFooter>
78 |           <Button disabled={loading} onClick={onSubscribe} size="lg" variant="premium" className="w-full">
79 |             Upgrade
80 |             <Zap className="w-4 h-4 ml-2 fill-white" />
81 |           </Button>
82 |         </DialogFooter>
83 |       </DialogContent>
84 |     </Dialog>
85 |   );
86 | };


--------------------------------------------------------------------------------
/components/sidebar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | import { LayoutDashboard, MessageSquare, Settings } from "lucide-react";
 5 | import Link from "next/link";
 6 | import { usePathname } from "next/navigation";
 7 | import FreeCounter from "./free-counter";
 8 | import Image from "next/image";
 9 | 
10 | const routes = [
11 |   
12 |   {
13 |     label: "Email generator",
14 |     icon: MessageSquare,
15 |     href: "/email-generator",
16 |   
17 |   },
18 | 
19 |   {
20 |     label: "Settings",
21 |     icon: Settings,
22 |     href: "/settings",
23 |   },
24 | ];
25 | 
26 | interface sidebarProps {
27 |   apiLimitCount: number;
28 |   isPro: boolean;
29 | }
30 | 
31 | const Sidebar = ({ apiLimitCount = 0, isPro = false }: sidebarProps) => {
32 |   const pathname = usePathname();
33 | 
34 |   return (
35 |     <div className="space-y-4 py-4 flex flex-col h-full bg-black text-white">
36 |       <div className="px-3 py-2 flex-1">
37 |         <Link href="/email-generator" className="flex items-center pl-3 mb-14">
38 |           <div className="relative h-10 w-10 mr-4">
39 |           <Image
40 |                 fill
41 |                 alt="Logo"
42 |                 src="/logo.png"
43 |                 />
44 |           </div>
45 |             <h1 className="text-lg font-bold">Generator</h1>
46 |         </Link>
47 |         <div className="space-y-1">
48 |           {routes.map((route) => (
49 |             <Link
50 |               href={route.href}
51 |               key={route.href}
52 |               className={cn(
53 |                 "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:text-white  hover:bg-gray-400/10  rounded-lg transition",
54 |                 pathname === route.href
55 |                   ? "text-white bg-green-400"
56 |                   : "text-zinc-400"
57 |               )}
58 |             >
59 |               <div className="flex items-center flex-1">
60 |                 <route.icon className={cn("h-5 w-5 mr-3")} />
61 |                 {route.label}
62 |               </div>
63 |             </Link>
64 |           ))}
65 |         </div>
66 |       </div>
67 |       <FreeCounter isPro={isPro} apiLimitCount={apiLimitCount} />
68 |     </div>
69 |   );
70 | };
71 | 
72 | export default Sidebar;
73 | 


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


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


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


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |         premium : "bg-gradient-to-r bg-green-400 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 | 


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


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


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


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


--------------------------------------------------------------------------------
/components/ui/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-sky-800 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/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, ChevronUp } 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 [&>span]:line-clamp-1",
 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 SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn(
 42 |       "flex cursor-default items-center justify-center py-1",
 43 |       className
 44 |     )}
 45 |     {...props}
 46 |   >
 47 |     <ChevronUp className="h-4 w-4" />
 48 |   </SelectPrimitive.ScrollUpButton>
 49 | ))
 50 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 51 | 
 52 | const SelectScrollDownButton = React.forwardRef<
 53 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 54 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 55 | >(({ className, ...props }, ref) => (
 56 |   <SelectPrimitive.ScrollDownButton
 57 |     ref={ref}
 58 |     className={cn(
 59 |       "flex cursor-default items-center justify-center py-1",
 60 |       className
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     <ChevronDown className="h-4 w-4" />
 65 |   </SelectPrimitive.ScrollDownButton>
 66 | ))
 67 | SelectScrollDownButton.displayName =
 68 |   SelectPrimitive.ScrollDownButton.displayName
 69 | 
 70 | const SelectContent = React.forwardRef<
 71 |   React.ElementRef<typeof SelectPrimitive.Content>,
 72 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 73 | >(({ className, children, position = "popper", ...props }, ref) => (
 74 |   <SelectPrimitive.Portal>
 75 |     <SelectPrimitive.Content
 76 |       ref={ref}
 77 |       className={cn(
 78 |         "relative z-50 max-h-96 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",
 79 |         position === "popper" &&
 80 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 81 |         className
 82 |       )}
 83 |       position={position}
 84 |       {...props}
 85 |     >
 86 |       <SelectScrollUpButton />
 87 |       <SelectPrimitive.Viewport
 88 |         className={cn(
 89 |           "p-1",
 90 |           position === "popper" &&
 91 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 92 |         )}
 93 |       >
 94 |         {children}
 95 |       </SelectPrimitive.Viewport>
 96 |       <SelectScrollDownButton />
 97 |     </SelectPrimitive.Content>
 98 |   </SelectPrimitive.Portal>
 99 | ))
100 | SelectContent.displayName = SelectPrimitive.Content.displayName
101 | 
102 | const SelectLabel = React.forwardRef<
103 |   React.ElementRef<typeof SelectPrimitive.Label>,
104 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
105 | >(({ className, ...props }, ref) => (
106 |   <SelectPrimitive.Label
107 |     ref={ref}
108 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
109 |     {...props}
110 |   />
111 | ))
112 | SelectLabel.displayName = SelectPrimitive.Label.displayName
113 | 
114 | const SelectItem = React.forwardRef<
115 |   React.ElementRef<typeof SelectPrimitive.Item>,
116 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
117 | >(({ className, children, ...props }, ref) => (
118 |   <SelectPrimitive.Item
119 |     ref={ref}
120 |     className={cn(
121 |       "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",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <SelectPrimitive.ItemIndicator>
128 |         <Check className="h-4 w-4" />
129 |       </SelectPrimitive.ItemIndicator>
130 |     </span>
131 | 
132 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
133 |   </SelectPrimitive.Item>
134 | ))
135 | SelectItem.displayName = SelectPrimitive.Item.displayName
136 | 
137 | const SelectSeparator = React.forwardRef<
138 |   React.ElementRef<typeof SelectPrimitive.Separator>,
139 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
140 | >(({ className, ...props }, ref) => (
141 |   <SelectPrimitive.Separator
142 |     ref={ref}
143 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
144 |     {...props}
145 |   />
146 | ))
147 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
148 | 
149 | export {
150 |   Select,
151 |   SelectGroup,
152 |   SelectValue,
153 |   SelectTrigger,
154 |   SelectContent,
155 |   SelectLabel,
156 |   SelectItem,
157 |   SelectSeparator,
158 |   SelectScrollUpButton,
159 |   SelectScrollDownButton,
160 | }
161 | 


--------------------------------------------------------------------------------
/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 = SheetPrimitive.Portal
 17 | 
 18 | const SheetOverlay = React.forwardRef<
 19 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 20 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 21 | >(({ className, ...props }, ref) => (
 22 |   <SheetPrimitive.Overlay
 23 |     className={cn(
 24 |       "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",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |     ref={ref}
 29 |   />
 30 | ))
 31 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 32 | 
 33 | const sheetVariants = cva(
 34 |   "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",
 35 |   {
 36 |     variants: {
 37 |       side: {
 38 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 39 |         bottom:
 40 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 41 |         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",
 42 |         right:
 43 |           "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",
 44 |       },
 45 |     },
 46 |     defaultVariants: {
 47 |       side: "right",
 48 |     },
 49 |   }
 50 | )
 51 | 
 52 | interface SheetContentProps
 53 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 54 |     VariantProps<typeof sheetVariants> {}
 55 | 
 56 | const SheetContent = React.forwardRef<
 57 |   React.ElementRef<typeof SheetPrimitive.Content>,
 58 |   SheetContentProps
 59 | >(({ side = "right", className, children, ...props }, ref) => (
 60 |   <SheetPortal>
 61 |     <SheetOverlay />
 62 |     <SheetPrimitive.Content
 63 |       ref={ref}
 64 |       className={cn(sheetVariants({ side }), className)}
 65 |       {...props}
 66 |     >
 67 |       {children}
 68 |       <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">
 69 |         <X className="h-4 w-4" />
 70 |         <span className="sr-only">Close</span>
 71 |       </SheetPrimitive.Close>
 72 |     </SheetPrimitive.Content>
 73 |   </SheetPortal>
 74 | ))
 75 | SheetContent.displayName = SheetPrimitive.Content.displayName
 76 | 
 77 | const SheetHeader = ({
 78 |   className,
 79 |   ...props
 80 | }: React.HTMLAttributes<HTMLDivElement>) => (
 81 |   <div
 82 |     className={cn(
 83 |       "flex flex-col space-y-2 text-center sm:text-left",
 84 |       className
 85 |     )}
 86 |     {...props}
 87 |   />
 88 | )
 89 | SheetHeader.displayName = "SheetHeader"
 90 | 
 91 | const SheetFooter = ({
 92 |   className,
 93 |   ...props
 94 | }: React.HTMLAttributes<HTMLDivElement>) => (
 95 |   <div
 96 |     className={cn(
 97 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 98 |       className
 99 |     )}
100 |     {...props}
101 |   />
102 | )
103 | SheetFooter.displayName = "SheetFooter"
104 | 
105 | const SheetTitle = React.forwardRef<
106 |   React.ElementRef<typeof SheetPrimitive.Title>,
107 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
108 | >(({ className, ...props }, ref) => (
109 |   <SheetPrimitive.Title
110 |     ref={ref}
111 |     className={cn("text-lg font-semibold text-foreground", className)}
112 |     {...props}
113 |   />
114 | ))
115 | SheetTitle.displayName = SheetPrimitive.Title.displayName
116 | 
117 | const SheetDescription = React.forwardRef<
118 |   React.ElementRef<typeof SheetPrimitive.Description>,
119 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
120 | >(({ className, ...props }, ref) => (
121 |   <SheetPrimitive.Description
122 |     ref={ref}
123 |     className={cn("text-sm text-muted-foreground", className)}
124 |     {...props}
125 |   />
126 | ))
127 | SheetDescription.displayName = SheetPrimitive.Description.displayName
128 | 
129 | export {
130 |   Sheet,
131 |   SheetPortal,
132 |   SheetOverlay,
133 |   SheetTrigger,
134 |   SheetClose,
135 |   SheetContent,
136 |   SheetHeader,
137 |   SheetFooter,
138 |   SheetTitle,
139 |   SheetDescription,
140 | }
141 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   }
21 | )
22 | Textarea.displayName = "Textarea"
23 | 
24 | export { Textarea }
25 | 


--------------------------------------------------------------------------------
/constants.ts:
--------------------------------------------------------------------------------
 1 | import { MessageSquare } from "lucide-react";
 2 | 
 3 | export const MAX_FREE_COUNTS = 5
 4 | 
 5 | export const tools = [
 6 |   
 7 |         {
 8 |             label : "Email generator",
 9 |             icon : MessageSquare,
10 |             href : "/email-generator",
11 |             color : "text-violet-500",
12 |             bgColor : "bg-violet-700"
13 |             },
14 | 
15 |   ];


--------------------------------------------------------------------------------
/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 | 
10 | export const useProModal = create<useProModalStore>((set)=> ({
11 |     isOpen : false,
12 |     onOpen: () => set({isOpen: true}),
13 |     onClose: () => set({isOpen : false})
14 |     
15 | }))


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


--------------------------------------------------------------------------------
/lib/lemon.ts:
--------------------------------------------------------------------------------
1 | 
2 | const LemonsqueezyClient = require("lemonsqueezy.ts").LemonsqueezyClient
3 | 
4 | export const lemon = new LemonsqueezyClient(process.env.LEMON_SQUEEZY_API_KEY)
5 | 


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


--------------------------------------------------------------------------------
/lib/subscription.ts:
--------------------------------------------------------------------------------
 1 | import { auth } from "@clerk/nextjs";
 2 | 
 3 | import prismadb from "@/lib/prismadb";
 4 | 
 5 | 
 6 | //One day grace period
 7 | const DAY_IN_MS = 86_400_000;
 8 | 
 9 | export const checkSubscription = async () => {
10 |   const { userId } = auth();
11 | 
12 |   if (!userId) {
13 |     return false;
14 |   }
15 | 
16 |   const userSubscription = await prismadb.userSubscription.findUnique({
17 |     where: {
18 |       userId: userId,
19 |     },
20 |     select: {
21 |       lemonSubscriptionId: true,
22 |       lemonCurrentPeriodEnd: true,
23 |       lemonCustomerId: true,
24 |       lemonVariantId: true,
25 |       lemonSubscriptionStatus : true
26 |     },
27 |   })
28 | 
29 |   if (!userSubscription) {
30 |     return false;
31 |   }
32 | 
33 |   if(userSubscription.lemonSubscriptionStatus === 'expired'){
34 |     return false;
35 |   }
36 |   if(userSubscription.lemonSubscriptionStatus === 'paused'){
37 |     return false;
38 |   }
39 | 
40 |   
41 | 
42 |   const isValid =
43 |     userSubscription.lemonVariantId &&
44 |     userSubscription.lemonCurrentPeriodEnd?.getTime()! + DAY_IN_MS > Date.now()
45 | 
46 |   return !!isValid;
47 | };


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


--------------------------------------------------------------------------------
/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/references/nextjs/auth-middleware for more information about configuring your Middleware
 6 | export default authMiddleware({
 7 |   publicRoutes : ["/", "/api/webhook"]
 8 | });
 9 |  
10 | export const config = {
11 |   matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
12 | };
13 |  


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 | 
4 | module.exports = nextConfig
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 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.27.5",
14 |     "@hookform/resolvers": "^3.3.2",
15 |     "@prisma/client": "^5.7.0",
16 |     "@radix-ui/react-avatar": "^1.0.4",
17 |     "@radix-ui/react-dialog": "^1.0.5",
18 |     "@radix-ui/react-label": "^2.0.2",
19 |     "@radix-ui/react-progress": "^1.0.3",
20 |     "@radix-ui/react-select": "^2.0.0",
21 |     "@radix-ui/react-slot": "^1.0.2",
22 |     "axios": "^1.6.2",
23 |     "class-variance-authority": "^0.7.0",
24 |     "clsx": "^2.0.0",
25 |     "copy-to-clipboard": "^3.3.3",
26 |     "lemonsqueezy.ts": "^0.1.7",
27 |     "lucide-react": "^0.294.0",
28 |     "next": "14.0.3",
29 |     "openai": "^4.20.1",
30 |     "prisma": "^5.7.0",
31 |     "raw-body": "^2.5.2",
32 |     "react": "^18",
33 |     "react-dom": "^18",
34 |     "react-hook-form": "^7.48.2",
35 |     "react-hot-toast": "^2.4.1",
36 |     "react-markdown": "^9.0.1",
37 |     "tailwind-merge": "^2.1.0",
38 |     "tailwindcss-animate": "^1.0.7",
39 |     "zod": "^3.22.4",
40 |     "zustand": "^4.4.7"
41 |   },
42 |   "devDependencies": {
43 |     "@types/node": "^20",
44 |     "@types/react": "^18",
45 |     "@types/react-dom": "^18",
46 |     "autoprefixer": "^10.0.1",
47 |     "eslint": "^8",
48 |     "eslint-config-next": "14.0.3",
49 |     "postcss": "^8",
50 |     "tailwindcss": "^3.3.0",
51 |     "typescript": "^5"
52 |   }
53 | }
54 | 


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


--------------------------------------------------------------------------------
/prisma/migrations/20231217152338_init/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "UserApiLimit" (
 3 |     "id" TEXT NOT NULL,
 4 |     "userId" TEXT NOT NULL,
 5 |     "count" INTEGER NOT NULL DEFAULT 0,
 6 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
 7 |     "updatedAt" TIMESTAMP(3) NOT NULL,
 8 | 
 9 |     CONSTRAINT "UserApiLimit_pkey" PRIMARY KEY ("id")
10 | );
11 | 
12 | -- CreateTable
13 | CREATE TABLE "UserSubscription" (
14 |     "id" TEXT NOT NULL,
15 |     "userId" TEXT NOT NULL,
16 |     "stripe_customer_id" TEXT,
17 |     "stripe_subscription_id" TEXT,
18 |     "stripe_price_id" TEXT,
19 |     "stripe_current_period_end" TIMESTAMP(3),
20 | 
21 |     CONSTRAINT "UserSubscription_pkey" PRIMARY KEY ("id")
22 | );
23 | 
24 | -- CreateIndex
25 | CREATE UNIQUE INDEX "UserApiLimit_userId_key" ON "UserApiLimit"("userId");
26 | 
27 | -- CreateIndex
28 | CREATE UNIQUE INDEX "UserSubscription_userId_key" ON "UserSubscription"("userId");
29 | 
30 | -- CreateIndex
31 | CREATE UNIQUE INDEX "UserSubscription_stripe_customer_id_key" ON "UserSubscription"("stripe_customer_id");
32 | 
33 | -- CreateIndex
34 | CREATE UNIQUE INDEX "UserSubscription_stripe_subscription_id_key" ON "UserSubscription"("stripe_subscription_id");
35 | 


--------------------------------------------------------------------------------
/prisma/migrations/20231217190716_init/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - You are about to drop the column `stripe_current_period_end` on the `UserSubscription` table. All the data in the column will be lost.
 5 |   - You are about to drop the column `stripe_customer_id` on the `UserSubscription` table. All the data in the column will be lost.
 6 |   - You are about to drop the column `stripe_price_id` on the `UserSubscription` table. All the data in the column will be lost.
 7 |   - You are about to drop the column `stripe_subscription_id` on the `UserSubscription` table. All the data in the column will be lost.
 8 |   - A unique constraint covering the columns `[lemon_customer_id]` on the table `UserSubscription` will be added. If there are existing duplicate values, this will fail.
 9 |   - A unique constraint covering the columns `[lemon_subscription_id]` on the table `UserSubscription` will be added. If there are existing duplicate values, this will fail.
10 |   - A unique constraint covering the columns `[orderId]` on the table `UserSubscription` will be added. If there are existing duplicate values, this will fail.
11 |   - Added the required column `orderId` to the `UserSubscription` table without a default value. This is not possible if the table is not empty.
12 |   - Added the required column `planId` to the `UserSubscription` table without a default value. This is not possible if the table is not empty.
13 | 
14 | */
15 | -- DropIndex
16 | DROP INDEX "UserSubscription_stripe_customer_id_key";
17 | 
18 | -- DropIndex
19 | DROP INDEX "UserSubscription_stripe_subscription_id_key";
20 | 
21 | -- AlterTable
22 | ALTER TABLE "UserSubscription" DROP COLUMN "stripe_current_period_end",
23 | DROP COLUMN "stripe_customer_id",
24 | DROP COLUMN "stripe_price_id",
25 | DROP COLUMN "stripe_subscription_id",
26 | ADD COLUMN     "lemon_current_period_end" TIMESTAMP(3),
27 | ADD COLUMN     "lemon_customer_id" TEXT,
28 | ADD COLUMN     "lemon_price_id" TEXT,
29 | ADD COLUMN     "lemon_subscription_id" TEXT,
30 | ADD COLUMN     "orderId" INTEGER NOT NULL,
31 | ADD COLUMN     "planId" INTEGER NOT NULL;
32 | 
33 | -- CreateTable
34 | CREATE TABLE "Plan" (
35 |     "id" SERIAL NOT NULL,
36 |     "productId" INTEGER NOT NULL,
37 |     "variantId" INTEGER NOT NULL,
38 |     "name" TEXT,
39 |     "description" TEXT,
40 |     "variantName" TEXT NOT NULL,
41 |     "sort" INTEGER NOT NULL,
42 |     "status" TEXT NOT NULL,
43 |     "price" INTEGER NOT NULL,
44 |     "interval" TEXT NOT NULL,
45 |     "intervalCount" INTEGER NOT NULL DEFAULT 1,
46 | 
47 |     CONSTRAINT "Plan_pkey" PRIMARY KEY ("id")
48 | );
49 | 
50 | -- CreateTable
51 | CREATE TABLE "WebhookEvent" (
52 |     "id" SERIAL NOT NULL,
53 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
54 |     "eventName" TEXT NOT NULL,
55 |     "processed" BOOLEAN NOT NULL DEFAULT false,
56 |     "body" JSONB NOT NULL,
57 |     "processingError" TEXT,
58 | 
59 |     CONSTRAINT "WebhookEvent_pkey" PRIMARY KEY ("id")
60 | );
61 | 
62 | -- CreateIndex
63 | CREATE UNIQUE INDEX "Plan_variantId_key" ON "Plan"("variantId");
64 | 
65 | -- CreateIndex
66 | CREATE UNIQUE INDEX "UserSubscription_lemon_customer_id_key" ON "UserSubscription"("lemon_customer_id");
67 | 
68 | -- CreateIndex
69 | CREATE UNIQUE INDEX "UserSubscription_lemon_subscription_id_key" ON "UserSubscription"("lemon_subscription_id");
70 | 
71 | -- CreateIndex
72 | CREATE UNIQUE INDEX "UserSubscription_orderId_key" ON "UserSubscription"("orderId");
73 | 
74 | -- AddForeignKey
75 | ALTER TABLE "UserSubscription" ADD CONSTRAINT "UserSubscription_planId_fkey" FOREIGN KEY ("planId") REFERENCES "Plan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
76 | 


--------------------------------------------------------------------------------
/prisma/migrations/migration_lock.toml:
--------------------------------------------------------------------------------
1 | # Please do not edit this file manually
2 | # It should be added in your version-control system (i.e. Git)
3 | provider = "postgresql"


--------------------------------------------------------------------------------
/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 | generator client {
 5 |   provider = "prisma-client-js"
 6 | }
 7 | 
 8 | datasource db {
 9 |   provider = "postgresql"
10 |   url      = env("DATABASE_URL")
11 | }
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 |   lemonCustomerId       String?   @unique @map(name: "lemon_customer_id")
26 |   lemonSubscriptionId   String?   @unique @map(name: "lemon_subscription_id")
27 |   lemonVariantId          String?   @map(name: "lemon_variant_id")
28 |   lemonCurrentPeriodEnd DateTime? @map(name: "lemon_current_period_end")
29 |   lemonSubscriptionStatus String? 
30 |  
31 | }
32 | 
33 | 
34 | 
35 | 
36 | model WebhookEvent {
37 |   id              Int       @id @default(autoincrement())
38 |   createdAt       DateTime  @default(now())
39 |   eventName       String
40 |   processed       Boolean   @default(false)
41 |   body            Json
42 |   processingError String?
43 | }


--------------------------------------------------------------------------------
/public/empty.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m121/emailgenerator/15082779bbb0d23786503e1b1c1035f43726bcfc/public/empty.png


--------------------------------------------------------------------------------
/public/loading.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m121/emailgenerator/15082779bbb0d23786503e1b1c1035f43726bcfc/public/loading.png


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m121/emailgenerator/15082779bbb0d23786503e1b1c1035f43726bcfc/public/logo.png


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


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


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


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


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


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