adilallo
223 lines
8.3 KiB
TypeScript
223 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useTranslation } from "../../contexts/MessagesContext";
|
|
import type { RuleCardViewProps } from "./RuleCard.types";
|
|
|
|
export function RuleCardView({
|
|
title,
|
|
description,
|
|
icon,
|
|
backgroundColor,
|
|
className,
|
|
onClick,
|
|
onKeyDown,
|
|
expanded,
|
|
size,
|
|
categories,
|
|
onPillClick,
|
|
onCreateClick,
|
|
logoUrl,
|
|
logoAlt,
|
|
communityInitials,
|
|
}: RuleCardViewProps) {
|
|
const t = useTranslation("ruleCard");
|
|
const ariaLabel = t("ariaLabel").replace("{title}", title);
|
|
|
|
// Size-based styling
|
|
const isLarge = size === "L";
|
|
|
|
// Card dimensions - make width flexible for grid layouts, but can be overridden via className
|
|
// For standalone/preview use, add fixed width via className
|
|
const cardPadding = isLarge ? "p-[24px]" : "p-[16px]";
|
|
const cardGap = expanded
|
|
? "gap-[16px]"
|
|
: isLarge ? "gap-[10px]" : "gap-[12px]";
|
|
|
|
// Logo/Icon dimensions
|
|
const logoSize = isLarge ? 103 : 56;
|
|
const logoContainerClass = isLarge
|
|
? "size-[103px]"
|
|
: "size-[56px]";
|
|
|
|
// Title typography
|
|
const titleClass = isLarge
|
|
? "font-bricolage-grotesque font-extrabold text-[36px] leading-[44px]"
|
|
: "font-bricolage-grotesque font-bold text-[24px] leading-[32px]";
|
|
|
|
// Description typography
|
|
const descriptionClass = isLarge
|
|
? "font-inter font-medium text-[18px] leading-[24px]"
|
|
: "font-inter font-medium text-[14px] leading-[16px]";
|
|
|
|
// Category label typography
|
|
const categoryLabelClass = "font-inter font-normal text-[14px] leading-[20px]";
|
|
|
|
// Pill typography
|
|
const pillTextClass = "font-inter font-medium text-[12px] leading-[14px]";
|
|
|
|
// Render logo/icon
|
|
const renderLogo = () => {
|
|
if (logoUrl) {
|
|
// Check if it's a localhost URL or external URL that needs regular img tag
|
|
const isLocalhost = logoUrl.startsWith("http://localhost") || logoUrl.startsWith("https://localhost");
|
|
|
|
if (isLocalhost) {
|
|
return (
|
|
<div className={`${logoContainerClass} relative rounded-full overflow-hidden mix-blend-luminosity`}>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={logoUrl}
|
|
alt={logoAlt || title}
|
|
width={logoSize}
|
|
height={logoSize}
|
|
className="absolute inset-0 w-full h-full object-cover rounded-full"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`${logoContainerClass} relative rounded-full overflow-hidden mix-blend-luminosity`}>
|
|
<Image
|
|
src={logoUrl}
|
|
alt={logoAlt || title}
|
|
width={logoSize}
|
|
height={logoSize}
|
|
className="absolute inset-0 w-full h-full object-cover rounded-full"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (icon) {
|
|
return (
|
|
<div className={`${logoContainerClass} flex items-center justify-center`}>
|
|
{icon}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (communityInitials) {
|
|
return (
|
|
<div className={`${logoContainerClass} rounded-full bg-[var(--color-surface-default-primary)] flex items-center justify-center`}>
|
|
<span className={`${isLarge ? "text-[36px]" : "text-[24px]"} font-bricolage-grotesque font-bold text-[var(--color-content-inverse-primary)]`}>
|
|
{communityInitials}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
// Handle pill click with stopPropagation
|
|
const handlePillClick = (e: React.MouseEvent<HTMLButtonElement>, categoryName: string, item: string) => {
|
|
e.stopPropagation();
|
|
if (onPillClick) {
|
|
onPillClick(categoryName, item);
|
|
}
|
|
};
|
|
|
|
// Handle create button click with stopPropagation
|
|
const handleCreateClick = (e: React.MouseEvent<HTMLButtonElement>, categoryName: string) => {
|
|
e.stopPropagation();
|
|
if (onCreateClick) {
|
|
onCreateClick(categoryName);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`${backgroundColor} ${cardPadding} ${cardGap} rounded-[var(--radius-measures-radius-small)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] flex flex-col items-start justify-center relative w-full ${className}`}
|
|
tabIndex={0}
|
|
role="button"
|
|
aria-label={ariaLabel}
|
|
aria-expanded={expanded}
|
|
onClick={onClick}
|
|
onKeyDown={onKeyDown}
|
|
>
|
|
{/* Header Container */}
|
|
<div className={`border-b border-[var(--color-content-inverse-primary)] flex gap-[16px] items-center relative shrink-0 w-full ${isLarge ? "min-h-[103px]" : "min-h-[56px]"}`}>
|
|
{/* Logo/Icon Container */}
|
|
{renderLogo() && (
|
|
<div className="flex items-center justify-center shrink-0">
|
|
{renderLogo()}
|
|
</div>
|
|
)}
|
|
{/* Title Container */}
|
|
{title && (
|
|
<div className={`border-l border-[var(--color-content-inverse-primary)] flex ${isLarge ? "px-[16px] py-[24px]" : "px-[16px] py-[12px]"} items-center justify-center flex-1 min-w-0`}>
|
|
<h3 className={`${titleClass} text-[var(--color-content-inverse-primary)] overflow-hidden text-ellipsis w-full`}>
|
|
{title}
|
|
</h3>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{expanded ? (
|
|
<>
|
|
{/* Categories Section */}
|
|
{categories && categories.length > 0 && (
|
|
<div className="flex flex-col gap-[16px] items-start px-[12px] relative shrink-0 w-full">
|
|
{categories.map((category, categoryIndex) => (
|
|
<div key={categoryIndex} className="flex flex-col gap-[var(--spacing-scale-008)] items-start relative shrink-0 w-full">
|
|
{/* Category Label */}
|
|
<div className="flex items-baseline gap-[var(--spacing-scale-008)] pr-[var(--spacing-scale-004)] relative shrink-0 w-full">
|
|
<h4 className={`${categoryLabelClass} text-[var(--color-content-inverse-primary)]`}>
|
|
{category.name}
|
|
</h4>
|
|
</div>
|
|
{/* Pills Container */}
|
|
<div className="flex flex-wrap gap-[var(--spacing-scale-008)] items-center relative shrink-0 w-full">
|
|
{/* Pills */}
|
|
{category.items && category.items.map((item, itemIndex) => (
|
|
<button
|
|
key={itemIndex}
|
|
type="button"
|
|
className="bg-transparent border-[1.25px] border-[var(--color-content-inverse-primary)] h-[30px] px-[var(--spacing-scale-008)] rounded-[var(--radius-measures-radius-full)] flex items-center justify-center shrink-0 cursor-pointer"
|
|
onClick={(e) => handlePillClick(e, category.name, item)}
|
|
aria-label={`Edit ${item}`}
|
|
>
|
|
<span className={`${pillTextClass} text-[var(--color-content-inverse-primary)]`}>
|
|
{item}
|
|
</span>
|
|
</button>
|
|
))}
|
|
{/* Add Button */}
|
|
<button
|
|
type="button"
|
|
className="bg-transparent border-[1.25px] border-[var(--color-content-inverse-primary)] size-[30px] rounded-[var(--radius-measures-radius-full)] flex items-center justify-center shrink-0 cursor-pointer"
|
|
onClick={(e) => handleCreateClick(e, category.name)}
|
|
aria-label={`Add new ${category.name}`}
|
|
>
|
|
<span className="text-[var(--color-content-inverse-primary)] text-[14px] leading-[14px]">+</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{/* Footer: Description */}
|
|
{description && (
|
|
<div className="border-t border-[var(--color-content-inverse-primary)] pt-[16px] relative shrink-0 w-full">
|
|
<p className={`${descriptionClass} text-[var(--color-content-inverse-primary)]`}>
|
|
{description}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
/* Collapsed State: Description */
|
|
description && (
|
|
<div className="flex items-center justify-center relative shrink-0 w-full">
|
|
<p className={`${descriptionClass} text-[var(--color-content-inverse-primary)] flex-1`}>
|
|
{description}
|
|
</p>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
);
|
|
}
|