Featured Post And Replies

npx shadcn add "https://ui.beste.co/r/social50?email=YOUR_EMAIL&license_key=YOUR_KEY"

npx shadcn add "https://ui.beste.co/r-base/social50?email=YOUR_EMAIL&license_key=YOUR_KEY"

import { Social50, social50Demo } from "@/components/beste/block/social50";

export default function ThreadPage() {
  return <Social50 {...social50Demo} />;
}

import { Social50 } from "@/components/beste/block/social50";
import { Socialproof27 } from "@/components/beste/piece/socialproof27";

export default function ThreadPage() {
  return (
    <Social50
      badge={{ label: "The thread" }}
      heading="One post, and the replies that came after it"
      description="A practice manager described her first Monday. What followed is more persuasive than anything we could write."
      media={
        <Socialproof27
          avatar={{ src: "/people/tom.jpg", alt: "Portrait of Tom Ashby" }}
          name="Tom Ashby"
          handle="@tomashby"
          body="Four clinics, one waiting list, and the first Monday in years where nobody rang round."
          time="2h"
          replies="12"
          reposts="34"
          likes="218"
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      featuredNote="Posted the Monday after the second site went live."
      repliesTitle="What other practices said back"
      replies={[
        {
          name: "Elena Rourke",
          handle: "@elenarourke",
          avatar: { src: "/people/elena.jpg", alt: "Portrait of Elena Rourke" },
          body: "Same here. The waiting list backfill is the bit nobody demos.",
          href: "https://example.com/reply/1",
        },
      ]}
    />
  );
}

type TileImage = {
  src: string;
  alt: string;
};

type Reply = {
  name: string;
  handle: string;
  avatar: { src: string; alt: string };
  body: string;
  href: string;
};