Solar sky panel is a production-ready cards component from BJORK UI, packaged for shadcn registries.
Loading preview...
"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { SolarSkyPanel } from "@/components/ui/bjork-solar-sky-panel";
const PLACES = [
{ label: "Reykjavík", latitude: 64.1466, longitude: -21.9426, timeZone: "Atlantic/Reykjavik" },
{ label: "Austin", latitude: 30.2672, longitude: -97.7431, timeZone: "America/Chicago" },
{ label: "Tokyo", latitude: 35.6762, longitude: 139.6503, timeZone: "Asia/Tokyo" },
];
const PREVIEW_LOCAL = "2026-06-21T19:30";
function zonedInstant(local: string, zone: string): Date {
const [day, time] = local.split("T");
const [y, m, d] = day.split("-").map(Number);
const [hh, mm] = time.split(":").map(Number);
const asUtc = Date.UTC(y, m - 1, d, hh, mm);
const formatter = new Intl.DateTimeFormat("en-US", {
timeZone: zone,
hourCycle: "h23",
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
});
const p: Record<string, number> = {};
for (const part of formatter.formatToParts(asUtc)) {
if (part.type !== "literal") p[part.type] = Number(part.value);
}
const offset = Date.UTC(p.year, p.month - 1, p.day, p.hour % 24, p.minute) - asUtc;
return new Date(asUtc - offset);
}
function SourceDemo(){
const isPreview = false;
const [day, setDay] = useState("");
const [returnToNow, setReturnToNow] = useState(true);
const panelDate = (zone: string) => {
if (isPreview) return zonedInstant(PREVIEW_LOCAL, zone);
// A chosen day opens at noon in each place's zone. Empty means live: the clock, refreshed every minute.
return day ? zonedInstant(`${day}T12:00`, zone) : undefined;
};
const reset = () => {
setDay("");
setReturnToNow(true);
};
return <>
<div className="flex w-full min-w-0 flex-col items-center gap-5">
<div className="flex w-full max-w-[920px] flex-wrap justify-center gap-4">
{PLACES.map((place) => (
<SolarSkyPanel
key={place.timeZone}
latitude={place.latitude}
longitude={place.longitude}
locationLabel={place.label}
timeZone={place.timeZone}
date={panelDate(place.timeZone)}
returnToNow={returnToNow}
className="w-full sm:w-[280px]"
/>
))}
</div>
</div>
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}