A date divider and two remarks

// apps/docs/examples/ui/marker.tsx'use client';
import {InfoIcon, PencilIcon} from 'lucide-react';
import {  Marker,  MarkerContent,  MarkerIcon,} from '@workspace/active-ui/components/primitives/marker';
/** * A small note in a stream of content: a divider with a date between * messages, a remark with an icon, and a remark that closes a section. */export default function MarkerExample() {  return (    <div className="flex w-full max-w-md flex-col gap-6">      <p className="text-sm">The statement was sent to 214 participants.</p>      <Marker variant="separator">        <MarkerContent>Today</MarkerContent>      </Marker>      <p className="text-sm">Three participants opened it within an hour.</p>      <Marker>        <MarkerIcon>          <PencilIcon />        </MarkerIcon>        <MarkerContent>          Edited by Sam de Vries at 10:42 ·{' '}          <a href="#marker-history">history</a>        </MarkerContent>      </Marker>      <Marker variant="border">        <MarkerIcon>          <InfoIcon />        </MarkerIcon>        <MarkerContent>Older messages are archived after a year.</MarkerContent>      </Marker>    </div>  );}