wip

src/components/ContentGenerator/ContentGenerator.tsx

@@ -8,6 +8,7 @@ import {
 import { useId, useState } from 'react';
 import { FormatItem } from './FormatItem';
 import { GuideOptions } from './GuideOptions';
+import { FineTuneCourse } from '../GenerateCourse/FineTuneCourse';
 
 const allowedFormats = ['course', 'guide', 'roadmap'] as const;
 type AllowedFormat = (typeof allowedFormats)[number];
@@ -16,7 +17,17 @@ export function ContentGenerator() {
   const [title, setTitle] = useState('');
   const [selectedFormat, setSelectedFormat] = useState<AllowedFormat>('course');
 
+  // guide options
+  const [depth, setDepth] = useState('essentials');
+
+  // fine-tune options
+  const [showFineTuneOptions, setShowFineTuneOptions] = useState(false);
+  const [about, setAbout] = useState('');
+  const [goal, setGoal] = useState('');
+  const [customInstructions, setCustomInstructions] = useState('');
+
   const titleFieldId = useId();
+  const fineTuneOptionsId = useId();
 
   const allowedFormats: {
     label: string;
@@ -78,7 +89,40 @@ export function ContentGenerator() {
           })}
         </div>
       </div>
-      <GuideOptions />
+
+      {selectedFormat === 'guide' && (
+        <GuideOptions depth={depth} setDepth={setDepth} />
+      )}
+
+      {selectedFormat !== 'roadmap' && (
+        <>
+          <div className="flex h-9 items-center gap-2 rounded-lg border border-gray-200 px-3 text-sm">
+            <input
+              type="checkbox"
+              id={fineTuneOptionsId}
+              checked={showFineTuneOptions}
+              onChange={(e) => setShowFineTuneOptions(e.target.checked)}
+            />
+            <label htmlFor={fineTuneOptionsId} className="text-sm">
+              Show fine-tune options
+            </label>
+          </div>
+
+          {showFineTuneOptions && (
+            <FineTuneCourse
+              hasFineTuneData={showFineTuneOptions}
+              about={about}
+              goal={goal}
+              customInstructions={customInstructions}
+              setAbout={setAbout}
+              setGoal={setGoal}
+              setCustomInstructions={setCustomInstructions}
+              className="overflow-hidden rounded-lg border border-gray-200 [&_div:first-child_label]:border-t-0 [&_textarea]:text-sm"
+            />
+          )}
+        </>
+      )}
+
       <button
         type="submit"
         className="flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-black text-sm text-white focus:outline-none"

src/components/ContentGenerator/GuideOptions.tsx

@@ -7,8 +7,13 @@ import {
   SelectValue,
 } from '../Select';
 
-export function GuideOptions() {
-  const [depth, setDepth] = useState<string>('essentials');
+type GuideOptionsProps = {
+  depth: string;
+  setDepth: (depth: string) => void;
+};
+
+export function GuideOptions(props: GuideOptionsProps) {
+  const { depth, setDepth } = props;
   const depthSelectId = useId();
 
   const depthOptions = [
@@ -37,7 +42,7 @@ export function GuideOptions() {
         htmlFor={depthSelectId}
         className="inline-block text-sm text-gray-500"
       >
-        Choose the guide options
+        Choose depth of content
       </label>
       <Select value={depth} onValueChange={setDepth}>
         <SelectTrigger id={depthSelectId}>

src/components/GenerateCourse/AICourse.tsx

@@ -175,7 +175,6 @@ export function AICourse(props: AICourseProps) {
 
           <FineTuneCourse
             hasFineTuneData={hasFineTuneData}
-            setHasFineTuneData={setHasFineTuneData}
             about={about}
             goal={goal}
             customInstructions={customInstructions}

src/components/GenerateCourse/FineTuneCourse.tsx

@@ -1,3 +1,6 @@
+import { useId } from 'react';
+import { cn } from '../../lib/classname';
+
 type QuestionProps = {
   label: string;
   placeholder: string;
@@ -8,13 +11,18 @@ type QuestionProps = {
 
 function Question(props: QuestionProps) {
   const { label, placeholder, value, onChange, autoFocus = false } = props;
+  const questionId = useId();
 
   return (
     <div className="flex flex-col">
-      <label className="border-y bg-gray-100 px-4 py-2.5 text-sm font-medium text-gray-700">
+      <label
+        htmlFor={questionId}
+        className="border-y bg-gray-100 px-4 py-2.5 text-sm font-medium text-gray-700"
+      >
         {label}
       </label>
       <textarea
+        id={questionId}
         placeholder={placeholder}
         className="min-h-[80px] w-full resize-none px-4 py-3 text-gray-700 placeholder:text-gray-400 focus:outline-hidden"
         value={value}
@@ -31,10 +39,10 @@ type FineTuneCourseProps = {
   goal: string;
   customInstructions: string;
 
-  setHasFineTuneData: (hasMetadata: boolean) => void;
   setAbout: (about: string) => void;
   setGoal: (goal: string) => void;
   setCustomInstructions: (customInstructions: string) => void;
+  className?: string;
 };
 
 export function FineTuneCourse(props: FineTuneCourseProps) {
@@ -46,7 +54,7 @@ export function FineTuneCourse(props: FineTuneCourseProps) {
     setAbout,
     setGoal,
     setCustomInstructions,
-    setHasFineTuneData,
+    className,
   } = props;
 
   if (!hasFineTuneData) {
@@ -54,7 +62,7 @@ export function FineTuneCourse(props: FineTuneCourseProps) {
   }
 
   return (
-    <div className="mt-0 flex flex-col">
+    <div className={cn('mt-0 flex flex-col', className)}>
       <Question
         label="Tell us about yourself"
         placeholder="e.g. I am a frontend developer and have good knowledge of HTML, CSS, and JavaScript."