Planet Avatar

import { PlanetAvatar } from "@/components/avatar/planet-avatar"

// A review thread: each contributor gets a planet from their name, plus the
// same mark as circle, app tile and favicon.
const THREAD = [
  {
    name: "Mara Vance",
    when: "2h",
    line: "L42",
    text: "pull this into a token?",
  },
  { name: "Ivo Kessler", when: "30m", text: "Good catch, done." },
  { name: "Priya Anand", when: "3h", text: "shipping this one." },
]

export default function Demo() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-8 p-6">
      <ul className="flex flex-col gap-4">
        {THREAD.map((t) => (
          <li key={t.name} className="flex items-start gap-3">
            <PlanetAvatar name={t.name} size={28} />
            <div className="flex flex-col text-sm/5">
              <span>
                <span className="font-medium">{t.name}</span>{" "}
                <span className="text-muted-foreground">{t.when}</span>
              </span>
              <span>
                {t.line && (
                  <span className="mr-1 rounded bg-muted px-1 font-mono text-xs">
                    {t.line}
                  </span>
                )}
                {t.text}
              </span>
            </div>
          </li>
        ))}
      </ul>
      <div className="flex items-end gap-8">
        <figure className="flex flex-col items-center gap-2">
          <PlanetAvatar name="01orbital" palette="planet-14" size={64} />
          <figcaption className="font-mono text-xs tracking-widest text-muted-foreground uppercase">
            Mark
          </figcaption>
        </figure>
        <figure className="flex flex-col items-center gap-2">
          <PlanetAvatar
            name="01orbital"
            palette="planet-14"
            size={64}
            shape="squircle"
          />
          <figcaption className="font-mono text-xs tracking-widest text-muted-foreground uppercase">
            App icon
          </figcaption>
        </figure>
        <figure className="flex flex-col items-center gap-2">
          <PlanetAvatar
            name="01orbital"
            palette="planet-14"
            size={16}
            shape="squircle"
          />
          <figcaption className="font-mono text-xs tracking-widest text-muted-foreground uppercase">
            Favicon
          </figcaption>
        </figure>
      </div>
    </div>
  )
}