wehub-resource-sync
29 lines
1.3 KiB
Plaintext
29 lines
1.3 KiB
Plaintext
---
|
||
import type { FeaturedItem } from '../lib/types';
|
||
|
||
interface Props {
|
||
item: FeaturedItem;
|
||
}
|
||
|
||
const { item } = Astro.props;
|
||
---
|
||
|
||
<a
|
||
href={item.url}
|
||
class="group flex items-center gap-3 p-4 bg-[var(--color-card-bg)] rounded-md border border-[var(--color-border)] hover:bg-[var(--color-card-hover)] hover:border-[var(--color-accent)] transition-all duration-150"
|
||
>
|
||
<div class="w-11 h-11 rounded-sm bg-[var(--color-surface-2)] border border-[var(--color-border)] flex items-center justify-center shrink-0 p-2">
|
||
<img src={item.logo} alt={item.name} class="w-full h-full object-contain" loading="lazy" onerror="this.style.display='none'" />
|
||
</div>
|
||
<div class="min-w-0 flex-1">
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-ui-mono text-[13px] font-bold text-[var(--color-text-primary)] group-hover:text-[var(--color-accent)] transition-colors">{item.name}</span>
|
||
<span class="font-ui-mono text-[10px] font-medium px-2 py-0.5 rounded border border-[var(--color-border)] text-[var(--color-text-tertiary)] bg-[var(--color-surface-2)]">
|
||
{item.tag}
|
||
</span>
|
||
</div>
|
||
<p class="text-[12px] text-[var(--color-text-secondary)] mt-1 leading-[1.5]">{item.description}</p>
|
||
</div>
|
||
<span class="terminal-prompt text-[12px] opacity-0 group-hover:opacity-100 transition-opacity shrink-0">›</span>
|
||
</a>
|