1
0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-10-04 04:41:34 +02:00

AI Tutor - Explore page, sidebar better search (#8476)

* Add sidebar to ai-tutor

* wip

* wip

* Fix mistakes and refacctor

* AI landing page changes

* Update sidebar design

* wip

* wip

* Update AI tutor sidebar

* wip

* Add ai-course dropdown

* Update

* fix: ai chat window position

* Course explanation changes

* Update course

* Tutor sidebar changes

* Refactor staff picks and community

* Update UI for a course

* Improve pagination

* Implement pagination of ai tutor ai courses

* AI explore page with search

* Fix pagination of tutor

* Update tutor header design

* Responsiveness of AI

* Fork alert changes

* Responsiveness of actions

* Forking functionality changes

* Fork confirmation changes

* Add upgrade indicator in sidebar

* fix: ai course access

* fix: next lesson

* Add login to view functionality

* Add search to my picks

---------

Co-authored-by: Arik Chakma <arikchangma@gmail.com>
This commit is contained in:
Kamran Ahmed
2025-04-14 10:54:38 +01:00
committed by GitHub
parent d4a1180c4d
commit 823c31eac4
36 changed files with 1460 additions and 337 deletions

View File

@@ -1,6 +1,3 @@
import { useState } from 'react';
import { cn } from '../../lib/classname';
type QuestionProps = {
label: string;
placeholder: string;
@@ -52,52 +49,31 @@ export function FineTuneCourse(props: FineTuneCourseProps) {
setHasFineTuneData,
} = props;
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-hidden',
hasFineTuneData && 'bg-gray-100',
)}
>
<input
id="fine-tune-checkbox"
type="checkbox"
className="h-4 w-4 group-hover:fill-current"
checked={hasFineTuneData}
onChange={() => {
setHasFineTuneData(!hasFineTuneData);
}}
/>
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>
if (!hasFineTuneData) {
return null;
}
{hasFineTuneData && (
<div className="mt-0 flex flex-col">
<Question
label="Tell us about your self"
placeholder="e.g. I am a frontend developer and have good knowledge of HTML, CSS, and JavaScript."
value={about}
onChange={setAbout}
autoFocus={true}
/>
<Question
label="What is your goal with this course?"
placeholder="e.g. I want to be able to build Node.js APIs with Express.js and MongoDB."
value={goal}
onChange={setGoal}
/>
<Question
label="Custom Instructions (Optional)"
placeholder="Give additional instructions to the AI as if you were giving them to a friend."
value={customInstructions}
onChange={setCustomInstructions}
/>
</div>
)}
return (
<div className="mt-0 flex flex-col">
<Question
label="Tell us about your self"
placeholder="e.g. I am a frontend developer and have good knowledge of HTML, CSS, and JavaScript."
value={about}
onChange={setAbout}
autoFocus={true}
/>
<Question
label="What is your goal with this course?"
placeholder="e.g. I want to be able to build Node.js APIs with Express.js and MongoDB."
value={goal}
onChange={setGoal}
/>
<Question
label="Custom Instructions (Optional)"
placeholder="Give additional instructions to the AI as if you were giving them to a friend."
value={customInstructions}
onChange={setCustomInstructions}
/>
</div>
);
}