info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-21 16:41:24 +02:00
Code Issues Releases Wiki Activity

UI changes for personalize modal

Browse Source
This commit is contained in:
Kamran Ahmed
2025-07-29 21:18:56 +01:00
parent 7e1c9b18e5
commit 5ff851c095
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/PersonalizedRoadmap/PersonalizedRoadmapModal.tsx
View File

@@ -1,4 +1,4 @@
import { PersonStandingIcon, XIcon } from 'lucide-react';
import { PersonStandingIcon, Trash2 } from 'lucide-react';
import { useId, useState, type FormEvent } from 'react';
import { Modal } from '../Modal';
@@ -32,7 +32,7 @@ export function PersonalizedRoadmapModal(props: PersonalizedRoadmapModalProps) {
<textarea
id={infoFieldId}
className="h-[150px] w-full resize-none rounded-xl border border-gray-200 p-3 focus:border-gray-500 focus:outline-none"
placeholder="I already know about HTML, CSS, and JavaScript..."
placeholder="I am a beginner, give me a simpler version of the roadmap"
value={info}
onChange={(e) => setInfo(e.target.value)}
autoFocus
@@ -42,15 +42,16 @@ export function PersonalizedRoadmapModal(props: PersonalizedRoadmapModalProps) {
<div className="mt-2 grid grid-cols-2 gap-2">
<button
type="button"
className="flex items-center justify-center gap-2 rounded-xl border border-gray-200 p-2 px-2 text-gray-600 hover:bg-gray-100 focus:outline-none"
className="flex text-sm items-center justify-center gap-2 rounded-xl border border-red-200 p-2 px-2 text-red-600 hover:bg-red-50 focus:outline-none"
onClick={onClearProgress}
>
<XIcon className="h-4 w-4" />
Clear Personalized
<Trash2 className="h-4 w-4" />
Reset
</button>
<button
type="submit"
className="flex items-center justify-center gap-2 rounded-xl bg-black p-2 px-2 text-white hover:opacity-90 focus:outline-none"
disabled={!info.trim()}
className="flex disabled:opacity-50 disabled:cursor-not-allowed items-center justify-center gap-2 rounded-xl bg-black p-2 px-2 text-white hover:opacity-90 focus:outline-none"
>
<PersonStandingIcon className="h-4 w-4" />
Personalize