diff --git a/src/app/(landing)/_components/copy-to-clipboard.tsx b/src/app/(landing)/_components/copy-to-clipboard.tsx index a41ee31..4ada6a5 100644 --- a/src/app/(landing)/_components/copy-to-clipboard.tsx +++ b/src/app/(landing)/_components/copy-to-clipboard.tsx @@ -3,18 +3,17 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; -import { CopyIcon , CheckIcon} from "@radix-ui/react-icons"; +import { CheckIcon, CopyIcon } from "@radix-ui/react-icons"; import { useState } from "react"; import { toast } from "sonner"; export const CopyToClipboard = ({ text }: { text: string }) => { - - const [copied , setCopied] = useState(false) + const [copied, setCopied] = useState(false); const copyToClipboard = async () => { - setCopied(true) + setCopied(true); setTimeout(() => { - setCopied(false) - } , 2000) + setCopied(false); + }, 2000); await navigator.clipboard.writeText(text); toast("Copied to clipboard", { icon: , @@ -22,13 +21,18 @@ export const CopyToClipboard = ({ text }: { text: string }) => { }; return (
- +
); diff --git a/src/app/(landing)/_components/feature-icons.tsx b/src/app/(landing)/_components/feature-icons.tsx index c44a9c3..ec35679 100644 --- a/src/app/(landing)/_components/feature-icons.tsx +++ b/src/app/(landing)/_components/feature-icons.tsx @@ -28,13 +28,7 @@ const NextjsLight = forwardRef>( d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z" fill="url(#paint0_linear_408_134)" /> - + >( - + - + >( ); Drizzle.displayName = "Drizzle"; -const TRPC = forwardRef>( - ({ className, ...props }, ref) => ( - - - - - - - - - + + + + + + + + - - - + + - - - - ), -); + /> + + + +)); TRPC.displayName = "TRPC"; const ShadcnUi = forwardRef>( @@ -355,10 +334,7 @@ const ReactEmail = forwardRef>( d="M112.616 22.176V13.744H114.584V22.176H112.616ZM113.576 11.952C113.181 11.952 112.872 11.856 112.648 11.664C112.435 11.4613 112.328 11.1787 112.328 10.816C112.328 10.4747 112.44 10.1973 112.664 9.984C112.888 9.77067 113.192 9.664 113.576 9.664C113.981 9.664 114.291 9.76534 114.504 9.968C114.728 10.16 114.84 10.4427 114.84 10.816C114.84 11.1467 114.728 11.4187 114.504 11.632C114.28 11.8453 113.971 11.952 113.576 11.952Z" fill="currentColor" > - + @@ -386,14 +362,14 @@ const StripeLogo = forwardRef>( StripeLogo.displayName = "StripeLogo"; export { - NextjsLight, + Drizzle, + LuciaAuth, NextjsDark, + NextjsLight, + ReactEmail, ReactJs, - TailwindCss, - LuciaAuth, - Drizzle, - TRPC, ShadcnUi, - ReactEmail, StripeLogo, + TailwindCss, + TRPC, }; diff --git a/src/app/(landing)/_components/footer.tsx b/src/app/(landing)/_components/footer.tsx index e40d321..379ff58 100644 --- a/src/app/(landing)/_components/footer.tsx +++ b/src/app/(landing)/_components/footer.tsx @@ -1,5 +1,5 @@ -import { CodeIcon } from "@radix-ui/react-icons"; import { ThemeToggle } from "@/components/theme-toggle"; +import { CodeIcon } from "@radix-ui/react-icons"; const githubUrl = "https://github.com/iamtouha/next-lucia-auth"; const twitterUrl = "https://twitter.com/iamtouha"; diff --git a/src/app/(landing)/_components/hover-card.tsx b/src/app/(landing)/_components/hover-card.tsx index d4daa2c..a78de36 100644 --- a/src/app/(landing)/_components/hover-card.tsx +++ b/src/app/(landing)/_components/hover-card.tsx @@ -1,77 +1,70 @@ -'use client'; -import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; -import React, { useRef, useState } from 'react'; - - +"use client"; +import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import React, { useRef, useState } from "react"; type FeaturesProps = { - name: string; - description: string; - logo: React.ReactNode; -} + name: string; + description: string; + logo: React.ReactNode; +}; const CardSpotlight = (props: FeaturesProps) => { - const divRef = useRef(null); - const [isFocused, setIsFocused] = useState(false); - const [position, setPosition] = useState({ x: 0, y: 0 }); - const [opacity, setOpacity] = useState(0); - - const handleMouseMove = (e: React.MouseEvent) => { - if (!divRef.current || isFocused) return; - - const div = divRef.current; - const rect = div.getBoundingClientRect(); - - setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top }); - }; - - const handleFocus = () => { - setIsFocused(true); - setOpacity(1); - }; - - const handleBlur = () => { - setIsFocused(false); - setOpacity(0); - }; - - const handleMouseEnter = () => { - setOpacity(1); - }; - - const handleMouseLeave = () => { - setOpacity(0); - }; - - return ( - - -
-
- - {props.logo} -
- - {props.name} - {props.description} - - - - ); + const divRef = useRef(null); + const [isFocused, setIsFocused] = useState(false); + const [position, setPosition] = useState({ x: 0, y: 0 }); + const [opacity, setOpacity] = useState(0); + + const handleMouseMove = (e: React.MouseEvent) => { + if (!divRef.current || isFocused) return; + + const div = divRef.current; + const rect = div.getBoundingClientRect(); + + setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top }); + }; + + const handleFocus = () => { + setIsFocused(true); + setOpacity(1); + }; + + const handleBlur = () => { + setIsFocused(false); + setOpacity(0); + }; + + const handleMouseEnter = () => { + setOpacity(1); + }; + + const handleMouseLeave = () => { + setOpacity(0); + }; + + return ( + +
+
{props.logo}
+ + {props.name} + {props.description} + + + ); }; export default CardSpotlight; diff --git a/src/app/(landing)/layout.tsx b/src/app/(landing)/layout.tsx index 9c4d630..4ae8db9 100644 --- a/src/app/(landing)/layout.tsx +++ b/src/app/(landing)/layout.tsx @@ -1,8 +1,8 @@ import { APP_TITLE } from "@/lib/constants"; -import { type ReactNode } from "react"; import { type Metadata } from "next"; -import { Header } from "./_components/header"; +import { type ReactNode } from "react"; import { Footer } from "./_components/footer"; +import { Header } from "./_components/header"; export const metadata: Metadata = { title: APP_TITLE, diff --git a/src/app/(landing)/page.tsx b/src/app/(landing)/page.tsx index 90844d1..f6c925e 100644 --- a/src/app/(landing)/page.tsx +++ b/src/app/(landing)/page.tsx @@ -1,20 +1,20 @@ -import Link from "next/link"; -import { type Metadata } from "next"; import { PlusIcon } from "@/components/icons"; import { Button } from "@/components/ui/button"; import { GitHubLogoIcon } from "@radix-ui/react-icons"; +import { type Metadata } from "next"; +import Link from "next/link"; import { CopyToClipboard } from "./_components/copy-to-clipboard"; import { Drizzle, LuciaAuth, - NextjsLight, NextjsDark, + NextjsLight, + ReactEmail, ReactJs, ShadcnUi, + StripeLogo, TRPC, TailwindCss, - StripeLogo, - ReactEmail, } from "./_components/feature-icons"; import CardSpotlight from "./_components/hover-card"; @@ -87,7 +87,7 @@ const HomePage = () => {

Next.js Lucia Auth Starter Template

-

+

A Next.js Authentication starter template (password reset, email validation and oAuth). Includes Lucia, Drizzle, tRPC, Stripe, tailwindcss, shadcn-ui and react-email.

@@ -114,7 +114,7 @@ const HomePage = () => {

Features

-

+

This starter template is a guide to help you get started with Next.js for large scale applications. Feel free to add or remove features to suit your needs.

diff --git a/src/app/(main)/_components/footer.tsx b/src/app/(main)/_components/footer.tsx index 2f1f7b1..4d3f42c 100644 --- a/src/app/(main)/_components/footer.tsx +++ b/src/app/(main)/_components/footer.tsx @@ -1,5 +1,5 @@ -import { CodeIcon } from "@radix-ui/react-icons"; import { ThemeToggle } from "@/components/theme-toggle"; +import { CodeIcon } from "@radix-ui/react-icons"; const githubUrl = "https://github.com/iamtouha/next-lucia-auth"; const twitterUrl = "https://twitter.com/iamtouha"; diff --git a/src/app/(main)/_components/header.tsx b/src/app/(main)/_components/header.tsx index a9a844e..a2169d2 100644 --- a/src/app/(main)/_components/header.tsx +++ b/src/app/(main)/_components/header.tsx @@ -1,8 +1,8 @@ -import Link from "next/link"; -import { RocketIcon } from "@/components/icons"; -import { APP_TITLE } from "@/lib/constants"; import { UserDropdown } from "@/app/(main)/_components/user-dropdown"; +import { RocketIcon } from "@/components/icons"; import { validateRequest } from "@/lib/auth/validate-request"; +import { APP_TITLE } from "@/lib/constants"; +import Link from "next/link"; export const Header = async () => { const { user } = await validateRequest(); diff --git a/src/app/(main)/_components/user-dropdown.tsx b/src/app/(main)/_components/user-dropdown.tsx index 0406315..981b1c3 100644 --- a/src/app/(main)/_components/user-dropdown.tsx +++ b/src/app/(main)/_components/user-dropdown.tsx @@ -1,18 +1,7 @@ "use client"; -import { useState } from "react"; -import Link from "next/link"; -import { - DropdownMenu, - DropdownMenuLabel, - DropdownMenuSeparator, -} from "@/components/ui/dropdown-menu"; -import { - DropdownMenuTrigger, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, -} from "@/components/ui/dropdown-menu"; +import { ExclamationTriangleIcon } from "@/components/icons"; +import { LoadingButton } from "@/components/loading-button"; import { AlertDialog, AlertDialogContent, @@ -22,10 +11,19 @@ import { AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; -import { LoadingButton } from "@/components/loading-button"; -import { ExclamationTriangleIcon } from "@/components/icons"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; import { logout } from "@/lib/auth/actions"; import { APP_TITLE } from "@/lib/constants"; +import Link from "next/link"; +import { useState } from "react"; import { toast } from "sonner"; export const UserDropdown = ({ @@ -50,27 +48,16 @@ export const UserDropdown = ({ > - - {email} - + {email} - + Dashboard - + Billing - + Settings @@ -96,9 +83,7 @@ const SignoutConfirmation = () => { } catch (error) { if (error instanceof Error) { toast(error.message, { - icon: ( - - ), + icon: , }); } } finally { @@ -117,12 +102,8 @@ const SignoutConfirmation = () => { - - Sign out from {APP_TITLE}? - - - You will be redirected to the home page. - + Sign out from {APP_TITLE}? + You will be redirected to the home page.