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

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>
+  );
+};