info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-29 12:10:22 +02:00
Code Issues Releases Wiki Activity

UI Change for Title Question

Browse Source
This commit is contained in:
Kamran Ahmed
2023-09-18 18:25:38 +01:00
parent 8dc0424823
commit ea5c3c2c01
1 changed files with 25 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/RoadmapTitleQuestion.tsx
View File

@@ -1,7 +1,7 @@
import {ChevronDown, ChevronUp, GraduationCap} from 'lucide-react'; import { ChevronDown, ChevronUp, GraduationCap } from 'lucide-react';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { useOutsideClick } from '../hooks/use-outside-click'; import { useOutsideClick } from '../hooks/use-outside-click';
import {markdownToHtml} from "../lib/markdown"; import { markdownToHtml } from '../lib/markdown';
type RoadmapTitleQuestionProps = { type RoadmapTitleQuestionProps = {
question: string; question: string;
@@ -24,40 +24,47 @@ export function RoadmapTitleQuestion(props: RoadmapTitleQuestionProps) {
<div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"></div> <div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"></div>
)} )}
<h2 <h2
className="z-50 flex cursor-pointer items-center px-2 py-2 " className="z-50 flex cursor-pointer items-center px-2 py-2.5 font-medium text-base"
aria-expanded={isAnswerVisible ? 'true' : 'false'} aria-expanded={isAnswerVisible ? 'true' : 'false'}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
setIsAnswerVisible(!isAnswerVisible); setIsAnswerVisible(!isAnswerVisible);
}} }}
> >
<span className="flex flex-grow"> <span className="flex items-center flex-grow">
<GraduationCap className="mr-2 inline-block h-5 w-5" /> <GraduationCap className="mr-2 inline-block h-6 w-6" />
{ question } {question}
</span> </span>
<span className="flex-shrink-0 text-gray-400"> <span className="flex-shrink-0 text-gray-400">
<ChevronDown className={`inline-block h-5 w-5`} /> <ChevronDown className={`inline-block h-5 w-5`} />
</span> </span>
</h2> </h2>
{isAnswerVisible && (
<div <div
className="absolute left-0 right-0 top-0 z-50 mt-0 rounded-md border bg-white" className={`absolute left-0 right-0 top-0 z-50 mt-0 rounded-md border bg-white ${
isAnswerVisible ? 'block' : 'hidden'
}`}
ref={ref} ref={ref}
> >
<h2 className="flex items-center px-[7px] pt-[7px] pb-[8px] text-sm font-medium border-b cursor-pointer" onClick={() => setIsAnswerVisible(false)}> {isAnswerVisible && (
<h2
className="flex cursor-pointer items-center border-b px-[7px] py-[9px] text-base font-medium"
onClick={() => setIsAnswerVisible(false)}
>
<span className="flex flex-grow items-center"> <span className="flex flex-grow items-center">
<GraduationCap className="mr-2 inline-block h-5 w-5" /> <GraduationCap className="mr-2 inline-block h-6 w-6" />
{ question } {question}
</span> </span>
<span className="flex-shrink-0 text-gray-400"> <span className="flex-shrink-0 text-gray-400">
<ChevronUp className={`inline-block h-5 w-5`} /> <ChevronUp className={`inline-block h-5 w-5`} />
</span> </span>
</h2> </h2>
<div className='p-3 text-base bg-gray-100 [&>h2]:text-lg [&>h2]:font-semibold [&>h2]:mb-1 [&>h2]:mt-5 [&>p>a]:font-semibold [&>p>a]:underline [&>p>a]:underline-offset-2 [&>p:last-child]:mb-0 [&>p]:mb-3 [&>p]:font-normal [&>p]:leading-relaxed' dangerouslySetInnerHTML={{ __html: markdownToHtml(answer, false) }}>
</div>
</div>
)} )}
<div
className="bg-gray-100 [&>p]:text-gray-800 p-3 text-base [&>h2]:mb-1 [&>h2]:mt-5 [&>h2]:text-base [&>h2]:font-semibold [&>p:last-child]:mb-0 [&>p>a]:font-semibold [&>p>a]:underline [&>p>a]:underline-offset-2 [&>p]:mb-3 [&>p]:font-normal [&>p]:leading-relaxed"
dangerouslySetInnerHTML={{ __html: markdownToHtml(answer, false) }}
></div>
</div>
</div> </div>
); );
} }