From 017fe3e0a424b453dcb9929cd65bce6e51312a84 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 17 Mar 2025 17:15:35 +0000
Subject: [PATCH] Add UI
---
src/components/GenerateCourse/AICourse.tsx | 3 +
.../GenerateCourse/FineTuneCourse.tsx | 83 +++++++++++++++++++
2 files changed, 86 insertions(+)
create mode 100644 src/components/GenerateCourse/FineTuneCourse.tsx
diff --git a/src/components/GenerateCourse/AICourse.tsx b/src/components/GenerateCourse/AICourse.tsx
index 7d4ea4326..8a92cf99f 100644
--- a/src/components/GenerateCourse/AICourse.tsx
+++ b/src/components/GenerateCourse/AICourse.tsx
@@ -4,6 +4,7 @@ import { cn } from '../../lib/classname';
import { isLoggedIn } from '../../lib/jwt';
import { showLoginPopup } from '../../lib/popup';
import { UserCoursesList } from './UserCoursesList';
+import { FineTuneCourse } from './FineTuneCourse';
export const difficultyLevels = [
'beginner',
@@ -98,6 +99,8 @@ export function AICourse(props: AICourseProps) {
</div>
</div>
+ <FineTuneCourse />
+
<button
type="submit"
disabled={!keyword.trim()}
diff --git a/src/components/GenerateCourse/FineTuneCourse.tsx b/src/components/GenerateCourse/FineTuneCourse.tsx
new file mode 100644
index 000000000..6cf09361a
--- /dev/null
+++ b/src/components/GenerateCourse/FineTuneCourse.tsx
@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { cn } from '../../lib/classname';
+
+type QuestionProps = {
+ label: string;
+ placeholder: string;
+ autoFocus?: boolean;
+ value: string;
+ onChange: (value: string) => void;
+};
+
+function Question(props: QuestionProps) {
+ const { label, placeholder, value, onChange, autoFocus = false } = props;
+
+ return (
+ <div className="flex flex-col">
+ <label className="bg-gray-100 border-y px-4 py-2.5 text-sm font-medium text-gray-700">
+ {label}
+ </label>
+ <textarea
+ placeholder={placeholder}
+ className="min-h-[80px] w-full resize-none px-4 py-3 text-gray-700 placeholder:text-gray-400 focus:outline-none"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ autoFocus={autoFocus}
+ />
+ </div>
+ );
+}
+
+export function FineTuneCourse() {
+ const [isFineTuning, setIsFineTuning] = useState(false);
+
+ const [about, setAbout] = useState('');
+ const [goal, setGoal] = useState('');
+ const [customInstructions, setCustomInstructions] = useState('');
+
+ return (
+ <div className="flex flex-col overflow-hidden rounded-lg border border-gray-200 transition-all">
+ <label
+ className={cn(
+ 'group flex cursor-pointer select-none flex-row items-center gap-2.5 px-4 py-3 text-left text-gray-500 transition-colors hover:bg-gray-100 focus:outline-none',
+ isFineTuning && 'bg-gray-100',
+ )}
+ >
+ <input
+ id="fine-tune-checkbox"
+ type="checkbox"
+ className="h-4 w-4 group-hover:fill-current"
+ onChange={() => setIsFineTuning(!isFineTuning)}
+ />
+ Tell us more to tailor the course (optional){' '}
+ <span className="ml-auto rounded-md bg-gray-400 px-2 py-0.5 text-xs text-white">
+ recommended
+ </span>
+ </label>
+
+ {isFineTuning && (
+ <div className="mt-0 flex flex-col">
+ <Question
+ label="Tell us about your self"
+ placeholder="e.g. I have a background in marketing and I already have some basic knowledge of coding."
+ value={about}
+ onChange={setAbout}
+ autoFocus={true}
+ />
+ <Question
+ label="What is your goal with this course?"
+ placeholder="e.g. I want to learn about advanced topics with focus on practical examples."
+ value={goal}
+ onChange={setGoal}
+ />
+ <Question
+ label="Custom Instructions (Optional)"
+ placeholder="Give instructions to the AI as if you were giving them to a friend."
+ value={customInstructions}
+ onChange={setCustomInstructions}
+ />
+ </div>
+ )}
+ </div>
+ );
+}