"use client"; import { useState } from "react"; import RuleCard from "../components/RuleCard"; import Image from "next/image"; import { getAssetPath } from "../../lib/assetUtils"; export default function ComponentsPreview() { const [expandedCard, setExpandedCard] = useState(null); const sampleCategories = [ { name: "Values", items: ["Consciousness", "Ecology", "Abundance", "Art", "Decisiveness"], createUrl: "/create/value", }, { name: "Communication", items: ["Signal"], createUrl: "/create/communication", }, { name: "Membership", items: ["Open Admission"], createUrl: "/create/membership", }, { name: "Decision-making", items: ["Lazy Consensus", "Modified Consensus"], createUrl: "/create/decision-making", }, { name: "Conflict management", items: ["Code of Conduct", "Restorative Justice"], createUrl: "/create/conflict-management", }, ]; return (

Component Preview

RuleCard component examples - collapsed/expanded states, size variants, and interactions

{/* Collapsed State - Large */}

Collapsed State - Large (L)

console.log("Card clicked: Mutual Aid Mondays")} />
{/* Collapsed State - Medium */}

Collapsed State - Medium (M)

console.log("Card clicked: Mutual Aid Mondays")} />
{/* Expanded State - Large */}

Expanded State - Large (L)

{ console.log(`Pill clicked: ${category} - ${item}`); }} onCreateClick={(category) => { console.log(`Create clicked: ${category}`); }} onClick={() => console.log("Card clicked: Mutual Aid Mondays")} />
{/* Expanded State - Medium */}

Expanded State - Medium (M)

{ console.log(`Pill clicked: ${category} - ${item}`); }} onCreateClick={(category) => { console.log(`Create clicked: ${category}`); }} onClick={() => console.log("Card clicked: Mutual Aid Mondays")} />
{/* Different Background Colors */}

Different Background Colors

} onClick={() => console.log("Consensus clusters selected")} /> } onClick={() => console.log("Consensus selected")} />
{/* Logo Fallback */}

Logo Fallback (Community Initials)

console.log("Community Example selected")} />
); }