93 lines
3.7 KiB
TypeScript
93 lines
3.7 KiB
TypeScript
import CheckCircleIcon from "@/assets/report/check-circle.svg?react";
|
|
import XCircleIcon from "@/assets/report/x-circle.svg?react";
|
|
import { Surface } from "@/components/atoms/Surface";
|
|
import type { BrandGuide } from "@/features/plan/types/marketingPlan";
|
|
|
|
type BrandingVisualIdentityTabProps = {
|
|
data: BrandGuide;
|
|
};
|
|
|
|
export function BrandingVisualIdentityTab({ data }: BrandingVisualIdentityTabProps) {
|
|
return (
|
|
<div className="space-y-8 animate-fade-in-up">
|
|
<div>
|
|
<h3 className="font-serif font-bold text-2xl text-navy-900 mb-4 break-keep">Color Palette</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|
{data.colors.map((swatch, i) => (
|
|
<Surface key={`${swatch.name}-${swatch.hex}-${i}`} padding="none" overflowHidden>
|
|
<div className="h-20" style={{ backgroundColor: swatch.hex }} />
|
|
<div className="p-3">
|
|
<p className="font-mono body-14 text-neutral-80">{swatch.hex}</p>
|
|
<p className="title-14 text-navy-900 break-keep">{swatch.name}</p>
|
|
<p className="label-12 text-neutral-60 break-keep">{swatch.usage}</p>
|
|
</div>
|
|
</Surface>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-serif font-bold text-2xl text-navy-900 mb-4 break-keep">Typography</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{data.fonts.map((spec) => (
|
|
<Surface key={`${spec.family}-${spec.weight}`}>
|
|
<p className="label-12 text-neutral-60 uppercase tracking-wide mb-2 break-keep">{spec.family}</p>
|
|
<p
|
|
className={`mb-3 text-navy-900 break-keep ${
|
|
spec.weight.toLowerCase().includes("bold") ? "text-2xl font-bold" : "text-lg"
|
|
}`}
|
|
style={{ fontFamily: spec.family }}
|
|
>
|
|
{spec.sampleText}
|
|
</p>
|
|
<p className="label-12 text-neutral-60 break-keep">
|
|
<span className="font-medium text-neutral-80">{spec.weight}</span>
|
|
{" · "}
|
|
{spec.usage}
|
|
</p>
|
|
</Surface>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-serif font-bold text-2xl text-navy-900 mb-4 break-keep">Logo Rules</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{data.logoRules.map((rule) => (
|
|
<div
|
|
key={rule.rule}
|
|
className={`rounded-2xl p-5 ${
|
|
rule.correct
|
|
? "border-2 border-[var(--color-status-good-border)] bg-[var(--color-status-good-bg)]/30"
|
|
: "border-2 border-[var(--color-status-critical-border)] bg-[var(--color-status-critical-bg)]/30"
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
{rule.correct ? (
|
|
<CheckCircleIcon
|
|
width={20}
|
|
height={20}
|
|
className="text-[var(--color-status-good-dot)] shrink-0 mt-1"
|
|
aria-hidden
|
|
/>
|
|
) : (
|
|
<XCircleIcon
|
|
width={20}
|
|
height={20}
|
|
className="text-[var(--color-status-critical-dot)] shrink-0 mt-1"
|
|
aria-hidden
|
|
/>
|
|
)}
|
|
<div className="min-w-0">
|
|
<p className="title-14 text-navy-900 break-keep">{rule.rule}</p>
|
|
<p className="body-14 text-neutral-70 mt-1 break-keep">{rule.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|