31 |
32 | {t('dashboard.todo.recent_title')}
33 |
34 |
35 | {t('dashboard.todo.recent_description')}
36 |
37 |
38 |
39 |
50 |
51 | 57 | {t('dashboard.todo.no_todo_items')} 58 |
59 | ) : ( 60 |
41 | {t('dashboard.todo.stats.total')}
42 |
43 |
47 |
48 |
57 |
67 |
68 |
69 |
41 |
42 | {t('dashboard.todo.stats.total')}
43 |
44 |
45 |
49 |
50 |
59 |
77 |
78 |
79 |
57 |
59 |
34 |
35 |
47 |
48 |
53 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/src/app/[locale]/(dashboard)/dashboard/page.tsx:
--------------------------------------------------------------------------------
1 | import { DashboardHeader } from '@/libs/components/dashboard';
2 | import { getUserRecentTodoItems } from '@/libs/database/functions/todo/getUserRecentTodoItems';
3 | import { getUserUpcomingTodoItems } from '@/libs/database/functions/todo/getUserUpcomingTodoItems';
4 |
5 | import { DashboardPageView } from '../components/DashboardPageView';
6 |
7 | export default async function Dashboard() {
8 | const recentTodoItems = await getUserRecentTodoItems();
9 | const upcomingTodoItems = await getUserUpcomingTodoItems();
10 |
11 | return (
12 |
13 |
14 |
16 |
17 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/[locale]/(dashboard)/dashboard/settings/components/SettingsPageView.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useI18n } from '@/libs/locales/client';
4 | import Link from 'next/link';
5 |
6 | import { GeneralSettingsView } from './GeneralSettingsView';
7 |
8 | export default function SettingsPageView() {
9 | const t = useI18n();
10 | return (
11 | <>
12 |
13 |
17 | 14 | {t('dashboard.settings.title')} 15 |
16 |
18 |
32 |
33 |
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/app/[locale]/(dashboard)/dashboard/settings/page.tsx:
--------------------------------------------------------------------------------
1 | import { DashboardHeader } from '@/libs/components/dashboard';
2 | import { getI18n } from '@/libs/locales/server';
3 |
4 | import SettingsPageView from './components/SettingsPageView';
5 |
6 | export default async function Settings() {
7 | const t = await getI18n();
8 |
9 | return (
10 |
11 |
12 |
24 |
25 |
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/[locale]/(dashboard)/dashboard/todo/page.tsx:
--------------------------------------------------------------------------------
1 | import { DashboardHeader } from '@/libs/components/dashboard';
2 | import { getI18n } from '@/libs/locales/server';
3 |
4 | import { TodoPageView } from './components/TodoPageView';
5 |
6 | export default async function Dashboard() {
7 | const t = await getI18n();
8 |
9 | return (
10 |
11 |
12 |
24 |
25 |
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/[locale]/(dashboard)/layout.tsx:
--------------------------------------------------------------------------------
1 | import { DashboardSidebar } from '@/libs/components/dashboard/DashboardSidebar';
2 | import { getSignedInUser } from '@/libs/database';
3 | import { SignedInUserProvider } from '@/libs/providers';
4 |
5 | // Signed in user provider layout
6 | export default async function Layout({
7 | children,
8 | }: Readonly<{
9 | children: React.ReactNode;
10 | }>) {
11 | const signedInUser = await getSignedInUser();
12 |
13 | return (
14 |
16 |
19 |
21 | {children}
20 |
24 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/src/app/[locale]/layout.tsx:
--------------------------------------------------------------------------------
1 | import { LocaleProvider } from '@/libs/providers';
2 |
3 | // Locale provider layout
4 | export default async function LocaleLayout({
5 | children,
6 | params: { locale = 'en' },
7 | }: Readonly<{
8 | children: React.ReactNode;
9 | params: {
10 | locale: string;
11 | };
12 | }>) {
13 | return (
14 |
25 |
38 |
26 |
37 |
27 |
31 | 28 | {t('error.title')} 29 |
30 |
32 |
35 |
36 |
39 |
47 | {children}
16 |
15 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/app/[locale]/page.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | LandingPageFAQ,
3 | LandingPageFeatures,
4 | LandingPageFooter,
5 | LandingPageHeader,
6 | LandingPageHero,
7 | LandingPagePricing,
8 | LandingPageWaitlist,
9 | } from '@/libs/components/landing-page';
10 |
11 | export default function Page() {
12 | return (
13 |
16 |
36 |
17 |
35 |
18 |
25 | 19 | {t('not_found.title')} 20 |
21 |22 | {t('not_found.description')} 23 |
24 |
26 |
33 |
34 |
37 |
45 |
14 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/app/api/admin/resend/route.ts:
--------------------------------------------------------------------------------
1 | import { isUserAuthorServerOrThrow } from '@/libs/admin';
2 | import { sendEmail } from '@/libs/resend/sendEmail';
3 | import { NextResponse } from 'next/server';
4 |
5 | const AUTHOR_EMAIL = process.env.NEXT_PUBLIC_AUTHOR_EMAIL;
6 |
7 | // Send an email with Resend API
8 | export async function POST(req: Request, res: Response) {
9 | try {
10 | // Only allow the author to perform this action
11 | isUserAuthorServerOrThrow();
12 |
13 | const { data, error } = await sendEmail({
14 | to: `${AUTHOR_EMAIL}`,
15 | subject: 'Hello World',
16 | html: '
16 |
18 |
19 |
29 |
20 |
22 |
24 |
26 | Congrats on sending an email!
', 17 | }); 18 | 19 | if (error) { 20 | return NextResponse.json({ error }, { status: 500 }); 21 | } 22 | 23 | return NextResponse.json(data); 24 | } catch (error) { 25 | console.log('error', error); 26 | return NextResponse.json({ error }, { status: 500 }); 27 | } 28 | } -------------------------------------------------------------------------------- /src/app/api/admin/todo/boilerplate/boilerplate.utils.ts: -------------------------------------------------------------------------------- 1 | import { TODO_ITEM_CATEGORIES } from '@/libs/database'; 2 | import { faker } from '@faker-js/faker'; 3 | import { shuffle } from 'lodash'; 4 | 5 | export function generateMockTodoItem() { 6 | return { 7 | title: faker.lorem.sentence(), 8 | description: faker.lorem.paragraph(), 9 | // Randomly set the due date to be in the future or in the past 10 | dueDate: 11 | Math.random() > 0.5 12 | ? faker.date.soon({ 13 | days: 60, 14 | }) 15 | : faker.date.recent({ 16 | days: 60, 17 | }), 18 | done: Boolean(Math.random() > 0.5), 19 | category: shuffle(TODO_ITEM_CATEGORIES)[0], 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /src/app/api/admin/todo/boilerplate/route.ts: -------------------------------------------------------------------------------- 1 | import { isUserAuthorServerOrThrow } from '@/libs/admin'; 2 | import { getSignedInUser, prisma } from '@/libs/database'; 3 | import { createTodoItem } from '@/libs/database/functions/todo/createTodoItem'; 4 | import { NextResponse } from 'next/server'; 5 | 6 | import { generateMockTodoItem } from './boilerplate.utils'; 7 | 8 | // Sets the boilerplate 9 | export async function POST(req: Request, res: Response) { 10 | try { 11 | // Only allow the author to perform this action 12 | isUserAuthorServerOrThrow(); 13 | 14 | // Create 50 boilerplate todo items 15 | const responses = []; 16 | for (let i = 0; i < 50; i++) { 17 | const airesponse = await createTodoItem(generateMockTodoItem()); 18 | responses.push(airesponse); 19 | } 20 | 21 | return NextResponse.json({ responses }); 22 | } catch (error) { 23 | console.log('error', error); 24 | return NextResponse.json({ error }, { status: 500 }); 25 | } 26 | } 27 | 28 | // Delete all boilerplate todo items 29 | export async function DELETE(req: Request, res: Response) { 30 | try { 31 | // Only allow the author to perform this action 32 | isUserAuthorServerOrThrow(); 33 | 34 | const signedInUser = await getSignedInUser(); 35 | if (!signedInUser) throw new Error('User not signed in'); 36 | 37 | // Delete all todo items for the signed in user (author) 38 | await prisma.todoItem.deleteMany({ 39 | where: { 40 | userId: signedInUser.id, 41 | }, 42 | }); 43 | 44 | return NextResponse.json(true); 45 | } catch (error) { 46 | console.log('error', error); 47 | return NextResponse.json({ error }, { status: 500 }); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/app/api/todo/[id]/route.ts: -------------------------------------------------------------------------------- 1 | import { deleteTodoItem, updateTodoItem } from '@/libs/database/functions/todo'; 2 | import { NextResponse } from 'next/server'; 3 | 4 | // Update a todo item by id for the signed in user 5 | export async function PUT( 6 | req: Request, 7 | { params }: { params: { id: string } }, 8 | ) { 9 | try { 10 | // Todo item ID to update 11 | const id = params.id; 12 | 13 | const body = await req.json(); 14 | 15 | // Update the todo item 16 | const queryResponse = await updateTodoItem({ 17 | id: id, 18 | ...body, 19 | }); 20 | return NextResponse.json(queryResponse); 21 | } catch (error) { 22 | return NextResponse.json({ error }, { status: 500 }); 23 | } 24 | } 25 | 26 | // Delete a todo item by id for the signed in user 27 | export async function DELETE( 28 | req: Request, 29 | { params }: { params: { id: string } }, 30 | ) { 31 | try { 32 | const id = params.id; 33 | 34 | const queryResponse = await deleteTodoItem({ id }); 35 | return NextResponse.json(queryResponse); 36 | } catch (error) { 37 | return NextResponse.json({ error }, { status: 500 }); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/app/api/todo/new/route.ts: -------------------------------------------------------------------------------- 1 | import { createTodoItem } from '@/libs/database'; 2 | import { NextResponse } from 'next/server'; 3 | 4 | // Create a new todo item for the signed in user 5 | export async function POST(req: Request) { 6 | try { 7 | const body = await req.json(); 8 | 9 | const queryResponse = await createTodoItem(body); 10 | return NextResponse.json(queryResponse); 11 | } catch (error) { 12 | return NextResponse.json({ error }, { status: 500 }); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/api/todo/route.ts: -------------------------------------------------------------------------------- 1 | import { getTodoItems } from '@/libs/database'; 2 | import { NextRequest, NextResponse } from 'next/server'; 3 | 4 | // Get all todo items for the signed in user from the database 5 | export async function GET(req: NextRequest) { 6 | try { 7 | const searchParams = req.nextUrl.searchParams; 8 | 9 | // Get the page and skip from the URL search params 10 | const take = 10; 11 | const page = searchParams.get('page') || '1'; 12 | const skip = page ? parseInt(page) * take : undefined; 13 | 14 | // Get the optional param status from the URL search params 15 | const status = searchParams.get('status'); 16 | const done = 17 | status === 'done' ? true : status === 'pending' ? false : undefined; 18 | 19 | // Get the todo items 20 | const todoItems = await getTodoItems({ 21 | skip, 22 | take, 23 | done, 24 | }); 25 | return NextResponse.json(todoItems); 26 | } catch (error) { 27 | return NextResponse.json({ error }, { status: 500 }); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/app/api/user/route.ts: -------------------------------------------------------------------------------- 1 | import { CURRENCIES } from '@/libs/database'; 2 | import { updateUser } from '@/libs/database/functions/user'; 3 | import { NextResponse } from 'next/server'; 4 | import { z } from 'zod'; 5 | 6 | // User update schema 7 | const userUpdateSchema = z.object({ 8 | defaultCurrency: z.enum([CURRENCIES[0], ...CURRENCIES.slice(1)]).optional(), 9 | }); 10 | 11 | // Update the signed in user - we dont need the user id, as it will be fetched from the session 12 | export async function PUT(req: Request) { 13 | try { 14 | const body = await req.json(); 15 | 16 | // Validate the request body 17 | const userData = userUpdateSchema.parse(body); 18 | 19 | // Update the user 20 | const queryResponse = await updateUser(userData); 21 | 22 | return NextResponse.json(queryResponse); 23 | } catch (error) { 24 | return NextResponse.json({ error }, { status: 500 }); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/app/api/webhooks/clerk/route.ts: -------------------------------------------------------------------------------- 1 | import { prisma } from '@/libs/database'; 2 | import type { WebhookEvent } from '@clerk/nextjs/server'; 3 | import { NextResponse } from 'next/server'; 4 | 5 | // Clerk Webhook: create or delete a user in the database by Clerk ID 6 | export async function POST(req: Request) { 7 | try { 8 | // Parse the Clerk Webhook event 9 | const evt = (await req.json()) as WebhookEvent; 10 | 11 | const { id: clerkUserId } = evt.data; 12 | if (!clerkUserId) 13 | return NextResponse.json( 14 | { error: 'No user ID provided' }, 15 | { status: 400 }, 16 | ); 17 | 18 | // Create or delete a user in the database based on the Clerk Webhook event 19 | let user = null; 20 | switch (evt.type) { 21 | case 'user.created': { 22 | const { email_addresses = [] } = evt.data; 23 | const email = email_addresses?.[0]?.email_address ?? ''; 24 | 25 | if (!email) 26 | return NextResponse.json( 27 | { error: 'No email provided' }, 28 | { status: 400 }, 29 | ); 30 | 31 | user = await prisma.user.upsert({ 32 | where: { 33 | clerkUserId, 34 | }, 35 | update: { 36 | clerkUserId, 37 | email, 38 | }, 39 | create: { 40 | clerkUserId, 41 | email, 42 | }, 43 | }); 44 | break; 45 | } 46 | case 'user.deleted': { 47 | user = await prisma.user.delete({ 48 | where: { 49 | clerkUserId, 50 | }, 51 | }); 52 | break; 53 | } 54 | default: 55 | break; 56 | } 57 | 58 | return NextResponse.json({ user }); 59 | } catch (error) { 60 | return NextResponse.json({ error }, { status: 500 }); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/app/api/webhooks/lemonsqueezy/route.ts: -------------------------------------------------------------------------------- 1 | import { 2 | processWebhookEvent, 3 | storeWebhookEvent, 4 | } from '@/libs/lemon-squeezy/actions'; 5 | import { webhookHasMeta } from '@/libs/lemon-squeezy/typeguards'; 6 | import { NextResponse } from 'next/server'; 7 | import crypto from 'node:crypto'; 8 | 9 | // Lemon Squeezt Webhook: process a subscription event 10 | export async function POST(req: Request) { 11 | try { 12 | if (!process.env.LEMONSQUEEZY_WEBHOOK_SECRET) { 13 | return new Response( 14 | 'Lemon Squeezy Webhook Secret not set in .env', 15 | { 16 | status: 500, 17 | }, 18 | ); 19 | } 20 | const secret = process.env.LEMONSQUEEZY_WEBHOOK_SECRET; 21 | 22 | // Check the request signature 23 | const rawBody = await req.text(); 24 | const hmac = crypto.createHmac('sha256', secret); 25 | const digest = Buffer.from(hmac.update(rawBody).digest('hex'), 'utf8'); 26 | const signature = Buffer.from( 27 | req.headers.get('X-Signature') || '', 28 | 'utf8', 29 | ); 30 | 31 | if (!crypto.timingSafeEqual(digest, signature)) { 32 | throw new Error('Invalid signature.'); 33 | } 34 | 35 | // Parse the Lemon Squeezy event 36 | const data = JSON.parse(rawBody) as unknown; 37 | 38 | // Type guard to check if the object has a 'meta' property. 39 | if (webhookHasMeta(data)) { 40 | const webhookEvent = await storeWebhookEvent( 41 | data.meta.event_name, 42 | data, 43 | ); 44 | 45 | await processWebhookEvent(webhookEvent); 46 | 47 | return NextResponse.json({ success: true }); 48 | } 49 | 50 | return NextResponse.json({ error: 'Data invalid' }, { status: 400 }); 51 | } catch (error) { 52 | return NextResponse.json({ error }, { status: 500 }); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/app/global-error.jsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as Sentry from '@sentry/nextjs'; 4 | import Error from 'next/error'; 5 | import { useEffect } from 'react'; 6 | 7 | export default function GlobalError({ error }) { 8 | useEffect(() => { 9 | console.error('GlobalError', error); 10 | Sentry?.captureException(error); 11 | }, [error]); 12 | 13 | return ( 14 | 15 | 16 |
4 |
5 |
6 | );
7 | }
8 |
--------------------------------------------------------------------------------
/src/libs/components/LocaleSelector.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useChangeLocale, useCurrentLocale } from '@/libs/locales/client';
4 | import { LOCALES } from '@/libs/locales/locale-middleware';
5 | import { Button } from '@/libs/ui/button';
6 | import {
7 | DropdownMenu,
8 | DropdownMenuCheckboxItem,
9 | DropdownMenuContent,
10 | DropdownMenuTrigger,
11 | } from '@/libs/ui/dropdown-menu';
12 |
13 | export function LocaleSelector() {
14 | const changeLocale = useChangeLocale({ preserveSearchParams: true });
15 | const locale = useCurrentLocale();
16 |
17 | return (
18 |
31 |
61 |
65 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/src/libs/components/dashboard/DashboardStatsCard.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Badge } from '@/libs/ui/badge';
4 | import {
5 | Card,
6 | CardContent,
7 | CardDescription,
8 | CardFooter,
9 | CardHeader,
10 | CardTitle,
11 | } from '@/libs/ui/card';
12 | import { Progress } from '@/libs/ui/progress';
13 | import { cn } from '@/libs/utils';
14 | import { isNumber, isString } from 'lodash';
15 |
16 | export function DashboardStatsCard({
17 | title,
18 | value,
19 | description,
20 | badge,
21 | progress,
22 | className,
23 | variant,
24 | }: {
25 | title: string;
26 | value: string;
27 | description?: string | React.ReactNode;
28 | badge: string;
29 | progress?: number;
30 | className?: string;
31 | variant?: 'default' | 'danger';
32 | }) {
33 | return (
34 |
37 | {title}
38 |
39 | {badge}
40 |
41 |
42 | 54 | {description} 55 |
56 | ) : ( 57 | description 58 | )} 59 |
21 |
22 | (
26 |
33 | )}
34 | />
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/libs/components/form/FormInputDate.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useI18n } from '@/libs/locales/client';
4 | import { Button } from '@/libs/ui/button';
5 | import { Calendar } from '@/libs/ui/calendar';
6 | import { Label } from '@/libs/ui/label';
7 | import { Popover, PopoverContent, PopoverTrigger } from '@/libs/ui/popover';
8 | import { cn, formatDateShort } from '@/libs/utils';
9 | import { CalendarIcon } from 'lucide-react';
10 | import moment from 'moment';
11 | import { Controller, useFormContext } from 'react-hook-form';
12 |
13 | export function FormInputDate({
14 | formInputName,
15 | label,
16 | calendarProps,
17 | }: {
18 | formInputName: string;
19 | label: string;
20 | calendarProps?: any; // fixme: should be React.ComponentProps
27 |
28 | (
32 |
33 |
34 |
50 |
51 |
55 | {
62 | field.onChange(date);
63 | }}
64 | />
65 |
66 |
67 | )}
68 | />
69 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/src/libs/components/form/FormInputSwitch.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Label } from '@/libs/ui/label';
4 | import { Switch } from '@/libs/ui/switch';
5 | import { ReactNode } from 'react';
6 | import { Controller, useFormContext } from 'react-hook-form';
7 |
8 | export function FormInputSwitch({
9 | formInputName,
10 | label,
11 | onLabel,
12 | offLabel,
13 | }: {
14 | formInputName: string;
15 | label: string | ReactNode;
16 | onLabel?: string;
17 | offLabel?: string;
18 | }) {
19 | const { control } = useFormContext();
20 |
21 | return (
22 |
23 |
24 | (
28 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/src/libs/components/form/FormSelect.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Label } from '@/libs/ui/label';
4 | import {
5 | Select,
6 | SelectContent,
7 | SelectItem,
8 | SelectTrigger,
9 | SelectValue,
10 | } from '@/libs/ui/select';
11 | import { Controller, useFormContext } from 'react-hook-form';
12 |
13 | export function FormSelect({
14 | formSelectName,
15 | label,
16 | placeholder,
17 | selectItems,
18 | renderSelectItem,
19 | }: {
20 | formSelectName: string;
21 | label: string;
22 | placeholder: string;
23 | selectItems: string[];
24 | renderSelectItem?: (item: string) => React.ReactNode;
25 | }) {
26 | const { control } = useFormContext();
27 |
28 | return (
29 |
29 |
32 |
36 | field.onChange(checked)
37 | }
38 | />
39 |
40 | )}
41 | />
42 |
30 |
31 | (
35 |
51 | )}
52 | />
53 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/src/libs/components/form/index.ts:
--------------------------------------------------------------------------------
1 | export * from './FormInput';
2 | export * from './FormInputDate';
3 | export * from './FormInputSwitch';
4 | export * from './FormSelect';
5 |
6 |
--------------------------------------------------------------------------------
/src/libs/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './DarkModeToggle';
2 | export * from './DeleteElementWithAlertDialog';
3 | export * from './ElementsTable';
4 | export * from './Loading';
5 | export * from './dashboard';
6 | export * from './form';
7 |
--------------------------------------------------------------------------------
/src/libs/components/landing-page/LandingPageCTA.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Button } from '@/libs/ui/button';
4 |
5 | export function LandingPageCTA() {
6 | return (
7 |
11 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/libs/components/landing-page/LandingPageFAQ.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useI18n } from '@/libs/locales/client';
4 | import {
5 | Accordion,
6 | AccordionContent,
7 | AccordionItem,
8 | AccordionTrigger,
9 | } from '@/libs/ui/accordion';
10 |
11 | export function LandingPageFAQ() {
12 | const t = useI18n();
13 |
14 | // FAQ content
15 | const content = [
16 | {
17 | title: t('landing.faq.content.0.title'),
18 | description: t('landing.faq.content.0.description'),
19 | },
20 |
21 | {
22 | title: t('landing.faq.content.1.title'),
23 | description: t('landing.faq.content.1.description'),
24 | },
25 |
26 | {
27 | title: t('landing.faq.content.2.title'),
28 | description: t('landing.faq.content.2.description'),
29 | },
30 | {
31 | title: t('landing.faq.content.3.title'),
32 | description: t('landing.faq.content.3.description'),
33 | },
34 | {
35 | title: t('landing.faq.content.4.title'),
36 | description: t('landing.faq.content.4.description'),
37 | },
38 | ];
39 |
40 | return (
41 | Fast-Track Your App to Market
12 |13 | Start strong with pre-configured boilerplate code and focus on 14 | what really matters - your business. 15 |
16 | 19 |
45 |
46 |
53 |
57 | {content.map((item) => (
58 |
59 | {item.title}
60 | {item.description}
61 |
62 | ))}
63 |
64 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/src/libs/components/landing-page/LandingPageFooter.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useI18n } from '@/libs/locales/client';
4 | import { Button } from '@/libs/ui/button';
5 | import { GitHubLogoIcon } from '@radix-ui/react-icons';
6 | import { MailIcon } from 'lucide-react';
7 | import Link from 'next/link';
8 |
9 | export function LandingPageFooter() {
10 | const t = useI18n();
11 |
12 | return (
13 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/src/libs/components/landing-page/LandingPagePricing.tsx:
--------------------------------------------------------------------------------
1 | import { prisma } from '@/libs/database';
2 | import { syncPlans } from '@/libs/lemon-squeezy/actions';
3 | import { getI18n } from '@/libs/locales/server';
4 | import { LsSubscriptionPlan } from '@prisma/client';
5 |
6 | import { Plan } from '../lemon-squeezy/Plan';
7 |
8 | export async function LandingPagePricing() {
9 | const t = await getI18n();
10 |
11 | // Get all plans from the database.
12 | let allPlans: LsSubscriptionPlan[] =
13 | await prisma.lsSubscriptionPlan.findMany();
14 |
15 | // If there are no plans in the database, sync them from Lemon Squeezy.
16 | // You might want to add logic to sync plans periodically or a webhook handler.
17 | if (!allPlans.length) {
18 | allPlans = await syncPlans();
19 | }
20 |
21 | if (!allPlans.length) {
22 | return
46 | 
51 | {t('landing.faq.title')}
52 |
53 | 54 | {t('landing.faq.description')} 55 |
56 |No plans available.
; 23 | } 24 | 25 | return ( 26 |
30 |
31 |
38 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/libs/components/landing-page/LandingPageWaitlist.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useI18n } from '@/libs/locales/client';
4 | import { Button } from '@/libs/ui/button';
5 | import { Input } from '@/libs/ui/input';
6 | import { cn } from '@/libs/utils';
7 | import { noop } from 'lodash';
8 | import { useState } from 'react';
9 |
10 | export function LandingPageWaitlist() {
11 | const t = useI18n();
12 | // Email state
13 | const [email, setEmail] = useState('');
14 |
15 | return (
16 |
31 | 
36 | {t('landing.pricing.title')}
37 |
38 | 39 | {t('landing.pricing.description')} 40 |
41 |
42 | {allPlans.map((item, index) => (
43 |
46 |
20 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/src/libs/components/landing-page/index.ts:
--------------------------------------------------------------------------------
1 | export * from './LandingPageCTA';
2 | export * from './LandingPageFAQ';
3 | export * from './LandingPageFeatures';
4 | export * from './LandingPageFooter';
5 | export * from './LandingPageHeader';
6 | export * from './LandingPageHero';
7 | export * from './LandingPagePricing';
8 | export * from './LandingPageWaitlist';
9 |
--------------------------------------------------------------------------------
/src/libs/components/lemon-squeezy/ChangePlans.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Plan } from '@/libs/components/lemon-squeezy/Plan';
4 | import { isValidSubscription } from '@/libs/lemon-squeezy/utils';
5 | import { useI18n } from '@/libs/locales/client';
6 | import {
7 | Sheet,
8 | SheetContent,
9 | SheetDescription,
10 | SheetHeader,
11 | SheetTitle,
12 | } from '@/libs/ui/sheet';
13 | import { LsSubscriptionPlan, LsUserSubscription } from '@prisma/client';
14 |
15 | export function ChangePlans({
16 | allPlans,
17 | userSubscriptions,
18 | onClose,
19 | }: {
20 | allPlans: LsSubscriptionPlan[];
21 | userSubscriptions: LsUserSubscription[];
22 | onClose: () => void;
23 | }) {
24 | const t = useI18n();
25 |
26 | const currentPlan = userSubscriptions.find((s) =>
27 | isValidSubscription(s.status),
28 | );
29 |
30 | // Check if the current plan is usage based
31 | const isCurrentPlanUsageBased = currentPlan?.isUsageBased;
32 |
33 | // Get all plans that are usage based or not usage based
34 | const filteredPlans = allPlans
35 | .filter((plan) => {
36 | return isCurrentPlanUsageBased
37 | ? Boolean(plan.isUsageBased)
38 | : Boolean(!plan.isUsageBased);
39 | })
40 | .sort((a, b) => {
41 | if (
42 | a.sort === undefined ||
43 | a.sort === null ||
44 | b.sort === undefined ||
45 | b.sort === null
46 | ) {
47 | return 0;
48 | }
49 |
50 | return a.sort - b.sort;
51 | });
52 |
53 | return (
54 |
21 |
43 |
44 |
22 |
27 |
28 |
42 | {t('landing.waitlist.title')}
23 |24 | {t('landing.waitlist.description')} 25 |
26 |
45 | 
50 |
51 |
50 | {t('dashboard.my_account.no_plans_available')}
79 | ) : ( 80 |
81 | {filteredPlans.map((plan, index) => (
82 |
90 | )}
91 |