mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-21 01:37:33 +08:00
49 lines
1.2 KiB
Plaintext
49 lines
1.2 KiB
Plaintext
---
|
|
import { cn } from '@/utils'
|
|
import { Icon } from 'astro-icon/components'
|
|
|
|
interface Props {
|
|
class?: string
|
|
title: string
|
|
tools: {
|
|
name: string
|
|
description: string
|
|
href?: string
|
|
iconPath?: string
|
|
iconBgColour?: string
|
|
}[]
|
|
}
|
|
const { class: className, title, tools, ...props } = Astro.props
|
|
---
|
|
|
|
<div
|
|
class={cn(
|
|
className,
|
|
'flex flex-col rounded-xl border border-border py-5 px-3 gap-y-4 sm:gap-y-6'
|
|
)}
|
|
{...props}
|
|
>
|
|
<h2 class='px-2 text-lg font-medium'>{title}</h2>
|
|
<div class='grid grid-cols-1 gap-x-2 gap-y-3 sm:grid-cols-2 sm:gap-y-4'>
|
|
{
|
|
tools.map((tool) => (
|
|
<a
|
|
class='group relative hover:bg-transparent '
|
|
href={tool.href}
|
|
id={tool.name}
|
|
target='_blank'
|
|
>
|
|
<div class='relative flex flex-row items-center gap-x-4 px-2 py-0.5 transition-all'>
|
|
<div class='absolute -inset-0 z-10 rounded-lg border border-border bg-muted opacity-0 transition-all group-hover:opacity-50' />
|
|
<Icon name={tool.iconPath ?? 'tool'} class='z-20 h-10 w-10 rounded-lg bg-muted p-2' />
|
|
<div class='z-20 flex flex-col'>
|
|
<h3 class='font-medium'>{tool.name}</h3>
|
|
<p class='text-muted-foreground'>{tool.description}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|