community-rule/app/components-preview/page.tsx

"use client";

import { useState } from "react";
import Tooltip from "../components/Tooltip";
import Alert from "../components/Alert";
import Button from "../components/Button";
import Stepper from "../components/Stepper";
import Progress from "../components/Progress";

export default function ComponentsPreview() {
  const [alertVisible, setAlertVisible] = useState({
    default: true,
    positive: true,
    warning: true,
    danger: true,
    banner: true,
  });

  return (
    <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-[var(--spacing-scale-032)]">
      <div className="max-w-[1200px] mx-auto space-y-[var(--spacing-scale-064)]">
        <header className="space-y-[var(--spacing-scale-008)]">
          <h1 className="font-bricolage-grotesque text-[48px] leading-[56px] font-bold text-[var(--color-content-default-primary)]">
            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
          </p>
        </header>

        {/* Tooltip 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)]">
            Tooltip 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="flex flex-wrap gap-[var(--spacing-scale-024)] items-center">
              <Tooltip text="Tooltip positioned at top" position="top">
                <Button variant="default" size="medium">
                  Hover me (Top)
                </Button>
              </Tooltip>

              <Tooltip text="Tooltip positioned at bottom" position="bottom">
                <Button variant="primary" size="medium">
                  Hover me (Bottom)
                </Button>
              </Tooltip>

              <Tooltip text="Disabled tooltip" disabled>
                <Button variant="secondary" size="medium">
                  Disabled Tooltip
                </Button>
              </Tooltip>

              <Tooltip text="Tooltip with icon button" position="top">
                <button className="p-[var(--spacing-scale-012)] rounded-full hover:bg-[var(--color-surface-default-tertiary)] transition-colors">
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M10 9V11M10 15H10.01M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </button>
              </Tooltip>
            </div>
          </div>
        </section>

        {/* Alert 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)]">
            Alert Component
          </h2>

          <div className="space-y-[var(--spacing-scale-024)]">
            {/* Toast Alerts */}
            <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-016)]">
              <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
                Toast Alerts
              </h3>

              {alertVisible.default && (
                <Alert
                  title="Short alert banner message goes here"
                  description="Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse."
                  status="default"
                  type="toast"
                  onClose={() =>
                    setAlertVisible({ ...alertVisible, default: false })
                  }
                />
              )}

              {alertVisible.positive && (
                <Alert
                  title="Short alert banner message goes here"
                  description="Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse."
                  status="positive"
                  type="toast"
                  onClose={() =>
                    setAlertVisible({ ...alertVisible, positive: false })
                  }
                />
              )}

              {alertVisible.warning && (
                <Alert
                  title="Short alert banner message goes here"
                  description="Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse."
                  status="warning"
                  type="toast"
                  onClose={() =>
                    setAlertVisible({ ...alertVisible, warning: false })
                  }
                />
              )}

              {alertVisible.danger && (
                <Alert
                  title="Short alert banner message goes here"
                  description="Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse."
                  status="danger"
                  type="toast"
                  onClose={() =>
                    setAlertVisible({ ...alertVisible, danger: false })
                  }
                />
              )}
            </div>

            {/* Banner Alerts */}
            <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-016)]">
              <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
                Banner Alerts
              </h3>

              {alertVisible.banner && (
                <Alert
                  title="Short alert banner message goes here"
                  description="Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse."
                  status="default"
                  type="banner"
                  onClose={() =>
                    setAlertVisible({ ...alertVisible, banner: false })
                  }
                />
              )}

              <Alert
                title="Positive banner alert"
                description="This is a positive banner message"
                status="positive"
                type="banner"
              />

              <Alert
                title="Warning banner alert"
                description="This is a warning banner message"
                status="warning"
                type="banner"
              />

              <Alert
                title="Danger banner alert"
                description="This is a danger banner message"
                status="danger"
                type="banner"
              />
            </div>
          </div>
        </section>

        {/* Stepper 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)]">
            Stepper 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>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Step 1 of 5
                </p>
                <Stepper active={1} totalSteps={5} />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Step 2 of 5
                </p>
                <Stepper active={2} totalSteps={5} />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Step 3 of 5
                </p>
                <Stepper active={3} totalSteps={5} />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Step 4 of 5
                </p>
                <Stepper active={4} totalSteps={5} />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Step 5 of 5
                </p>
                <Stepper active={5} totalSteps={5} />
              </div>
            </div>
          </div>
        </section>

        {/* Progress 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)]">
            Progress Component
          </h2>

          <div className="bg-white 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>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Progress: 1-0
                </p>
                <Progress progress="1-0" />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Progress: 1-1
                </p>
                <Progress progress="1-1" />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Progress: 1-2
                </p>
                <Progress progress="1-2" />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Progress: 1-3
                </p>
                <Progress progress="1-3" />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Progress: 1-4
                </p>
                <Progress progress="1-4" />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Progress: 1-5
                </p>
                <Progress progress="1-5" />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Progress: 2-0
                </p>
                <Progress progress="2-0" />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Progress: 2-1
                </p>
                <Progress progress="2-1" />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Progress: 2-2
                </p>
                <Progress progress="2-2" />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Progress: 3-0
                </p>
                <Progress progress="3-0" />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Progress: 3-1
                </p>
                <Progress progress="3-1" />
              </div>
              <div>
                <p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-008)]">
                  Progress: 3-2
                </p>
                <Progress progress="3-2" />
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}