fix: update ReferenceCards component for improved hover effects and quote handling

This commit is contained in:
Poyraz
2026-06-29 23:46:23 +03:00
parent edae5846f0
commit d925e02b83
2 changed files with 6 additions and 9 deletions
+5 -8
View File
@@ -12,25 +12,22 @@ type ReferenceCardsProps = {
export function ReferenceCards({ className, cardClassName, lineClamp }: ReferenceCardsProps) { export function ReferenceCards({ className, cardClassName, lineClamp }: ReferenceCardsProps) {
const locale = useLocale(); const locale = useLocale();
const hoverClassName =
"transition-colors duration-200 group-hover:border-red-600/40 group-hover:bg-muted/30 group-hover:shadow-sm";
return ( return (
<div className={className}> <div className={className}>
{REFERENCES.map((item) => { {REFERENCES.map((item) => {
const quoteText = getLocalizedValue(item.quote, locale); const quoteText = getLocalizedValue(item.quote, locale);
const quoteContent = lineClamp ? (
<span className="line-clamp-3">{quoteText}</span>
) : (
quoteText
);
const card = ( const card = (
<TestimonialCard <TestimonialCard
quote={quoteContent as any} quote={quoteText}
author={item.author} author={item.author}
role={getLocalizedValue(item.role, locale)} role={getLocalizedValue(item.role, locale)}
avatar={item.avatar} avatar={item.avatar}
rating={item.rating} rating={item.rating}
className={`flex flex-col rounded-sm ${cardClassName || "w-70 shrink-0"}`} className={`flex flex-col rounded-sm ${lineClamp ? "[&_p]:line-clamp-3" : ""} ${hoverClassName} ${cardClassName || "w-70 shrink-0"}`}
/> />
); );
@@ -47,7 +44,7 @@ export function ReferenceCards({ className, cardClassName, lineClamp }: Referenc
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
aria-label={`${item.author} bağlantısı`} aria-label={`${item.author} bağlantısı`}
className="block h-full transition-transform hover:scale-[1.02]" className="group block h-full"
> >
{card} {card}
</a> </a>
+1 -1
View File
@@ -6,7 +6,7 @@ export function ReferencesDetailContent() {
const t = useTranslations("About"); const t = useTranslations("About");
return ( return (
<section className="flex h-full flex-col gap-4 overflow-y-auto"> <section className="flex flex-col gap-4 overflow-x-hidden">
<Link <Link
href="/about" 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" 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"