Map pinhospitality

Map-provider-agnostic price pin and cluster count markers with selected and visited states.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/map-pin

의존 아이템locale price style

Default

map-pin-demo.tsx

import { MapPin, PinCluster } from "@/components/ui/map-pin";
export default function MapPinDemo() {  return (    <div className="flex flex-wrap items-center gap-4">      <MapPin amount={12900} currency="USD" name="Harbor Inn" />      <MapPin amount={15900} currency="USD" name="City Hotel" selected />      <MapPin amount={9900} currency="USD" name="Park Lodge" visited />      <PinCluster count={12} />      <PinCluster count={250} />    </div>  );}