Resort status
A ski resort's live status page: the morning snow report, lifts whose status and queues flip as they change, runs by difficulty, webcams, a trail map and pass prices.
This example uses generated pictures and sample data from this site: art.ts and data.ts. Copy those files from the repository, or use your own images and data in their place.
"use client";
import { ResortStatus } from "@/components/miyuki-ui/resort-status";
import { landscape, topo } from "@/registry/lib/art";
import { people } from "@/registry/lib/data";
const lars = people.find((p) => p.name === "Lars Eriksen") ?? people[0];
const webcams = [
{
src: landscape("kamoshika-summit", { width: 640, height: 480, mood: "snow" }),
name: "Summit",
altitude: "1,690 m",
time: "09:10",
},
{
src: landscape("usagi-top", { width: 640, height: 480, mood: "snow" }),
name: "Usagi express top",
altitude: "1,420 m",
time: "09:10",
},
{
src: landscape("kamoshika-mid", { width: 640, height: 480, mood: "day" }),
name: "Mid station",
altitude: "1,380 m",
time: "09:05",
},
{
src: landscape("kamoshika-village", { width: 640, height: 480, mood: "dawn" }),
name: "Village base",
altitude: "820 m",
time: "09:05",
},
];
export default function ResortStatusDemo() {
return (
<ResortStatus
webcams={webcams}
trailMap={topo("kamoshika-trails", { width: 1400, height: 784 })}
forecaster={{ name: lars.name, role: lars.role, avatar: lars.avatar }}
/>
);
}Install
npx shadcn@latest add @miyuki-ui/resort-statusThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
ResortStatus
Prop
Type
Rail line
A railway line's public page: the departure board for a chosen station beside service notices, the line as a strip map, an hour-row timetable for weekdays and weekends, and a fare table.
Ryokan
A hot spring inn's landing page and booking: the valley with steam rising, three rooms, the baths with live hours and occupancy, a seasonal dinner menu, a small line map for getting there, a booking card and a waterline footer.