Update Rule Card component
This commit is contained in:
adilallo
+175
-226
@@ -1,20 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import TextInput from "../components/TextInput";
|
||||
import Checkbox from "../components/Checkbox";
|
||||
import CheckboxGroup from "../components/CheckboxGroup";
|
||||
import RadioGroup from "../components/RadioGroup";
|
||||
import RuleCard from "../components/RuleCard";
|
||||
import Image from "next/image";
|
||||
import { getAssetPath } from "../../lib/assetUtils";
|
||||
|
||||
export default function ComponentsPreview() {
|
||||
const [defaultInputValue, setDefaultInputValue] = useState("");
|
||||
const [activeInputValue, setActiveInputValue] = useState("");
|
||||
const [errorInputValue, setErrorInputValue] = useState("");
|
||||
const [standardCheckbox, setStandardCheckbox] = useState(false);
|
||||
const [inverseCheckbox, setInverseCheckbox] = useState(false);
|
||||
const [checkboxGroupValues, setCheckboxGroupValues] = useState<string[]>([]);
|
||||
const [radioValue, setRadioValue] = useState("");
|
||||
const [inverseRadioValue, setInverseRadioValue] = useState("");
|
||||
const [expandedCard, setExpandedCard] = useState<string | null>(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 (
|
||||
<div className="min-h-screen bg-[var(--color-surface-default-primary)] p-[var(--spacing-scale-032)]">
|
||||
@@ -24,236 +44,165 @@ export default function ComponentsPreview() {
|
||||
Component Preview
|
||||
</h1>
|
||||
<p className="font-inter text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
|
||||
Temporary page for viewing and testing new components
|
||||
RuleCard component examples - collapsed/expanded states, size variants, and interactions
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Text Input Section */}
|
||||
{/* Collapsed State - Large */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Text Input Component
|
||||
Collapsed State - Large (L)
|
||||
</h2>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
States
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<TextInput
|
||||
label="Default Text Input"
|
||||
placeholder="Enter text"
|
||||
value={defaultInputValue}
|
||||
onChange={(e) => setDefaultInputValue(e.target.value)}
|
||||
/>
|
||||
<TextInput
|
||||
label="Interactive Text Input (click = active, tab = focus)"
|
||||
placeholder="Enter text"
|
||||
value={activeInputValue}
|
||||
onChange={(e) => setActiveInputValue(e.target.value)}
|
||||
/>
|
||||
<TextInput
|
||||
label="Disabled Text Input"
|
||||
placeholder="Enter text"
|
||||
value=""
|
||||
disabled
|
||||
/>
|
||||
<TextInput
|
||||
label="Error Text Input"
|
||||
placeholder="Enter text"
|
||||
value={errorInputValue}
|
||||
onChange={(e) => setErrorInputValue(e.target.value)}
|
||||
error
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<RuleCard
|
||||
title="Mutual Aid Mondays"
|
||||
description="Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness."
|
||||
backgroundColor="bg-[#b7d9d5]"
|
||||
expanded={false}
|
||||
size="L"
|
||||
className="w-[525px]"
|
||||
logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
|
||||
logoAlt="Mutual Aid Mondays"
|
||||
onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Collapsed State - Medium */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Collapsed State - Medium (M)
|
||||
</h2>
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<RuleCard
|
||||
title="Mutual Aid Mondays"
|
||||
description="Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness."
|
||||
backgroundColor="bg-[#b7d9d5]"
|
||||
expanded={false}
|
||||
size="M"
|
||||
className="w-[289px]"
|
||||
logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
|
||||
logoAlt="Mutual Aid Mondays"
|
||||
onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Expanded State - Large */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Expanded State - Large (L)
|
||||
</h2>
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<RuleCard
|
||||
title="Mutual Aid Mondays"
|
||||
description="Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness."
|
||||
backgroundColor="bg-[#b7d9d5]"
|
||||
expanded={true}
|
||||
size="L"
|
||||
className="w-[568px]"
|
||||
logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
|
||||
logoAlt="Mutual Aid Mondays"
|
||||
categories={sampleCategories}
|
||||
onPillClick={(category, item) => {
|
||||
console.log(`Pill clicked: ${category} - ${item}`);
|
||||
}}
|
||||
onCreateClick={(category) => {
|
||||
console.log(`Create clicked: ${category}`);
|
||||
}}
|
||||
onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Expanded State - Medium */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Expanded State - Medium (M)
|
||||
</h2>
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<RuleCard
|
||||
title="Mutual Aid Mondays"
|
||||
description="Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness."
|
||||
backgroundColor="bg-[#b7d9d5]"
|
||||
expanded={true}
|
||||
size="M"
|
||||
className="w-[398px]"
|
||||
logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
|
||||
logoAlt="Mutual Aid Mondays"
|
||||
categories={sampleCategories}
|
||||
onPillClick={(category, item) => {
|
||||
console.log(`Pill clicked: ${category} - ${item}`);
|
||||
}}
|
||||
onCreateClick={(category) => {
|
||||
console.log(`Create clicked: ${category}`);
|
||||
}}
|
||||
onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Different Background Colors */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Different Background Colors
|
||||
</h2>
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-scale-024)]">
|
||||
<RuleCard
|
||||
title="Consensus clusters"
|
||||
description="Units called Circles have the ability to decide and act on matters in their domains."
|
||||
backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
|
||||
expanded={false}
|
||||
size="L"
|
||||
className="w-[525px]"
|
||||
icon={
|
||||
<Image
|
||||
src={getAssetPath("assets/Icon_Sociocracy.svg")}
|
||||
alt="Sociocracy"
|
||||
width={103}
|
||||
height={103}
|
||||
/>
|
||||
}
|
||||
onClick={() => console.log("Consensus clusters selected")}
|
||||
/>
|
||||
<RuleCard
|
||||
title="Consensus"
|
||||
description="Decisions that affect the group collectively should involve participation of all participants."
|
||||
backgroundColor="bg-[var(--color-surface-default-brand-rust)]"
|
||||
expanded={false}
|
||||
size="L"
|
||||
className="w-[525px]"
|
||||
icon={
|
||||
<Image
|
||||
src={getAssetPath("assets/Icon_Consensus.svg")}
|
||||
alt="Consensus"
|
||||
width={103}
|
||||
height={103}
|
||||
/>
|
||||
}
|
||||
onClick={() => console.log("Consensus selected")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Checkbox Section */}
|
||||
{/* Logo Fallback */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Checkbox Component
|
||||
Logo Fallback (Community Initials)
|
||||
</h2>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
Standard Mode
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<Checkbox
|
||||
label="Standard Checkbox"
|
||||
checked={standardCheckbox}
|
||||
mode="standard"
|
||||
onChange={({ checked }) => setStandardCheckbox(checked)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
Inverse Mode
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<Checkbox
|
||||
label="Inverse Checkbox"
|
||||
checked={inverseCheckbox}
|
||||
mode="inverse"
|
||||
onChange={({ checked }) => setInverseCheckbox(checked)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Checkbox Group Section */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Checkbox Group Component
|
||||
</h2>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
Standard Mode
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<CheckboxGroup
|
||||
name="standard-checkbox-group"
|
||||
value={checkboxGroupValues}
|
||||
onChange={({ value }) => setCheckboxGroupValues(value)}
|
||||
mode="standard"
|
||||
options={[
|
||||
{ value: "option1", label: "Checkbox label" },
|
||||
{
|
||||
value: "option2",
|
||||
label: "Checkbox label",
|
||||
subtext: "Nunc sed hendrerit consequat.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
Inverse Mode
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<CheckboxGroup
|
||||
name="inverse-checkbox-group"
|
||||
value={checkboxGroupValues}
|
||||
onChange={({ value }) => setCheckboxGroupValues(value)}
|
||||
mode="inverse"
|
||||
options={[
|
||||
{ value: "option3", label: "Checkbox label" },
|
||||
{
|
||||
value: "option4",
|
||||
label: "Checkbox label",
|
||||
subtext: "Nunc sed hendrerit consequat.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Radio Group Section */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Radio Group Component
|
||||
</h2>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
Standard Mode
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<RadioGroup
|
||||
name="default-radio"
|
||||
value={radioValue}
|
||||
onChange={({ value }) => setRadioValue(value)}
|
||||
mode="standard"
|
||||
options={[
|
||||
{ value: "option1", label: "Option 1" },
|
||||
{ value: "option2", label: "Option 2" },
|
||||
{ value: "option3", label: "Option 3" },
|
||||
]}
|
||||
/>
|
||||
<RadioGroup
|
||||
name="interactive-radio"
|
||||
value={radioValue}
|
||||
onChange={({ value }) => setRadioValue(value)}
|
||||
mode="standard"
|
||||
options={[
|
||||
{ value: "option1", label: "Option 1" },
|
||||
{ value: "option2", label: "Option 2" },
|
||||
{ value: "option3", label: "Option 3" },
|
||||
]}
|
||||
/>
|
||||
<RadioGroup
|
||||
name="disabled-radio"
|
||||
value=""
|
||||
mode="standard"
|
||||
disabled
|
||||
options={[
|
||||
{ value: "option1", label: "Option 1" },
|
||||
{ value: "option2", label: "Option 2" },
|
||||
{ value: "option3", label: "Option 3" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
Inverse Mode
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<RadioGroup
|
||||
name="inverse-default-radio"
|
||||
value={inverseRadioValue}
|
||||
onChange={({ value }) => setInverseRadioValue(value)}
|
||||
mode="inverse"
|
||||
options={[
|
||||
{ value: "option1", label: "Option 1" },
|
||||
{ value: "option2", label: "Option 2" },
|
||||
{ value: "option3", label: "Option 3" },
|
||||
]}
|
||||
/>
|
||||
<RadioGroup
|
||||
name="inverse-interactive-radio"
|
||||
value={inverseRadioValue}
|
||||
onChange={({ value }) => setInverseRadioValue(value)}
|
||||
mode="inverse"
|
||||
options={[
|
||||
{ value: "option1", label: "Option 1" },
|
||||
{ value: "option2", label: "Option 2" },
|
||||
{ value: "option3", label: "Option 3" },
|
||||
]}
|
||||
/>
|
||||
<RadioGroup
|
||||
name="inverse-disabled-radio"
|
||||
value=""
|
||||
mode="inverse"
|
||||
disabled
|
||||
options={[
|
||||
{ value: "option1", label: "Option 1" },
|
||||
{ value: "option2", label: "Option 2" },
|
||||
{ value: "option3", label: "Option 3" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RuleCard
|
||||
title="Community Example"
|
||||
description="This card shows the logo fallback with community initials when no logo is provided."
|
||||
backgroundColor="bg-[var(--color-surface-default-brand-teal)]"
|
||||
expanded={false}
|
||||
size="L"
|
||||
className="w-[525px]"
|
||||
communityInitials="CE"
|
||||
onClick={() => console.log("Community Example selected")}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user