mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-11 19:46:16 -08:00
4gray
69db46e122
- Introduced new components for blog posts to enhance UI and functionality. - Added support for featured posts and draft visibility in blog collections. - Created demo blog post to showcase new components and their usage. - Updated existing blog posts to utilize new components and improve content presentation.
38 lines
1.8 KiB
Plaintext
38 lines
1.8 KiB
Plaintext
---
|
|
interface FeatureItem {
|
|
title: string;
|
|
text: string;
|
|
icon?: 'spark' | 'shield' | 'speed' | 'playlist' | 'epg';
|
|
}
|
|
|
|
interface Props {
|
|
items: FeatureItem[];
|
|
}
|
|
|
|
const { items = [] } = Astro.props;
|
|
|
|
const iconPaths = {
|
|
spark: 'M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z',
|
|
shield: 'M12 2l7 4v6c0 5-3.4 9.7-7 10-3.6-.3-7-5-7-10V6l7-4z',
|
|
speed: 'M12 3v2m6.364.636l-1.414 1.414M21 12h-2m-.636 6.364l-1.414-1.414M12 21v-2m-6.364-.636l1.414-1.414M3 12h2m.636-6.364l1.414 1.414M15 12l-4 4',
|
|
playlist: 'M4 6h14M4 10h14M4 14h10M4 18h10M18 16l3 2-3 2v-4z',
|
|
epg: 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
|
|
} as const;
|
|
---
|
|
|
|
<div class="not-prose my-6 grid gap-3 sm:grid-cols-2">
|
|
{items.map((item) => (
|
|
<div class="rounded-xl border border-dashed border-surface-700/70 bg-surface-900/45 p-4">
|
|
<div class="mb-2.5 flex items-center gap-2.5">
|
|
<span class="flex h-7 w-7 items-center justify-center rounded-md border border-accent-500/25 bg-accent-500/[0.1]">
|
|
<svg class="h-3.5 w-3.5 text-accent-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d={iconPaths[item.icon ?? 'spark']} />
|
|
</svg>
|
|
</span>
|
|
<h4 class="m-0 text-sm font-semibold text-surface-100">{item.title}</h4>
|
|
</div>
|
|
<p class="m-0 text-sm leading-relaxed text-surface-400">{item.text}</p>
|
|
</div>
|
|
))}
|
|
</div>
|