import { DocumentText, Edit2, Flash, Lock1, Radar } from "iconsax-react"

import { IconTile } from "@/registry/ui/icon-tile/icon-tile"
import {
  TransmissionFeed,
  TransmissionItem,
} from "@/registry/ui/transmission-feed/transmission-feed"

export default function TransmissionFeedBasicDemo() {
  return (
    <div className="flex h-80 w-full max-w-md items-start">
      <TransmissionFeed className="h-full">
        <TransmissionItem
          title="Station joined"
          description="γ-118 deep now on the mesh"
          time="09:41"
        >
          <IconTile tint="success" size="sm">
            <Radar color="currentColor" />
          </IconTile>
        </TransmissionItem>
        <TransmissionItem
          title="Packet burst"
          description="1.2k relayed through kx-7"
          time="09:42"
        >
          <IconTile size="sm">
            <Flash color="currentColor" />
          </IconTile>
        </TransmissionItem>
        <TransmissionItem
          title="Relay renamed"
          description="sable-3 → aurora-9"
          time="09:42"
        >
          <IconTile tint="violet" size="sm">
            <Edit2 color="currentColor" />
          </IconTile>
        </TransmissionItem>
        <TransmissionItem
          title="Schedule written"
          description="next window in 14 min"
          time="09:43"
        >
          <IconTile size="sm">
            <DocumentText color="currentColor" />
          </IconTile>
        </TransmissionItem>
        <TransmissionItem
          title="Uplink locked"
          description="42 stations holding the line"
          time="09:44"
        >
          <IconTile tint="accent" size="sm">
            <Lock1 color="currentColor" />
          </IconTile>
        </TransmissionItem>
      </TransmissionFeed>
    </div>
  )
}
prop	type	default
interval	number	1400
loop	boolean	true
Draw

Playground

Examples

Props
