Arik Chakma
11 months ago
committed by
Kamran Ahmed
parent
44d3724880
commit
58f12af2d7
6 changed files with 187 additions and 37 deletions
@ -0,0 +1,53 @@ |
||||
svg text tspan { |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
text-rendering: optimizeSpeed; |
||||
} |
||||
|
||||
svg > g[data-type='topic'], |
||||
svg > g[data-type='subtopic'], |
||||
svg > g > g[data-type='link-item'], |
||||
svg > g[data-type='button'] { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
svg > g[data-type='topic']:hover > rect { |
||||
fill: #d6d700; |
||||
} |
||||
|
||||
svg > g[data-type='subtopic']:hover > rect { |
||||
fill: #f3c950; |
||||
} |
||||
svg > g[data-type='button']:hover { |
||||
opacity: 0.8; |
||||
} |
||||
|
||||
svg .done rect { |
||||
fill: #cbcbcb !important; |
||||
} |
||||
|
||||
svg .done text, |
||||
svg .skipped text { |
||||
text-decoration: line-through; |
||||
} |
||||
|
||||
svg > g[data-type='topic'].learning > rect + text, |
||||
svg > g[data-type='topic'].done > rect + text { |
||||
fill: black; |
||||
} |
||||
|
||||
svg > g[data-type='subtipic'].done > rect + text, |
||||
svg > g[data-type='subtipic'].learning > rect + text { |
||||
fill: #cbcbcb; |
||||
} |
||||
|
||||
svg .learning rect { |
||||
fill: #dad1fd !important; |
||||
} |
||||
svg .learning text { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
svg .skipped rect { |
||||
fill: #496b69 !important; |
||||
} |
||||
@ -0,0 +1,80 @@ |
||||
import { useRef, useState, type FormEvent } from 'react'; |
||||
import './GenerateRoadmap.css'; |
||||
import { httpPost } from '../../lib/http'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
import { generateRoadmapFromJSON } from '../../../editor/utils/roadmap-generator'; |
||||
import { renderFlowJSON } from '../../../editor/renderer/renderer'; |
||||
import { replaceChildren } from '../../lib/dom'; |
||||
|
||||
export function GenerateRoadmap() { |
||||
const roadmapContainerRef = useRef<HTMLDivElement>(null); |
||||
|
||||
const toast = useToast(); |
||||
|
||||
const [isLoading, setIsLoading] = useState(false); |
||||
const [roadmapName, setRoadmapName] = useState(''); |
||||
|
||||
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { |
||||
e.preventDefault(); |
||||
setIsLoading(true); |
||||
|
||||
const { response, error } = await httpPost( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-generate-roadmap`, |
||||
{ |
||||
title: roadmapName, |
||||
}, |
||||
); |
||||
|
||||
if (error || !response) { |
||||
setIsLoading(false); |
||||
toast.error(error?.message || 'Something went wrong'); |
||||
return; |
||||
} |
||||
|
||||
const { nodes, edges } = generateRoadmapFromJSON(response as any); |
||||
const svg = await renderFlowJSON({ nodes, edges }); |
||||
if (roadmapContainerRef?.current) { |
||||
replaceChildren(roadmapContainerRef?.current, svg); |
||||
} |
||||
setIsLoading(false); |
||||
}; |
||||
|
||||
return ( |
||||
<section className="container grid grid-cols-[280px,1fr]"> |
||||
<form |
||||
className="h-full space-y-4 border-r px-4 py-10" |
||||
onSubmit={handleSubmit} |
||||
> |
||||
<div className="flex w-full flex-col"> |
||||
<label |
||||
htmlFor="roadmap-name" |
||||
className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]' |
||||
> |
||||
Roadmap Title |
||||
</label> |
||||
<input |
||||
type="text" |
||||
name="roadmap-name" |
||||
id="roadmap-name" |
||||
className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1" |
||||
required |
||||
placeholder="Frontend" |
||||
value={roadmapName} |
||||
onInput={(e) => |
||||
setRoadmapName((e.target as HTMLInputElement).value) |
||||
} |
||||
/> |
||||
</div> |
||||
<button |
||||
type="submit" |
||||
disabled={isLoading} |
||||
className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400" |
||||
> |
||||
{isLoading ? 'Please wait...' : 'Generate'} |
||||
</button> |
||||
</form> |
||||
|
||||
<div ref={roadmapContainerRef} className="px-4 py-10" /> |
||||
</section> |
||||
); |
||||
} |
||||
@ -0,0 +1,8 @@ |
||||
--- |
||||
import { GenerateRoadmap } from '../../components/GenerateRoadmap/GenerateRoadmap'; |
||||
import AccountLayout from '../../layouts/AccountLayout.astro'; |
||||
--- |
||||
|
||||
<AccountLayout title='Roadmap AI'> |
||||
<GenerateRoadmap client:load /> |
||||
</AccountLayout> |
||||
Loading…
Reference in new issue