mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-10-02 11:56:42 +02:00
refactor: ai-courses (#8327)
* Refactor ai courses * Refactor * Regenerate roadmap functionality * Title and difficulty to refresh also * Add course regeneration * Improve the non paid user headings * Update * Improve back button logic * Is paid user checks
This commit is contained in:
69
src/components/GenerateCourse/ModifyCoursePrompt.tsx
Normal file
69
src/components/GenerateCourse/ModifyCoursePrompt.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import { useState } from 'react';
|
||||
import { Modal } from '../Modal';
|
||||
|
||||
export type ModifyCoursePromptProps = {
|
||||
onClose: () => void;
|
||||
onSubmit: (prompt: string) => void;
|
||||
};
|
||||
|
||||
export function ModifyCoursePrompt(props: ModifyCoursePromptProps) {
|
||||
const { onClose, onSubmit } = props;
|
||||
|
||||
const [prompt, setPrompt] = useState('');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
onSubmit(prompt);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
onClose={onClose}
|
||||
wrapperClassName="rounded-xl max-w-xl w-full h-auto"
|
||||
bodyClassName="p-6"
|
||||
overlayClassName="items-start md:items-center"
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h2 className="mb-2 text-left text-xl font-semibold">
|
||||
Give AI more context
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500">
|
||||
Pass additional information to the AI to generate a course outline.
|
||||
</p>
|
||||
</div>
|
||||
<form className="flex flex-col gap-2" onSubmit={handleSubmit}>
|
||||
<textarea
|
||||
id="prompt"
|
||||
autoFocus
|
||||
rows={3}
|
||||
value={prompt}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
className="w-full rounded-md border border-gray-200 p-2 placeholder:text-sm focus:outline-black"
|
||||
placeholder="e.g. make sure to add a section on React hooks"
|
||||
/>
|
||||
|
||||
<p className="text-sm text-gray-500">
|
||||
Complete the sentence: "I want AI to..."
|
||||
</p>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
className="rounded-md bg-gray-200 px-4 py-2.5 text-sm text-black hover:opacity-80"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!prompt.trim()}
|
||||
className="rounded-md bg-black px-4 py-2.5 text-sm text-white hover:opacity-80 disabled:opacity-50"
|
||||
>
|
||||
Modify Prompt
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user