Almost done with template perhaps. Have not tested yet though.

src/components/default/form-message.tsx

@@ -0,0 +1,24 @@
+export type Message =
+  | { success: string }
+  | { error: string }
+  | { message: string };
+
+export const FormMessage = ({ message }: { message: Message }) => {
+  return (
+    <div className='flex flex-col gap-2 w-full max-w-md text-sm'>
+      {'success' in message && (
+        <div className='text-foreground border-l-2 border-foreground px-4'>
+          {message.success}
+        </div>
+      )}
+      {'error' in message && (
+        <div className='text-destructive-foreground border-l-2 border-destructive-foreground px-4'>
+          {message.error}
+        </div>
+      )}
+      {'message' in message && (
+        <div className='text-foreground border-l-2 px-4'>{message.message}</div>
+      )}
+    </div>
+  );
+};

src/components/default/index.tsx

@@ -0,0 +1,4 @@
+import { FormMessage, type Message } from '@/components/default/form-message';
+import { SubmitButton } from '@/components/default/submit-button';
+
+export { FormMessage, type Message, SubmitButton };

src/components/default/submit-button.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { type ComponentProps } from 'react';
+import { useFormStatus } from 'react-dom';
+
+type Props = ComponentProps<typeof Button> & {
+  pendingText?: string;
+};
+
+export const SubmitButton = ({
+  children,
+  pendingText = 'Submitting...',
+  ...props
+}: Props) => {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button type='submit' aria-disabled={pending} {...props}>
+      {pending ? pendingText : children}
+    </Button>
+  );
+};

src/components/navigation/auth.tsx

@@ -0,0 +1,34 @@
+'use server';
+
+import Link from 'next/link';
+import { Button } from '@/components/ui';
+import { createClient } from '@/utils/supabase/server';
+import { signOut } from '@/actions/auth';
+
+const NavigationAuth = async () => {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  return user ? (
+    <div className='flex items-center gap-4'>
+      Hello, {user.email}!
+      <form action={signOut}>
+        <Button type='submit' variant='outline'>
+          Sign out
+        </Button>
+      </form>
+    </div>
+  ) : (
+    <div className='flex gap-2'>
+      <Button asChild size='sm' variant={'outline'}>
+        <Link href='/sign-in'>Sign in</Link>
+      </Button>
+      <Button asChild size='sm' variant={'default'}>
+        <Link href='/sign-up'>Sign up</Link>
+      </Button>
+    </div>
+  );
+};
+export default NavigationAuth;

src/components/navigation/index.tsx

@@ -0,0 +1,32 @@
+'use server';
+
+import Link from 'next/link';
+import { Button } from '@/components/ui';
+import NavigationAuth from '@/components/navigation/auth';
+
+const Navigation = () => {
+  return (
+    <nav
+      className='w-full flex justify-center
+      border-b border-b-foreground/10 h-16'
+    >
+      <div
+        className='w-full max-w-5xl flex justify-between
+        items-center p-3 px-5 text-sm'
+      >
+        <div className='flex gap-5 items-center font-semibold'>
+          <Link href={'/'}>T3 Supabase Template</Link>
+          <div className='flex items-center gap-2'>
+            <Button asChild>
+              <Link href='https://git.gbrown.org/gib/T3-Template'>
+                Go to Git Repo
+              </Link>
+            </Button>
+          </div>
+        </div>
+        <NavigationAuth />
+      </div>
+    </nav>
+  );
+};
+export default Navigation;

src/components/tutorial/code-block.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui';
+
+const CopyIcon = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='20'
+    height='20'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    strokeWidth='2'
+    strokeLinecap='round'
+    strokeLinejoin='round'
+  >
+    <rect x='9' y='9' width='13' height='13' rx='2' ry='2'></rect>
+    <path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'></path>
+  </svg>
+);
+
+const CheckIcon = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='20'
+    height='20'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    strokeWidth='2'
+    strokeLinecap='round'
+    strokeLinejoin='round'
+  >
+    <polyline points='20 6 9 17 4 12'></polyline>
+  </svg>
+);
+
+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 (
+    <pre className='bg-muted rounded-md p-6 my-6 relative'>
+      <Button
+        size='icon'
+        onClick={copy}
+        variant={'outline'}
+        className='absolute right-2 top-2'
+      >
+        {icon}
+      </Button>
+      <code className='text-xs p-3'>{code}</code>
+    </pre>
+  );
+}

src/components/tutorial/fetch-data-steps.tsx

@@ -0,0 +1,96 @@
+import { TutorialStep, CodeBlock } from '@/components/tutorial';
+
+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 server = `import { createClient } from '@/utils/supabase/server'
+
+export default async function Page() {
+  const supabase = await createClient()
+  const { data: notes } = await supabase.from('notes').select()
+
+  return <pre>{JSON.stringify(notes, null, 2)}</pre>
+}
+`.trim();
+
+const client = `'use client'
+
+import { createClient } from '@/utils/supabase/client'
+import { useEffect, useState } from 'react'
+
+export default function Page() {
+  const [notes, setNotes] = useState<any[] | null>(null)
+  const supabase = createClient()
+
+  useEffect(() => {
+    const getData = async () => {
+      const { data } = await supabase.from('notes').select()
+      setNotes(data)
+    }
+    getData()
+  }, [])
+
+  return <pre>{JSON.stringify(notes, null, 2)}</pre>
+}
+`.trim();
+
+const FetchDataSteps = () => {
+  return (
+    <ol className='flex flex-col gap-6'>
+      <TutorialStep title='Create some tables and insert some data'>
+        <p>
+          Head over to the{' '}
+          <a
+            href='https://supabase.com/dashboard/project/_/editor'
+            className='font-bold hover:underline text-foreground/80'
+            target='_blank'
+            rel='noreferrer'
+          >
+            Table Editor
+          </a>{' '}
+          for your Supabase project to create a table and insert some example
+          data. If you&apos;re stuck for creativity, you can copy and paste the
+          following into the{' '}
+          <a
+            href='https://supabase.com/dashboard/project/_/sql/new'
+            className='font-bold hover:underline text-foreground/80'
+            target='_blank'
+            rel='noreferrer'
+          >
+            SQL Editor
+          </a>{' '}
+          and click RUN!
+        </p>
+        <CodeBlock code={create} />
+      </TutorialStep>
+
+      <TutorialStep title='Query Supabase data from Next.js'>
+        <p>
+          To create a Supabase client and query data from an Async Server
+          Component, create a new page.tsx file at{' '}
+          <span className='relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs font-medium text-secondary-foreground border'>
+            /app/notes/page.tsx
+          </span>{' '}
+          and add the following.
+        </p>
+        <CodeBlock code={server} />
+        <p>Alternatively, you can use a Client Component.</p>
+        <CodeBlock code={client} />
+      </TutorialStep>
+
+      <TutorialStep title='Build in a weekend and scale to millions!'>
+        <p>You&apos;re ready to launch your product to the world! 🚀</p>
+      </TutorialStep>
+    </ol>
+  );
+};
+export default FetchDataSteps;

src/components/tutorial/index.tsx

@@ -0,0 +1,5 @@
+import { CodeBlock } from '@/components/tutorial/code-block';
+import FetchDataSteps from '@/components/tutorial/fetch-data-steps';
+import { TutorialStep } from '@/components/tutorial/tutorial-step';
+
+export { CodeBlock, FetchDataSteps, TutorialStep };

src/components/tutorial/tutorial-step.tsx

@@ -0,0 +1,30 @@
+import { Checkbox } from '@/components/ui';
+
+export const TutorialStep = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <li className='relative'>
+      <Checkbox
+        id={title}
+        name={title}
+        className={`absolute top-[3px] mr-2 peer`}
+      />
+      <label
+        htmlFor={title}
+        className={`relative text-base text-foreground peer-checked:line-through font-medium`}
+      >
+        <span className='ml-8'>{title}</span>
+        <div
+          className={`ml-8 text-sm peer-checked:line-through font-normal text-muted-foreground`}
+        >
+          {children}
+        </div>
+      </label>
+    </li>
+  );
+};

src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+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 badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span';
+
+  return (
+    <Comp
+      data-slot='badge'
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot='checkbox'
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot='checkbox-indicator'
+        className='flex items-center justify-center text-current transition-none'
+      >
+        <CheckIcon className='size-3.5' />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

src/components/ui/index.tsx

@@ -0,0 +1,7 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export { Badge, Button, Checkbox, Input, Label };

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot='input'
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+import { cn } from '@/lib/utils';
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot='label'
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };