"use client";

import * as React from "react";
import { BlankSlateCard } from "./index";

export interface DemoProps {
  title?: string;
  description?: string;
  accentColor?: string;
  showSecondaryAction?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  title = "No Projects Yet",
  description = "You have not created any projects yet.",
  accentColor = "#38BDF8",
  showSecondaryAction = true,
}: DemoProps) {
  const [note, setNote] = React.useState("");

  return (
    <div className="flex w-full flex-col items-center gap-3 p-6">
      <BlankSlateCard
        title={title}
        description={description}
        accentColor={accentColor}
        showSecondaryAction={showSecondaryAction}
        className="max-w-[380px]"
        onPrimaryAction={() => setNote("Opening the new project form.")}
        onSecondaryAction={() => setNote("Opening the import dialog.")}
        onHelpClick={() => setNote("Opening the setup guide.")}
      />
      <p className="min-h-[1em] text-[12px] text-black/45 dark:text-white/45">{note}</p>
    </div>
  );
}

1e:T153c, 1f:T12288,

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    title?: string;
    description?: string;
    accentColor?: string;
    showSecondaryAction?: boolean;
    primaryLabel?: string;
    secondaryLabel?: string;
    helpLabel?: string;
  }>(),
  {
    title: "No Projects Yet",
    description: "You have not created any projects yet.",
    accentColor: "#38BDF8",
    showSecondaryAction: true,
    primaryLabel: "New project",
    secondaryLabel: "Import project",
    helpLabel: "Need a hand getting started?",
  },
);

const emit = defineEmits<{
  primary: [];
  secondary: [];
  help: [];
}>();

/** #rrggbb to rgba() so one accent can drive fills, borders and glows at different strengths. */
function tint(hex: string, alpha: number): string {
  const raw = hex.replace("#", "");
  const full = raw.length === 3 ? raw.replace(/./g, (c) => c + c) : raw.padEnd(6, "0").slice(0, 6);
  const n = Number.parseInt(full, 16) || 0;
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
}

/** Relative luminance of a hex color (WCAG), 0 (black) to 1 (white). */
function relativeLuminance(hex: string): number {
  const raw = hex.replace("#", "");
  const full = raw.length === 3 ? raw.replace(/./g, (c) => c + c) : raw.padEnd(6, "0").slice(0, 6);
  const channels = [0, 2, 4].map((i) => {
    const c = Number.parseInt(full.slice(i, i + 2), 16) / 255;
    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  });
  return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2];
}

/** Pure black or white, whichever reads with more contrast against a fill. */
function inkOn(hex: string): string {
  const l = relativeLuminance(hex);
  const onBlack = (l + 0.05) / 0.05;
  const onWhite = 1.05 / (l + 0.05);
  return onBlack >= onWhite ? "#000000" : "#FFFFFF";
}
</script>

<template>
  <div
    class="bsc"
    role="group"
    :style="{
      '--bsc-accent': props.accentColor,
      '--bsc-tile-bg': `linear-gradient(160deg, ${tint(props.accentColor, 0.22)}, ${tint(props.accentColor, 0.05)})`,
      '--bsc-tile-border': tint(props.accentColor, 0.35),
      '--bsc-secondary-border': tint(props.accentColor, 0.45),
      '--bsc-primary-ink': inkOn(props.accentColor),
    }"
  >
    <div class="bsc__tile" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" :stroke="props.accentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
        <rect x="4" y="4" width="16" height="16" rx="4.5" />
        <path d="M12 9v6M9 12h6" />
      </svg>
    </div>

    <p class="bsc__title">{{ props.title }}</p>
    <p class="bsc__desc">{{ props.description }}</p>

    <div class="bsc__actions">
      <button type="button" class="bsc__primary" @click="emit('primary')">{{ props.primaryLabel }}</button>
      <button v-if="props.showSecondaryAction" type="button" class="bsc__secondary" @click="emit('secondary')">
        {{ props.secondaryLabel }}
      </button>
    </div>

    <button type="button" class="bsc__help" @click="emit('help')">{{ props.helpLabel }}</button>
  </div>
</template>

<style scoped>
.bsc {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  border-radius: 1rem;
  border: 2px dashed color-mix(in srgb, currentColor 15%, transparent);
  background: color-mix(in srgb, currentColor 2.5%, transparent);
  color: currentColor;
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-family: system-ui, sans-serif;
}

.bsc__tile {
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border: 1px solid var(--bsc-tile-border);
  background: var(--bsc-tile-bg);
  animation: bsc-breathe 3.2s ease-in-out 0.4s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bsc__tile {
    animation: none;
  }
}
@keyframes bsc-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.045);
  }
}

.bsc__title {
  margin: 1rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: currentColor;
}
.bsc__desc {
  margin: 0.375rem 0 0;
  max-width: 30ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: currentColor;
  opacity: 0.55;
}

.bsc__actions {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}

.bsc__primary,
.bsc__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    filter 150ms ease,
    background-color 150ms ease,
    transform 120ms ease;
}
.bsc__primary:active,
.bsc__secondary:active {
  transform: scale(0.97);
}

.bsc__primary {
  border: none;
  background: var(--bsc-accent);
  color: var(--bsc-primary-ink);
}
.bsc__primary:hover {
  filter: brightness(1.1);
}

.bsc__secondary {
  border: 1px solid var(--bsc-secondary-border);
  background: transparent;
  color: currentColor;
}
.bsc__secondary:hover {
  background: color-mix(in srgb, var(--bsc-accent) 10%, transparent);
}

.bsc__help {
  margin-top: 1rem;
  border: none;
  background: none;
  padding: 0;
  font-size: 0.75rem;
  color: currentColor;
  opacity: 0.45;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.bsc__help:hover {
  opacity: 0.7;
}
</style>

Nearby