fix: update ReferenceCards component for improved hover effects and quote handling
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user