openstatus.dev
fork
Configure Feed
Select the types of activity you want to include in your feed.
Openstatus
www.openstatus.dev
fork
Configure Feed
Select the types of activity you want to include in your feed.
1---
2import { getStatus, statusDictionary } from "./utils";
3const { status } = await getStatus("openstatus");
4const { label, color } = statusDictionary[status];
5---
6
7<a
8class="inline-flex max-w-fit items-center gap-2 rounded-md border border-gray-200 px-3 py-1 text-gray-700 text-sm hover:bg-gray-100 hover:text-black dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white no-underline"
9href="https://status.openstatus.dev"
10target="_blank"
11rel="noreferrer"
12>
13{label}
14<span class="relative flex h-2 w-2">
15 {status === "operational" ? (
16 <span
17 class={`absolute inline-flex h-full w-full animate-ping rounded-full ${color} opacity-75 duration-1000`}
18 />
19 ) : null}
20 <span
21 class={`relative inline-flex h-2 w-2 rounded-full ${color}`}
22 />
23</span>
24</a>