92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Awards1Props {
|
|
className?: string;
|
|
}
|
|
|
|
const faYear = (year: number) => year.toLocaleString("fa-IR");
|
|
|
|
const Awards1 = ({ className }: Awards1Props) => {
|
|
const awards = [
|
|
{
|
|
name: "برنده جایزه طراحی استایل‌دهی",
|
|
description:
|
|
"به پاس کیفیت ممتاز در طراحی و عملکرد وب مورد تقدیر قرار گرفته است.",
|
|
year: 2024,
|
|
url: "#",
|
|
},
|
|
{
|
|
name: "سایت روز Awwwards",
|
|
description:
|
|
"به دلیل نوآوری و خلاقیت در توسعه وب برگزیده شده است.",
|
|
year: 2023,
|
|
url: "#",
|
|
},
|
|
{
|
|
name: "بلاک‌های رابط کاربری",
|
|
description:
|
|
"به دلیل طراحی رابط کاربری و تجربه کاربری ممتاز مورد تقدیر قرار گرفته است.",
|
|
year: 2023,
|
|
url: "https://www.ShadcnBlocks",
|
|
},
|
|
{
|
|
name: "تعالی در طراحی وب",
|
|
description:
|
|
"به پاس کیفیت بالای طراحی و اجرای فنی مورد تقدیر قرار گرفته است.",
|
|
year: 2022,
|
|
url: "#",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container space-y-10 lg:space-y-12">
|
|
<h1 className="max-w-md text-2xll tracking-tighter lg:text-2xll">
|
|
جایزه‌ها
|
|
</h1>
|
|
<table className="w-full border-collapse">
|
|
<thead>
|
|
<tr className="h-12 border-b text-start text-sm text-foreground/80">
|
|
<th className="font-semibold">نام</th>
|
|
<th className="font-semibold">توضیحات</th>
|
|
<th className="text-end font-semibold">سال</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{awards.map((award, index) => (
|
|
<tr
|
|
key={index}
|
|
className="h-20 border-b text-start text-sm text-foreground/40"
|
|
>
|
|
<td className="text-lg font-light tracking-tight text-foreground lg:text-xl">
|
|
<a
|
|
href={award.url}
|
|
target={award.url.startsWith("http") ? "_blank" : undefined}
|
|
rel={
|
|
award.url.startsWith("http")
|
|
? "noopener noreferrer"
|
|
: undefined
|
|
}
|
|
className="hover:underline"
|
|
title={award.name}
|
|
>
|
|
{award.name}
|
|
</a>
|
|
</td>
|
|
<td>{award.description}</td>
|
|
<td className="text-end text-foreground">
|
|
{faYear(award.year)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Awards1 };
|