Live activity bar

"use client";
import * as React from "react";
import { LiveActivityBar } from "@/components/ui/notchset/blocks/live-activity-bar";
import { Button } from "@/components/ui/notchset/button";

export default function LiveActivityBarDemo() {
  const [start, setStart] = React.useState(() => Date.now() + 8 * 60e3);
  const [shown, setShown] = React.useState(true);
  return (
    <div className="flex w-full max-w-[390px] flex-col gap-3">
      <div className="flex h-[200px] flex-col justify-end rounded-[var(--ns-radius-xl)] bg-[var(--ns-canvas)] px-3 pb-3 shadow-[inset_0_0_0_1px_var(--ns-line)]">
        {shown && <LiveActivityBar key={start} title="Discovery call" subtitle="Airtable" startsAt={start} where="Video call" people="Priya, Sam Okafor" onJoin={() => {}} onDismiss={() => setShown(false)} />}
      </div>
      <div className="flex gap-2">
        <Button size="sm" onClick={() => (setStart(Date.now() + 8 * 60e3), setShown(true))}>
          In 8 minutes
        </Button>
        <Button size="sm" onClick={() => (setStart(Date.now() + 12e3), setShown(true))}>
          The last seconds
        </Button>
      </div>
    </div>
  );
}