wip

src/components/ContentGenerator/ContentGenerator.tsx

@@ -6,14 +6,8 @@ import {
   type LucideIcon,
 } from 'lucide-react';
 import { useId, useState } from 'react';
-import { cn } from '../../lib/classname';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../Select';
+import { FormatItem } from './FormatItem';
+import { GuideOptions } from './GuideOptions';
 
 const allowedFormats = ['course', 'guide', 'roadmap'] as const;
 type AllowedFormat = (typeof allowedFormats)[number];
@@ -95,89 +89,3 @@ export function ContentGenerator() {
     </form>
   );
 }
-
-type FormatItemProps = {
-  label: string;
-  onClick: () => void;
-  icon: LucideIcon;
-  isSelected: boolean;
-};
-
-function FormatItem(props: FormatItemProps) {
-  const { label, onClick, icon: Icon, isSelected } = props;
-
-  return (
-    <button
-      type="button"
-      className={cn(
-        'flex w-full flex-col items-center justify-center gap-2 rounded-lg border border-gray-200 p-2 py-6',
-        isSelected
-          ? 'border-gray-200 bg-gray-100'
-          : 'text-gray-400 hover:bg-gray-50',
-      )}
-      onClick={onClick}
-    >
-      <Icon className="size-6" />
-      <span>{label}</span>
-    </button>
-  );
-}
-
-function GuideOptions() {
-  const [depth, setDepth] = useState<string>('essentials');
-  const depthSelectId = useId();
-
-  const depthOptions = [
-    {
-      label: 'Essentials',
-      value: 'essentials',
-      description: 'Just the code concepts',
-    },
-    {
-      label: 'Detailed',
-      value: 'detailed',
-      description: 'In-depth explanation',
-    },
-    {
-      label: 'Complete',
-      value: 'complete',
-      description: 'Cover the topic fully',
-    },
-  ];
-
-  const selectedDepth = depthOptions.find((option) => option.value === depth);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <label
-        htmlFor={depthSelectId}
-        className="inline-block text-sm text-gray-500"
-      >
-        Choose the guide options
-      </label>
-      <Select value={depth} onValueChange={setDepth}>
-        <SelectTrigger id={depthSelectId}>
-          {selectedDepth && (
-            <div className="flex flex-col gap-1">
-              <span>{selectedDepth.label}</span>
-            </div>
-          )}
-
-          {!selectedDepth && <SelectValue placeholder="Select a depth" />}
-        </SelectTrigger>
-        <SelectContent>
-          {depthOptions.map((option) => (
-            <SelectItem key={option.value} value={option.value}>
-              <div className="flex flex-col gap-1">
-                <span>{option.label}</span>
-                <span className="text-xs text-gray-500">
-                  {option.description}
-                </span>
-              </div>
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  );
-}

src/components/ContentGenerator/FormatItem.tsx

@@ -0,0 +1,29 @@
+import { type LucideIcon } from 'lucide-react';
+import { cn } from '../../lib/classname';
+
+type FormatItemProps = {
+  label: string;
+  onClick: () => void;
+  icon: LucideIcon;
+  isSelected: boolean;
+};
+
+export function FormatItem(props: FormatItemProps) {
+  const { label, onClick, icon: Icon, isSelected } = props;
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'flex w-full flex-col items-center justify-center gap-2 rounded-lg border border-gray-200 p-2 py-6',
+        isSelected
+          ? 'border-gray-200 bg-gray-100'
+          : 'text-gray-400 hover:bg-gray-50',
+      )}
+      onClick={onClick}
+    >
+      <Icon className="size-6" />
+      <span>{label}</span>
+    </button>
+  );
+}

src/components/ContentGenerator/GuideOptions.tsx

@@ -0,0 +1,67 @@
+import { useId, useState } from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../Select';
+
+export function GuideOptions() {
+  const [depth, setDepth] = useState<string>('essentials');
+  const depthSelectId = useId();
+
+  const depthOptions = [
+    {
+      label: 'Essentials',
+      value: 'essentials',
+      description: 'Just the code concepts',
+    },
+    {
+      label: 'Detailed',
+      value: 'detailed',
+      description: 'In-depth explanation',
+    },
+    {
+      label: 'Complete',
+      value: 'complete',
+      description: 'Cover the topic fully',
+    },
+  ];
+
+  const selectedDepth = depthOptions.find((option) => option.value === depth);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label
+        htmlFor={depthSelectId}
+        className="inline-block text-sm text-gray-500"
+      >
+        Choose the guide options
+      </label>
+      <Select value={depth} onValueChange={setDepth}>
+        <SelectTrigger id={depthSelectId}>
+          {selectedDepth && (
+            <div className="flex flex-col gap-1">
+              <span>{selectedDepth.label}</span>
+            </div>
+          )}
+
+          {!selectedDepth && <SelectValue placeholder="Select a depth" />}
+        </SelectTrigger>
+        <SelectContent>
+          {depthOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              <div className="flex flex-col gap-1">
+                <span>{option.label}</span>
+                <span className="text-xs text-gray-500">
+                  {option.description}
+                </span>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}