"use client";

import { DeferredPostCard, type PostCardState } from "./index";

export interface DemoProps {
  state?: PostCardState;
  loadDelay?: number;
  showMedia?: boolean;
  accent?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ state = "loading", loadDelay = 1400, showMedia = false, accent = "#7C5CFF" }: DemoProps) {
  return (
    <div className="mx-auto w-full max-w-[420px] p-6">
      <DeferredPostCard state={state} loadDelay={loadDelay} showMedia={showMedia} accent={accent} />
    </div>
  );
}

1d:T26f0, 1e:T220b5,

<script setup lang="ts">
import { computed, onBeforeUnmount, ref, watch } from "vue";

type PostCardState = "loading" | "loaded" | "error";

const HEADER_H = 40;
const GAP = 12;
const BODY_H = 66;
const FOOTER_H = 16;
const MEDIA_H = 152;
const BARS = [34, 52, 44, 68, 50, 82, 60, 92, 66, 48];
const STEP = 0.09;
const START = 0.05;

const props = withDefaults(
  defineProps<{
    state?: PostCardState;
    loadDelay?: number;
    showMedia?: boolean;
    accent?: string;
  }>(),
  {
    state: "loading",
    loadDelay: 1400,
    showMedia: false,
    accent: "#7C5CFF",
  },
);

const phase = ref<PostCardState>(props.state);
let timer: ReturnType<typeof setTimeout> | undefined;

function clearTimer() {
  if (timer !== undefined) {
    clearTimeout(timer);
    timer = undefined;
  }
}

function armTimer() {
  clearTimer();
  if (phase.value !== "loading") return;
  timer = setTimeout(() => {
    phase.value = "loaded";
  }, Math.max(props.loadDelay, 0));
}

watch(
  () => props.state,
  (next) => {
    phase.value = next;
  },
);
watch([phase, () => props.loadDelay], armTimer, { immediate: true });
onBeforeUnmount(clearTimer);

function retry() {
  phase.value = "loading";
}

const contentHeight = computed(() => HEADER_H + GAP + BODY_H + GAP + FOOTER_H + (props.showMedia ? GAP + MEDIA_H : 0));
const liveText = computed(() => (phase.value === "loading" ? "Loading post" : phase.value === "loaded" ? "Post loaded" : "Post failed to load"));
const avatarBg = computed(() => `linear-gradient(135deg, ${props.accent}, color-mix(in srgb, ${props.accent} 55%, #0B0D10))`);
const mediaBg = computed(() => `linear-gradient(160deg, color-mix(in srgb, ${props.accent} 22%, #10131a), #0d1016)`);
const footerDelay = computed(() => START + (props.showMedia ? 3 : 2) * STEP);
const shellAvatarBg = computed(() => `linear-gradient(135deg, color-mix(in srgb, ${props.accent} 38%, transparent), color-mix(in srgb, ${props.accent} 12%, transparent))`);
const shellMediaBg = computed(() => `linear-gradient(160deg, color-mix(in srgb, ${props.accent} 16%, transparent), transparent)`);
const shellMarkBg = computed(() => `color-mix(in srgb, ${props.accent} 45%, transparent)`);
const sheenBg = computed(() => `linear-gradient(100deg, transparent, color-mix(in srgb, ${props.accent} 24%, transparent) 46%, transparent)`);
</script>

<template>
  <div class="card" :aria-busy="phase === 'loading'">
    <span role="status" class="sr-only">{{ liveText }}</span>
    <div class="stack" :style="{ minHeight: `${contentHeight}px` }">
      <div class="pane shell" :class="{ active: phase === 'loading' }" aria-hidden="true">
        <div class="row">
          <div class="block avatar" :style="{ background: shellAvatarBg }"></div>
          <div class="col">
            <div class="name-row">
              <div class="block line name-line"></div>
              <span class="shell-mark" :style="{ background: shellMarkBg }"></span>
            </div>
            <div class="block line handle-line"></div>
          </div>
        </div>
        <div class="col body-col">
          <div class="block line body-line l1"></div>
          <div class="block line body-line l2"></div>
          <div class="block line body-line l3"></div>
        </div>
        <div v-if="showMedia" class="block media-block" :style="{ background: shellMediaBg }"></div>
        <div class="block line footer-line"></div>
        <span class="sheen" :style="{ background: sheenBg }"></span>
      </div>

      <div class="pane loaded" :class="{ active: phase === 'loaded' }">
        <div class="row" :style="{ animationDelay: `${START}s` }">
          <div class="avatar-fill" :style="{ background: avatarBg }">JV</div>
          <div class="col">
            <div class="identity">
              <span class="name">Jordan Vale</span>
              <span class="mark" :style="{ background: accent }"></span>
            </div>
            <span class="handle">@jordanvale</span>
          </div>
        </div>
        <p class="body" :style="{ animationDelay: `${START + STEP}s` }">
          Six weeks of user interviews later, we finally cut onboarding from nine steps to three. Sign-ups are already up since the fix
          shipped this morning.
        </p>
        <div v-if="showMedia" class="media" :style="{ background: mediaBg, animationDelay: `${START + 2 * STEP}s` }">
          <span
            v-for="(v, i) in BARS"
            :key="i"
            class="bar"
            :style="{ height: `${v}%`, background: i === BARS.length - 3 ? accent : `color-mix(in srgb, ${accent} 42%, transparent)` }"
          ></span>
        </div>
        <div class="footer" :style="{ animationDelay: `${footerDelay}s` }">11:04 AM &middot; 214 replies</div>
      </div>

      <div class="pane error" :class="{ active: phase === 'error' }">
        <svg class="glyph" viewBox="0 0 24 24" fill="none" :stroke="accent" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="12" cy="12" r="8.25" />
          <path d="M8.4 8.4l7.2 7.2" />
        </svg>
        <p class="error-title">Couldn&apos;t load this post</p>
        <p class="error-detail">The connection dropped before the post arrived.</p>
        <button type="button" class="retry" :style="{ background: accent }" @click="retry">Retry</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  background: color-mix(in srgb, currentColor 3%, transparent);
  overflow: hidden;
  color: inherit;
  font-family: system-ui, sans-serif;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.stack {
  position: relative;
  display: grid;
}
.pane {
  grid-area: 1 / 1;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.pane.active {
  opacity: 1;
  pointer-events: auto;
}
.block {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 8px;
}
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.shell-mark {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  transform: rotate(45deg);
}
.avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
}
.name-line {
  height: 15px;
  width: 112px;
}
.handle-line {
  height: 12px;
  width: 80px;
}
.body-col {
  margin-top: 12px;
}
.body-line {
  height: 18px;
}
.l1 {
  width: 100%;
}
.l2 {
  width: 86%;
}
.l3 {
  width: 56%;
}
.media-block {
  margin-top: 12px;
  height: 152px;
  border-radius: 10px;
}
.footer-line {
  margin-top: 12px;
  height: 16px;
  width: 96px;
}
.shell {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.sheen {
  position: absolute;
  inset: 0;
  width: 33%;
  pointer-events: none;
  animation: sheen-move 1.9s linear infinite;
}
@keyframes sheen-move {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(420%);
  }
}
.loaded {
  display: flex;
  flex-direction: column;
}
.loaded > * {
  opacity: 0;
  transform: translateY(10px);
}
.pane.loaded.active > * {
  animation: row-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes row-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.avatar-fill {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.identity {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.mark {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
}
.handle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.2;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 22px;
  color: color-mix(in srgb, currentColor 90%, transparent);
}
.media {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 24px 16px 14px;
  height: 152px;
  border-radius: 10px;
  overflow: hidden;
}
.bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
}
.footer {
  margin-top: 12px;
  font-size: 12px;
  line-height: 16px;
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 0 16px;
  text-align: center;
}
.glyph {
  width: 28px;
  height: 28px;
}
.error-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.error-detail {
  max-width: 26ch;
  margin: 0;
  font-size: 13px;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.retry {
  margin-top: 12px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  color: #0b0d10;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s;
}
.retry:active {
  transform: scale(0.96);
}
.retry:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .sheen {
    display: none;
  }
  .pane.loaded.active > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
</style>

Nearby