56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import Link from "next/link";
|
|
import { ReactNode } from "react";
|
|
|
|
export type DashTileItem = {
|
|
href: string;
|
|
title: string;
|
|
titleEn: string;
|
|
description: string;
|
|
icon: ReactNode;
|
|
};
|
|
|
|
type DashTileGridProps = {
|
|
tiles: DashTileItem[];
|
|
startDelayMs?: number;
|
|
stepMs?: number;
|
|
};
|
|
|
|
export default function DashTileGrid({
|
|
tiles,
|
|
startDelayMs = 80,
|
|
stepMs = 70,
|
|
}: DashTileGridProps) {
|
|
return (
|
|
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-5">
|
|
{tiles.map((tile, i) => (
|
|
<Link
|
|
key={tile.href + tile.titleEn}
|
|
href={tile.href}
|
|
className="dash-tile dash-enter"
|
|
style={{ animationDelay: `${startDelayMs + i * stepMs}ms` }}
|
|
>
|
|
<span className="mx-auto flex text-muted/65">{tile.icon}</span>
|
|
<div className="mt-5 text-center">
|
|
<h2 className="text-lg leading-tight text-ink">{tile.title}</h2>
|
|
<p
|
|
dir="ltr"
|
|
className="mt-0.5 font-display text-[0.7rem] tracking-[0.08em] text-muted"
|
|
>
|
|
{tile.titleEn}
|
|
</p>
|
|
<p className="mt-3 whitespace-nowrap text-xs leading-6 text-muted">
|
|
{tile.description}
|
|
</p>
|
|
</div>
|
|
<span className="mt-5 text-center text-xs tracking-wide text-muted">
|
|
مشاهده
|
|
<span aria-hidden className="mx-1">
|
|
←
|
|
</span>
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|