54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { Link } from "@/i18n/routing";
|
|
import { Card, Typography } from "poyraz-ui/atoms";
|
|
import { VOLUNTEER_COMMUNITY_ITEMS } from "@/data/volunteer-community";
|
|
import { useTranslations, useLocale } from "next-intl";
|
|
import { getLocalizedValue } from "@/lib/locale";
|
|
|
|
export function VolunteerCommunityContent() {
|
|
const t = useTranslations("About");
|
|
const locale = useLocale();
|
|
|
|
return (
|
|
<section className="flex h-full flex-col gap-4 overflow-y-auto">
|
|
<Link
|
|
href="/about"
|
|
className="inline-flex w-fit items-center rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
>
|
|
{t("backToAbout")}
|
|
</Link>
|
|
|
|
<div className="grid gap-3">
|
|
{VOLUNTEER_COMMUNITY_ITEMS.map((item) => (
|
|
<Card key={item.id} className="rounded-sm border-border p-4">
|
|
<Typography variant="large" className="text-base leading-tight">
|
|
{item.title}
|
|
</Typography>
|
|
|
|
<Typography variant="small" className="mt-2 text-muted-foreground">
|
|
<span className="font-semibold text-foreground">{t("timelineLabel")}</span> {getLocalizedValue(item.timeline, locale)}
|
|
</Typography>
|
|
|
|
{item.link ? (
|
|
<Typography variant="small" className="mt-1 text-muted-foreground">
|
|
<span className="font-semibold text-foreground">{t("linkLabel")}</span>{" "}
|
|
<Link
|
|
href={item.link}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-red-600 hover:underline"
|
|
>
|
|
{item.link.replace("https://", "")}
|
|
</Link>
|
|
</Typography>
|
|
) : null}
|
|
|
|
<Typography variant="small" className="mt-1 text-muted-foreground">
|
|
<span className="font-semibold text-foreground">{t("focusLabel")}</span> {getLocalizedValue(item.focus, locale)}
|
|
</Typography>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|