Presence

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { Presence } from "@/components/vip-ui/presence";export function PresenceDemo() {  const [show, setShow] = useState(false);  return (    <div className="grid min-h-28 w-full max-w-sm content-start justify-items-start gap-3">      <Button        size="sm"        variant="secondary"        aria-expanded={show}        aria-controls={show ? "presence-note" : undefined}        onPress={() => setShow((value) => !value)}      >        {show ? "Hide note" : "Show note"}      </Button>      <Presence        show={show}        id="presence-note"        className="w-full rounded-xl border border-border bg-card p-4 shadow-[var(--shadow-card)]"      >        <p className="text-lg font-medium tracking-tight">          Keep the good ideas close.        </p>      </Presence>    </div>  );}

"use client";import { useEffect, useState } from "react";import { Button } from "@/components/vip-ui/button";import { Presence } from "@/components/vip-ui/presence";export function PresenceInlineDemo() {  const [saved, setSaved] = useState(false);  useEffect(() => {    if (!saved) return;    const timer = window.setTimeout(() => setSaved(false), 2000);    return () => window.clearTimeout(timer);  }, [saved]);  return (    <div className="flex w-full max-w-xs items-center gap-3">      <Button size="sm" variant="secondary" onPress={() => setSaved(true)}>        Save draft      </Button>      <output className="min-w-0 text-sm text-muted-foreground">        <Presence as="span" show={saved}>          Draft saved        </Presence>      </output>    </div>  );}