diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..3a3e751
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,3 @@
+# Copy this file to .env.local and fill in the values from Supabase > Project Settings > API
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
diff --git a/.gitignore b/.gitignore
index 434ee8a..f1631b0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,42 @@
-.worktrees
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/README.md b/README.md
index 44171ab..97f7659 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,69 @@
-# cursor-hackathon
+# Habit Pet
-- where the hacking happens
+Bootstrap repo for the Calgary hackathon Habit Pet project.
+
+## Stack
+
+- Next.js
+- Supabase
+- Vercel
+- GitHub
+
+## Scope of this bootstrap
+
+This repo currently stops at:
+
+- Next.js app scaffold
+- Supabase auth wiring from the starter
+- environment variable template
+- deployment-ready project structure
+
+This repo does not yet include MVP feature pages, SQL schema, avatar logic, habits, streaks, or shop logic.
+
+## Local setup
+
+1. Install dependencies:
+
+ ```bash
+ npm install
+ ```
+
+2. Create local environment file:
+
+ ```bash
+ cp .env.example .env.local
+ ```
+
+3. Add Supabase values to `.env.local`:
+
+ ```env
+ NEXT_PUBLIC_SUPABASE_URL=
+ NEXT_PUBLIC_SUPABASE_ANON_KEY=
+ ```
+
+4. Start the app:
+
+ ```bash
+ npm run dev
+ ```
+
+5. Create a production build when needed:
+
+ ```bash
+ npm run build
+ ```
+
+## Supabase
+
+Create a Supabase project, then copy the project URL and anon key from **Project Settings > API** into `.env.local` and Vercel project environment variables.
+
+The starter also supports Supabase's publishable key name, but this repo documents the anon key convention from the project plan.
+
+## Deploy
+
+1. Push the repo to GitHub.
+2. Import the repo into Vercel.
+3. Add the same Supabase environment variables in Vercel.
+4. Deploy.
+
+Frontend and backend are both served from this Next.js app. Supabase provides auth and database services.
diff --git a/app/auth/confirm/route.ts b/app/auth/confirm/route.ts
new file mode 100644
index 0000000..b1b1086
--- /dev/null
+++ b/app/auth/confirm/route.ts
@@ -0,0 +1,30 @@
+import { createClient } from "@/lib/supabase/server";
+import { type EmailOtpType } from "@supabase/supabase-js";
+import { redirect } from "next/navigation";
+import { type NextRequest } from "next/server";
+
+export async function GET(request: NextRequest) {
+ const { searchParams } = new URL(request.url);
+ const token_hash = searchParams.get("token_hash");
+ const type = searchParams.get("type") as EmailOtpType | null;
+ const next = searchParams.get("next") ?? "/";
+
+ if (token_hash && type) {
+ const supabase = await createClient();
+
+ const { error } = await supabase.auth.verifyOtp({
+ type,
+ token_hash,
+ });
+ if (!error) {
+ // redirect user to specified redirect URL or root of app
+ redirect(next);
+ } else {
+ // redirect the user to an error page with some instructions
+ redirect(`/auth/error?error=${error?.message}`);
+ }
+ }
+
+ // redirect the user to an error page with some instructions
+ redirect(`/auth/error?error=No token hash or type`);
+}
diff --git a/app/auth/error/page.tsx b/app/auth/error/page.tsx
new file mode 100644
index 0000000..18b8306
--- /dev/null
+++ b/app/auth/error/page.tsx
@@ -0,0 +1,51 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Suspense } from "react";
+
+async function ErrorContent({
+ searchParams,
+}: {
+ searchParams: Promise<{ error: string }>;
+}) {
+ const params = await searchParams;
+
+ return (
+ <>
+ {params?.error ? (
+
+ Code error: {params.error}
+
+ ) : (
+
+ An unspecified error occurred.
+
+ )}
+
+ );
+}
+
+export default function Page({
+ searchParams,
+}: {
+ searchParams: Promise<{ error: string }>;
+}) {
+ return (
+
+
+
+
+
+
+ Sorry, something went wrong.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Thank you for signing up!
+
+ Check your email to confirm
+
+
+
+ You've successfully signed up. Please check your email to
+ confirm your account before signing in.
+
+
+
+
+
+
+ {children}
+
+
+
+ );
+}
diff --git a/app/opengraph-image.png b/app/opengraph-image.png
new file mode 100644
index 0000000..57595e6
Binary files /dev/null and b/app/opengraph-image.png differ
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..ac33981
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,58 @@
+import { DeployButton } from "@/components/deploy-button";
+import { EnvVarWarning } from "@/components/env-var-warning";
+import { AuthButton } from "@/components/auth-button";
+import { Hero } from "@/components/hero";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { ConnectSupabaseSteps } from "@/components/tutorial/connect-supabase-steps";
+import { SignUpUserSteps } from "@/components/tutorial/sign-up-user-steps";
+import { hasEnvVars } from "@/lib/utils";
+import Link from "next/link";
+import { Suspense } from "react";
+
+export default function Home() {
+ return (
+
+
+
+
+
+
Next.js Supabase Starter
+
+
+
+ {!hasEnvVars ? (
+
+ ) : (
+
+
+ )}
+
+
+
+ Next steps
+ {hasEnvVars ?
+
+
+
+
+ );
+}
diff --git a/app/protected/layout.tsx b/app/protected/layout.tsx
new file mode 100644
index 0000000..99b0966
--- /dev/null
+++ b/app/protected/layout.tsx
@@ -0,0 +1,55 @@
+import { DeployButton } from "@/components/deploy-button";
+import { EnvVarWarning } from "@/components/env-var-warning";
+import { AuthButton } from "@/components/auth-button";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { hasEnvVars } from "@/lib/utils";
+import Link from "next/link";
+import { Suspense } from "react";
+
+export default function ProtectedLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+
+
+
+
+
Next.js Supabase Starter
+
+
+
+ {!hasEnvVars ? (
+
+ ) : (
+
+
+ )}
+
+
+ {children}
+
+
+
+
+ );
+}
diff --git a/app/protected/page.tsx b/app/protected/page.tsx
new file mode 100644
index 0000000..4f6caa7
--- /dev/null
+++ b/app/protected/page.tsx
@@ -0,0 +1,43 @@
+import { redirect } from "next/navigation";
+
+import { createClient } from "@/lib/supabase/server";
+import { InfoIcon } from "lucide-react";
+import { FetchDataSteps } from "@/components/tutorial/fetch-data-steps";
+import { Suspense } from "react";
+
+async function UserDetails() {
+ const supabase = await createClient();
+ const { data, error } = await supabase.auth.getClaims();
+
+ if (error || !data?.claims) {
+ redirect("/auth/login");
+ }
+
+ return JSON.stringify(data.claims, null, 2);
+}
+
+export default function ProtectedPage() {
+ return (
+
+
+
+
+
+
+
Your user details
+
+
+
+
+
+
+
Next steps
+
+
+ Hey, {user.email}!
+
+ ) : (
+
+
+
+
+
+
+ );
+}
diff --git a/components/deploy-button.tsx b/components/deploy-button.tsx
new file mode 100644
index 0000000..a6b2c26
--- /dev/null
+++ b/components/deploy-button.tsx
@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { Button } from "./ui/button";
+
+export function DeployButton() {
+ return (
+ <>
+
+
+
+ Deploy to Vercel
+
+
+
+ );
+}
diff --git a/components/env-var-warning.tsx b/components/env-var-warning.tsx
new file mode 100644
index 0000000..2caa528
--- /dev/null
+++ b/components/env-var-warning.tsx
@@ -0,0 +1,20 @@
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+
+export function EnvVarWarning() {
+ return (
+
+
+ Supabase environment variables required
+
+
+
+ Sign in
+
+
+ Sign up
+
+
+
(null);
+ const [success, setSuccess] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+
+ const handleForgotPassword = async (e: React.FormEvent) => {
+ e.preventDefault();
+ const supabase = createClient();
+ setIsLoading(true);
+ setError(null);
+
+ try {
+ // The url which will be included in the email. This URL needs to be configured in your redirect URLs in the Supabase dashboard at https://supabase.com/dashboard/project/_/auth/url-configuration
+ const { error } = await supabase.auth.resetPasswordForEmail(email, {
+ redirectTo: `${window.location.origin}/auth/update-password`,
+ });
+ if (error) throw error;
+ setSuccess(true);
+ } catch (error: unknown) {
+ setError(error instanceof Error ? error.message : "An error occurred");
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+ {success ? (
+
+
+ Check Your Email
+ Password reset instructions sent
+
+
+
+ If you registered using your email and password, you will receive
+ a password reset email.
+
+
+
+ ) : (
+
+
+ Reset Your Password
+
+ Type in your email and we'll send you a link to reset your
+ password
+
+
+
+
+
+
+ )}
+
+
+
Supabase and Next.js Starter Template
+
+ The fastest way to build apps with{" "}
+
+ Supabase
+ {" "}
+ and{" "}
+
+ Next.js
+
+
+
+
(null);
+ const [isLoading, setIsLoading] = useState(false);
+ const router = useRouter();
+
+ const handleLogin = async (e: React.FormEvent) => {
+ e.preventDefault();
+ const supabase = createClient();
+ setIsLoading(true);
+ setError(null);
+
+ try {
+ const { error } = await supabase.auth.signInWithPassword({
+ email,
+ password,
+ });
+ if (error) throw error;
+ // Update this route to redirect to an authenticated route. The user already has an active session.
+ router.push("/protected");
+ } catch (error: unknown) {
+ setError(error instanceof Error ? error.message : "An error occurred");
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ Login
+
+ Enter your email below to login to your account
+
+
+
+
+
+
+
Logout ;
+}
diff --git a/components/next-logo.tsx b/components/next-logo.tsx
new file mode 100644
index 0000000..7b04400
--- /dev/null
+++ b/components/next-logo.tsx
@@ -0,0 +1,46 @@
+export function NextLogo() {
+ return (
+
+
+ );
+}
diff --git a/components/sign-up-form.tsx b/components/sign-up-form.tsx
new file mode 100644
index 0000000..6c4b369
--- /dev/null
+++ b/components/sign-up-form.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { createClient } from "@/lib/supabase/client";
+import { Button } from "@/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function SignUpForm({
+ className,
+ ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [repeatPassword, setRepeatPassword] = useState("");
+ const [error, setError] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+ const router = useRouter();
+
+ const handleSignUp = async (e: React.FormEvent) => {
+ e.preventDefault();
+ const supabase = createClient();
+ setIsLoading(true);
+ setError(null);
+
+ if (password !== repeatPassword) {
+ setError("Passwords do not match");
+ setIsLoading(false);
+ return;
+ }
+
+ try {
+ const { error } = await supabase.auth.signUp({
+ email,
+ password,
+ options: {
+ emailRedirectTo: `${window.location.origin}/protected`,
+ },
+ });
+ if (error) throw error;
+ router.push("/auth/sign-up-success");
+ } catch (error: unknown) {
+ setError(error instanceof Error ? error.message : "An error occurred");
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ Sign up
+ Create a new account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/theme-switcher.tsx b/components/theme-switcher.tsx
new file mode 100644
index 0000000..d838e40
--- /dev/null
+++ b/components/theme-switcher.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Laptop, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+const ThemeSwitcher = () => {
+ const [mounted, setMounted] = useState(false);
+ const { theme, setTheme } = useTheme();
+
+ // useEffect only runs on the client, so now we can safely show the UI
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ if (!mounted) {
+ return null;
+ }
+
+ const ICON_SIZE = 16;
+
+ return (
+
+
+
+ {theme === "light" ? (
+
+
+
+ setTheme(e)}
+ >
+
+ Light
+
+
+ Dark
+
+
+ System
+
+
+
+
+ );
+};
+
+export { ThemeSwitcher };
diff --git a/components/tutorial/code-block.tsx b/components/tutorial/code-block.tsx
new file mode 100644
index 0000000..9f1b13d
--- /dev/null
+++ b/components/tutorial/code-block.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "../ui/button";
+
+const CopyIcon = () => (
+
+
+);
+
+const CheckIcon = () => (
+
+
+);
+
+export function CodeBlock({ code }: { code: string }) {
+ const [icon, setIcon] = useState(CopyIcon);
+
+ const copy = async () => {
+ await navigator?.clipboard?.writeText(code);
+ setIcon(CheckIcon);
+ setTimeout(() => setIcon(CopyIcon), 2000);
+ };
+
+ return (
+
+
+ {icon}
+
+ {code}
+
+ );
+}
diff --git a/components/tutorial/connect-supabase-steps.tsx b/components/tutorial/connect-supabase-steps.tsx
new file mode 100644
index 0000000..611c500
--- /dev/null
+++ b/components/tutorial/connect-supabase-steps.tsx
@@ -0,0 +1,62 @@
+import { TutorialStep } from "./tutorial-step";
+
+export function ConnectSupabaseSteps() {
+ return (
+
+
+
+ Head over to{" "}
+
+ database.new
+ {" "}
+ and create a new Supabase project.
+
+
+
+
+
+ Rename the{" "}
+
+ .env.example
+ {" "}
+ file in your Next.js app to{" "}
+
+ .env.local
+ {" "}
+ and populate with values from{" "}
+
+ your Supabase project's API Settings
+
+ .
+
+
+
+
+
+ You may need to quit your Next.js development server and run{" "}
+
+ npm run dev
+ {" "}
+ again to load the new environment variables.
+
+
+
+
+
+ You may need to refresh the page for Next.js to load the new
+ environment variables.
+
+
+
+ );
+}
diff --git a/components/tutorial/fetch-data-steps.tsx b/components/tutorial/fetch-data-steps.tsx
new file mode 100644
index 0000000..c54aa83
--- /dev/null
+++ b/components/tutorial/fetch-data-steps.tsx
@@ -0,0 +1,163 @@
+import { TutorialStep } from "./tutorial-step";
+import { CodeBlock } from "./code-block";
+
+const create = `create table notes (
+ id bigserial primary key,
+ title text
+);
+
+insert into notes(title)
+values
+ ('Today I created a Supabase project.'),
+ ('I added some data and queried it from Next.js.'),
+ ('It was awesome!');
+`.trim();
+
+const rls = `alter table notes enable row level security;
+create policy "Allow public read access" on notes
+for select
+using (true);`.trim();
+
+const server = `import { createClient } from '@/lib/supabase/server'
+
+export default async function Page() {
+ const supabase = await createClient()
+ const { data: notes } = await supabase.from('notes').select()
+
+ return {JSON.stringify(notes, null, 2)}
+}
+`.trim();
+
+const client = `'use client'
+
+import { createClient } from '@/lib/supabase/client'
+import { useEffect, useState } from 'react'
+
+export default function Page() {
+ const [notes, setNotes] = useState(null)
+ const supabase = createClient()
+
+ useEffect(() => {
+ const getData = async () => {
+ const { data } = await supabase.from('notes').select()
+ setNotes(data)
+ }
+ getData()
+ }, [])
+
+ return {JSON.stringify(notes, null, 2)}
+}
+`.trim();
+
+export function FetchDataSteps() {
+ return (
+
+
+
+ Head over to the{" "}
+
+ Table Editor
+ {" "}
+ for your Supabase project to create a table and insert some example
+ data. If you're stuck for creativity, you can copy and paste the
+ following into the{" "}
+
+ SQL Editor
+ {" "}
+ and click RUN!
+
+
+
+
+
+ Supabase enables Row Level Security (RLS) by default. To query data
+ from your notes table, you need to add a policy. You can
+ do this in the{" "}
+
+ Table Editor
+ {" "}
+ or via the{" "}
+
+ SQL Editor
+
+ .
+
+
+ For example, you can run the following SQL to allow public read
+ access:
+
+
+ You can learn more about RLS in the{" "}
+
+ Supabase docs
+
+ .
+
+
+
+
+
+ To create a Supabase client and query data from an Async Server
+ Component, create a new page.tsx file at{" "}
+
+ /app/notes/page.tsx
+ {" "}
+ and add the following.
+
+ Alternatively, you can use a Client Component.
+
+
+
+
+ Head over to the{" "}
+
+ Supabase UI library
+ {" "}
+ and try installing some blocks. For example, you can install a
+ Realtime Chat block by running:
+
+
+
+
+ You're ready to launch your product to the world! 🚀
+
+
+ );
+}
diff --git a/components/tutorial/sign-up-user-steps.tsx b/components/tutorial/sign-up-user-steps.tsx
new file mode 100644
index 0000000..47cce0d
--- /dev/null
+++ b/components/tutorial/sign-up-user-steps.tsx
@@ -0,0 +1,91 @@
+import Link from "next/link";
+import { TutorialStep } from "./tutorial-step";
+import { ArrowUpRight } from "lucide-react";
+
+export function SignUpUserSteps() {
+ return (
+
+ {process.env.VERCEL_ENV === "preview" ||
+ process.env.VERCEL_ENV === "production" ? (
+
+ It looks like this App is hosted on Vercel.
+
+ This particular deployment is
+
+ "{process.env.VERCEL_ENV}"
+ {" "}
+ on
+
+ https://{process.env.VERCEL_URL}
+
+ .
+
+
+ You will need to{" "}
+
+
+
+ -{" "}
+
+ http://localhost:3000/**
+
+
+
+ -{" "}
+
+ {`https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}/**`}
+
+
+
+ -{" "}
+
+ {`https://${process.env.VERCEL_PROJECT_PRODUCTION_URL?.replace(
+ ".vercel.app",
+ "",
+ )}-*-[vercel-team-url].vercel.app/**`}
+ {" "}
+ (Vercel Team URL can be found in{" "}
+
+
+
+ ) : null}
+
+
+ Head over to the{" "}
+
+
+
+ );
+}
diff --git a/components/tutorial/tutorial-step.tsx b/components/tutorial/tutorial-step.tsx
new file mode 100644
index 0000000..0ab9cd4
--- /dev/null
+++ b/components/tutorial/tutorial-step.tsx
@@ -0,0 +1,30 @@
+import { Checkbox } from "../ui/checkbox";
+
+export function TutorialStep({
+ title,
+ children,
+}: {
+ title: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+
+ {title}
+
+ {children}
+
+
+
+ );
+}
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
new file mode 100644
index 0000000..f795980
--- /dev/null
+++ b/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-md 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",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ destructive:
+ "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+ outline: "text-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+export interface BadgeProps
+ extends React.HTMLAttributes,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ );
+}
+
+export { Badge, badgeVariants };
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
new file mode 100644
index 0000000..d09a695
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-8",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean;
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+ return (
+
+>(({ className, ...props }, ref) => (
+
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardDescription,
+ CardContent,
+};
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
new file mode 100644
index 0000000..89148ed
--- /dev/null
+++ b/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..78a751e
--- /dev/null
+++ b/components/ui/dropdown-menu.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+));
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => (
+ svg]:size-4 [&>svg]:shrink-0",
+ inset && "pl-8",
+ className,
+ )}
+ {...props}
+ />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+ >(
+ ({ className, type, ...props }, ref) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+ (null);
+ const [isLoading, setIsLoading] = useState(false);
+ const router = useRouter();
+
+ const handleForgotPassword = async (e: React.FormEvent) => {
+ e.preventDefault();
+ const supabase = createClient();
+ setIsLoading(true);
+ setError(null);
+
+ try {
+ const { error } = await supabase.auth.updateUser({ password });
+ if (error) throw error;
+ // Update this route to redirect to an authenticated route. The user already has an active session.
+ router.push("/protected");
+ } catch (error: unknown) {
+ setError(error instanceof Error ? error.message : "An error occurred");
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ Reset Your Password
+
+ Please enter your new password below.
+
+
+
+
+
+
+