91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
|
||
import Image from "next/image";
|
||
import { Card, CardContent } from "poyraz-ui/atoms";
|
||
import { StarRating } from "poyraz-ui/molecules";
|
||
import { REFERENCES } from "@/data/references";
|
||
import { useLocale } from "next-intl";
|
||
import { getLocalizedValue } from "@/lib/locale";
|
||
|
||
type ReferenceCardsProps = {
|
||
className?: string;
|
||
cardClassName?: string;
|
||
lineClamp?: boolean;
|
||
showRating?: boolean;
|
||
};
|
||
|
||
export function ReferenceCards({
|
||
className,
|
||
cardClassName,
|
||
lineClamp,
|
||
showRating = true,
|
||
}: ReferenceCardsProps) {
|
||
const locale = useLocale();
|
||
const hoverClassName =
|
||
"transition-colors duration-200 group-hover:border-red-600/40 group-hover:bg-muted/30";
|
||
|
||
return (
|
||
<div className={className}>
|
||
{REFERENCES.map((item) => {
|
||
const quoteText = getLocalizedValue(item.quote, locale);
|
||
|
||
const card = (
|
||
<Card
|
||
className={`group flex h-full flex-col rounded-sm ${hoverClassName} ${cardClassName || "w-70 shrink-0"}`}
|
||
>
|
||
<CardContent className="flex h-full flex-1 flex-col p-5">
|
||
<span className="font-secondary text-4xl leading-none text-primary">
|
||
“
|
||
</span>
|
||
<blockquote
|
||
className={`mt-1 text-sm leading-relaxed text-secondary-foreground ${lineClamp ? "line-clamp-4" : ""}`}
|
||
>
|
||
{quoteText}
|
||
</blockquote>
|
||
{showRating && item.rating != null ? (
|
||
<StarRating rating={item.rating} className="mt-3" />
|
||
) : null}
|
||
<div className="mt-auto flex items-center gap-3 border-t border-border pt-4">
|
||
<Image
|
||
src={item.avatar}
|
||
alt=""
|
||
width={36}
|
||
height={36}
|
||
sizes="36px"
|
||
className="size-9 rounded-full object-cover"
|
||
/>
|
||
<div className="min-w-0">
|
||
<div className="truncate text-sm font-semibold">
|
||
{item.author}
|
||
</div>
|
||
<div className="truncate text-xs text-muted-foreground">
|
||
{getLocalizedValue(item.role, locale)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
|
||
const href = item.documentHref || item.profileHref;
|
||
|
||
if (!href) {
|
||
return <div key={item.id} className="h-full">{card}</div>;
|
||
}
|
||
|
||
return (
|
||
<a
|
||
key={item.id}
|
||
href={href}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
aria-label={`${item.author} bağlantısı`}
|
||
className="group block h-full"
|
||
>
|
||
{card}
|
||
</a>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
}
|