Skip to content

Commit

Permalink
feat(ui): update knowledge accordion layout
Browse files Browse the repository at this point in the history
  • Loading branch information
mateusfg7 committed Sep 17, 2023
1 parent 34b1223 commit 43d64d2
Showing 1 changed file with 81 additions and 33 deletions.
114 changes: 81 additions & 33 deletions src/app/about/sections/knowledge/index.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
'use client'

import * as Accordion from '@radix-ui/react-accordion'
import { TbTools } from 'react-icons/tb'
import { ClosedCaptioning } from '@/shared/wrappers/phosphor-icons'

import { knowledgeCategories, studiedTechs } from './knowledge-categories'
import { knowledgeCategories } from './knowledge-categories'
import {
AccordionContent,
AccordionItem,
AccordionTrigger,
Info
KnowledgeInfo
} from './accordion'

export function Knowledge() {
Expand All @@ -18,43 +20,89 @@ export function Knowledge() {
type="single"
collapsible
>
{knowledgeCategories.map(category => (
<AccordionItem key={category.title} value={category.title}>
<AccordionTrigger>{category.title}</AccordionTrigger>
<AccordionContent>
<div className="flex flex-col gap-3">
{category.knowledgeList
.sort((a, b) => b.level - a.level)
.map(knowledge => (
<Info key={knowledge.title} knowledge={knowledge} />
))}
</div>
</AccordionContent>
</AccordionItem>
))}
<AccordionItem value="Studied techs">
<AccordionTrigger>Studied techs</AccordionTrigger>
<AccordionItem value="Skill captions">
<AccordionTrigger>
<span className="flex items-center gap-3">
<ClosedCaptioning />
<span>Skill captions</span>
</span>
</AccordionTrigger>
<AccordionContent>
<div className="space-y-7">
<div className="text-sm text-neutral-500">
These are some languages, tools and technology that {"I've"}{' '}
already studied, but I {"didn't"} delve into it, and I would
need a content review to build something with...
<div className="space-y-3">
<div className="flex items-center gap-6">
<KnowledgeInfo
knowledge={{
title: 'Skill',
color: '#fff',
status: 'god',
icon: TbTools
}}
/>
<span className="text-lg">
Skills that I am god at it, or at least confortable to
study/work again.
</span>
</div>
<div className="flex items-center gap-6">
<KnowledgeInfo
knowledge={{
title: 'Skill',
color: '#fff',
status: 'learning',
icon: TbTools
}}
/>
<span className="text-lg">
Skills I am currently learning and am still in my early
stages.
</span>
</div>
<div className="flex flex-wrap gap-3">
{studiedTechs.map(tech => (
<div
key={tech.title}
className="flex items-center justify-center gap-1 rounded-2xl bg-neutral-900/5 p-2 dark:bg-neutral-300/5"
>
<span>{tech.icon({})}</span>
<span>{tech.title}</span>
</div>
))}
<div className="flex items-center gap-6">
<KnowledgeInfo
knowledge={{
title: 'Skill',
color: '#fff',
status: 'bad',
icon: TbTools
}}
/>
<span className="text-lg">
Skills that {"I've"} already studied, but I {"didn't"} delve
into it, and I would need a content review to build something.
</span>
</div>
</div>
</AccordionContent>
</AccordionItem>
{knowledgeCategories.map(category => {
const learningSkills = category.knowledgeList.filter(
skill => skill.status === 'learning'
)
const godSkills = category.knowledgeList.filter(
skill => skill.status === 'god'
)
const badSkills = category.knowledgeList.filter(
skill => skill.status === 'bad'
)

return (
<AccordionItem key={category.title} value={category.title}>
<AccordionTrigger>{category.title}</AccordionTrigger>
<AccordionContent>
<div className="flex flex-wrap gap-3">
{[...learningSkills, ...godSkills, ...badSkills].map(
knowledge => (
<KnowledgeInfo
knowledge={knowledge}
key={knowledge.title}
/>
)
)}
</div>
</AccordionContent>
</AccordionItem>
)
})}
</Accordion.Root>
</div>
)
Expand Down

0 comments on commit 43d64d2

Please sign in to comment.