Add react hooks & components to split up the profile page. Learning how to separate hooks

src/components/default/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/default/tutorial/fetch-data-steps.tsx

@@ -0,0 +1,95 @@
+import { TutorialStep, CodeBlock } from '@/components/default/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();
+
+export 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>
+  );
+};

src/components/default/tutorial/index.tsx

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

src/components/default/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>
+  );
+};