64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { Icon } from "@iconify/react";
|
|
import { useTranslations } from "next-intl";
|
|
import {
|
|
Button,
|
|
ButtonIcon,
|
|
ButtonLabel,
|
|
Typography,
|
|
} from "poyraz-ui/atoms";
|
|
import { TECHNOLOGY_STACK } from "@/data/technology-stack";
|
|
import { Link } from "@/i18n/routing";
|
|
import { TechnologyBadge } from "@/components/technology-badge";
|
|
|
|
export function HomeTechnologyStack() {
|
|
const t = useTranslations("Home");
|
|
const technologies = TECHNOLOGY_STACK.flatMap((group) => group.items);
|
|
|
|
return (
|
|
<section
|
|
className="space-y-4 pt-12 md:pt-14"
|
|
aria-labelledby="home-technology-stack-title"
|
|
>
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<Typography
|
|
id="home-technology-stack-title"
|
|
variant="h3"
|
|
component="h2"
|
|
className="tracking-[-0.035em]"
|
|
>
|
|
{t("technologiesTitle")}
|
|
</Typography>
|
|
|
|
<Button
|
|
asChild
|
|
size="sm"
|
|
radius="sm"
|
|
effect="swap"
|
|
swapTarget="both"
|
|
>
|
|
<Link href="/technologies">
|
|
<ButtonLabel>{t("allTechnologies")}</ButtonLabel>
|
|
<ButtonIcon>
|
|
<Icon icon="mdi:arrow-right" width={15} height={15} />
|
|
</ButtonIcon>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="relative max-h-14 overflow-hidden border-t border-border pt-3">
|
|
<div className="flex flex-wrap gap-2" aria-label={t("technologiesTitle")}>
|
|
{technologies.map((technology) => (
|
|
<TechnologyBadge key={technology.id} technology={technology} />
|
|
))}
|
|
</div>
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background via-background/85 to-transparent backdrop-blur-[2px]"
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|