146 lines
4.3 KiB
TypeScript
146 lines
4.3 KiB
TypeScript
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Skills2Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Skills2 = ({ className }: Skills2Props) => {
|
|
const stack = [
|
|
{
|
|
name: "Figma",
|
|
category: "ابزار طراحی",
|
|
icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
|
|
usage: "۷۵٪",
|
|
},
|
|
{
|
|
name: "React",
|
|
category: "کتابخانه جاوااسکریپت",
|
|
icon: "/block-media/shadcnblocks/block/logos/react-icon.svg",
|
|
usage: "۹۵٪",
|
|
},
|
|
{
|
|
name: "Next.js",
|
|
category: "فریم‌ورک فول‌استک",
|
|
icon: "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
|
|
usage: "۹۰٪",
|
|
className: "dark:invert",
|
|
},
|
|
{
|
|
name: "استایل‌دهی مدرن",
|
|
category: "فریم‌ورک CSS",
|
|
icon: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
|
|
usage: "۹۰٪",
|
|
},
|
|
{
|
|
name: "v0",
|
|
category: "ابزار هوش مصنوعی",
|
|
icon: "/block-media/shadcnblocks/block/logos/v0-icon.svg",
|
|
usage: "۸۵٪",
|
|
className: "dark:invert",
|
|
},
|
|
{
|
|
name: "Vite",
|
|
category: "ابزار بیلد",
|
|
icon: "/block-media/shadcnblocks/block/logos/vite-icon.svg",
|
|
usage: "۸۰٪",
|
|
},
|
|
{
|
|
name: "TypeScript",
|
|
category: "زبان برنامه‌نویسی",
|
|
icon: "/block-media/shadcnblocks/block/logos/typescript-icon.svg",
|
|
usage: "۸۵٪",
|
|
},
|
|
{
|
|
name: "GitHub",
|
|
category: "کنترل نسخه",
|
|
icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
|
|
usage: "۹۵٪",
|
|
className: "dark:invert",
|
|
},
|
|
{
|
|
name: "ویرایشگر کد",
|
|
category: "ویرایشگر کد",
|
|
icon: "/block-media/shadcnblocks/block/logos/vscode-icon.svg",
|
|
usage: "۷۰٪",
|
|
},
|
|
{
|
|
name: "Vercel",
|
|
category: "پلتفرم میزبانی",
|
|
icon: "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
|
|
usage: "۸۰٪",
|
|
className: "dark:invert",
|
|
},
|
|
{
|
|
name: "Notion",
|
|
category: "ابزار بهره‌وری",
|
|
icon: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
|
|
usage: "۸۵٪",
|
|
},
|
|
{
|
|
name: "Cursor",
|
|
category: "ویرایشگر کد هوشمند",
|
|
icon: "/block-media/shadcnblocks/block/logos/cursor-icon.svg",
|
|
usage: "۹۵٪",
|
|
className: "dark:invert",
|
|
},
|
|
{
|
|
name: "Astro",
|
|
category: "فریم‌ورک وب",
|
|
icon: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
|
|
usage: "۶۰٪",
|
|
className: "dark:invert",
|
|
},
|
|
{
|
|
name: "Shadcn/ui",
|
|
category: "کتابخانه کامپوننت",
|
|
icon: "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
|
|
usage: "۹۰٪",
|
|
className: "dark:invert",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container space-y-10">
|
|
<h1 className="text-2xll font-semibold tracking-tight lg:text-2xll">
|
|
ابزارها و پشته فنی
|
|
</h1>
|
|
|
|
<ul className="relative grid w-full gap-3 lg:grid-cols-2">
|
|
{stack.map((item, index) => (
|
|
<li
|
|
key={index}
|
|
className="flex flex-row items-center justify-between gap-10 rounded-2xl p-2"
|
|
style={{
|
|
backgroundImage:
|
|
"repeating-linear-gradient(45deg, transparent, transparent 2px, var(--muted) 2px, var(--muted) 4px)",
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex size-20 items-center justify-center rounded-2xl p-2">
|
|
<img
|
|
src={item.icon}
|
|
alt={item.name}
|
|
className={cn("h-8 w-8 object-contain", item.className)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-semibold tracking-tight">
|
|
{item.name}
|
|
</h2>
|
|
<p className="text-sm text-foreground/50">{item.category}</p>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-full ps-5 font-semibold">{item.usage}</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Skills2 };
|