rootadmin/multisite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

box

Browse source
This commit is contained in:
Mackie 2026-06-03 10:26:41 +08:00
parent 06ba7b97d5
commit a04b3fd456
1 changed files with 24 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/blocks/Skills/Component.tsx
View file

@ -1,5 +1,4 @@
import React from 'react'
import { cn } from '@/utilities/ui'
type SkillCategory = {
title: string
@ -36,39 +35,31 @@ export function SkillsBlock({ heading, keySkills, categories }: SkillsBlockProps
)}
{Array.isArray(categories) && categories.length > 0 && (
<div className="border border-foreground/8 rounded-xl overflow-hidden grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
{categories.map((cat, i) => {
const isLastRow = i >= categories.length - (categories.length % 3 || 3)
const isLastCol = (i + 1) % 3 === 0
return (
<div
key={i}
className={cn(
'p-6 flex flex-col gap-3',
!isLastCol && 'border-r border-foreground/8',
!isLastRow && 'border-b border-foreground/8',
)}
>
<i
className={`ti ${cat.icon} text-foreground/40`}
style={{ fontSize: 20 }}
aria-hidden="true"
/>
<p className="text-sm font-medium text-foreground/85">{cat.title}</p>
<div className="flex flex-wrap gap-1.5">
{Array.isArray(cat.tags) &&
cat.tags.map(({ tag }, j) => (
<span
key={j}
className="text-xs text-foreground/35 border border-foreground/10 rounded-full px-2.5 py-0.5"
>
{tag}
</span>
))}
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{categories.map((cat, i) => (
<div
key={i}
className="p-6 flex flex-col gap-3 rounded-xl bg-muted/50 border-0 shadow-none"
>
<i
className={`ti ${cat.icon} text-foreground/40`}
style={{ fontSize: 20 }}
aria-hidden="true"
/>
<p className="text-sm font-medium text-foreground/85">{cat.title}</p>
<div className="flex flex-wrap gap-1.5">
{Array.isArray(cat.tags) &&
cat.tags.map(({ tag }, j) => (
<span
key={j}
className="text-xs text-foreground/50 bg-background/50 border border-foreground/10 rounded-full px-2.5 py-0.5"
>
{tag}
</span>
))}
</div>
)
})}
</div>
))}
</div>
)}
</section>