desertthunder.dev
BlueSky & more on desktop
lazurite.stormlightlabs.org/
tauri
rust
typescript
bluesky
appview
atproto
solid
1import { Motion } from "solid-motionone";
2import { Icon } from "./shared/Icon";
3
4export function ReauthBanner(props: { onReauth: () => void }) {
5 return (
6 <Motion.div
7 class="flex items-center justify-between gap-4 rounded-lg bg-primary/12 p-4 max-[920px]:flex-col max-[920px]:items-stretch"
8 role="status"
9 initial={{ opacity: 0, y: 12 }}
10 animate={{ opacity: 1, y: 0, scale: [1, 1.008, 1] }}
11 exit={{ opacity: 0, y: 8 }}
12 transition={{ duration: 0.9, easing: "ease-in-out" }}>
13 <div class="grid gap-[0.2rem]">
14 <p class="m-0 text-base font-semibold">Your session expired.</p>
15 <p class="m-0 text-xs text-on-surface-variant">Sign in again to reconnect your account.</p>
16 </div>
17 <button class="pill-action border-0 bg-white/8 text-on-surface" type="button" onClick={() => props.onReauth()}>
18 <Icon kind="refresh" name="refresh" aria-hidden class="mr-1" />
19 Sign in again
20 </button>
21 </Motion.div>
22 );
23}