Add the Install the app bottom sheet for mobile browsers
- New InstallSheet mounted in the root layout: appears ~1s after load on iOS/Android phones and tablets, over any screen including the key gate, with a dimmed backdrop. Never on desktop, never in standalone mode, and at most once per 7 days after a dismissal (localStorage). - Platform/browser detection (lib/install.ts): iPhone/iPad incl. iPadOS reporting as Mac with touch, Android, Safari vs Chrome vs other vs in-app browsers, with step 1 adapted accordingly. - iOS: numbered steps with chips (Safari, Share, ... , More, Add to Home Screen) and the accent Add pill. Android: captured beforeinstallprompt turns into a native Install button; fallback steps use Install app / Add to Home screen chips and an accent Install pill. - Close via X, backdrop, Escape or swipe-down on the handle; the site is untouched afterwards. Anchored to 100dvh so browser toolbars never hide the last step; pb-safe respects the home indicator. - Dark sheet by default; light only when the app theme was explicitly set to light. Settings gains a mobile-only Install app row that reopens it. - The inline head script captures beforeinstallprompt before hydration and records appinstalled. Old InstallHint banner removed. - Tests: new install-sheet suite (45 checks across iPhone Safari/Chrome/ in-app, Android Chrome/Samsung, desktop, prompt path, dismissal, 7-day expiry, standalone, Settings row, both themes); pwa suite updated.
This commit is contained in:
parent
969f7a82a0
commit
26e36bc0c0
8 changed files with 632 additions and 79 deletions
|
|
@ -1,64 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { ShareIcon } from "@/components/icons";
|
||||
|
||||
const DISMISS_KEY = "freezmo.installHintDismissed";
|
||||
|
||||
/**
|
||||
* iOS has no `beforeinstallprompt`, so the only way to explain installing the
|
||||
* PWA is to point at the Share sheet. Shown once, only in iOS Safari, only
|
||||
* outside standalone mode.
|
||||
*/
|
||||
export function InstallHint() {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
if (window.localStorage.getItem(DISMISS_KEY) === "1") return;
|
||||
const ua = window.navigator.userAgent;
|
||||
const isIos = /iPad|iPhone|iPod/.test(ua) || (ua.includes("Macintosh") && "ontouchend" in document);
|
||||
const isSafari = /Safari/.test(ua) && !/CriOS|FxiOS|EdgiOS|OPiOS/.test(ua);
|
||||
const standalone =
|
||||
window.matchMedia("(display-mode: standalone)").matches ||
|
||||
(window.navigator as unknown as { standalone?: boolean }).standalone === true;
|
||||
if (isIos && isSafari && !standalone) setVisible(true);
|
||||
} catch {
|
||||
/* private mode */
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
const dismiss = () => {
|
||||
setVisible(false);
|
||||
try {
|
||||
window.localStorage.setItem(DISMISS_KEY, "1");
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="glass-panel animate-rise flex items-start gap-3 rounded-[1.35rem] p-3.5 text-sm">
|
||||
<ShareIcon className="mt-0.5 size-5 shrink-0 text-accent-600 dark:text-accent-300" />
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-frost-950 dark:text-frost-50">Install Freezmo</p>
|
||||
<p className="text-frost-600 dark:text-frost-300">
|
||||
Tap <span className="font-medium">Share</span> then{" "}
|
||||
<span className="font-medium">Add to Home Screen</span> for a full-screen, app-like
|
||||
experience that works without the browser chrome.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={dismiss}
|
||||
aria-label="Dismiss install hint"
|
||||
className="rounded-lg px-2 py-1 text-frost-400 transition-colors hover:bg-[var(--surface-sunken)]"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
348
components/InstallSheet.tsx
Normal file
348
components/InstallSheet.tsx
Normal file
|
|
@ -0,0 +1,348 @@
|
|||
"use client";
|
||||
|
||||
import { AnimatePresence, motion, useDragControls, useReducedMotion } from "framer-motion";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import {
|
||||
AddToHomeIcon,
|
||||
ChromeIcon,
|
||||
CompassIcon,
|
||||
DownloadIcon,
|
||||
EllipsisIcon,
|
||||
MoreIcon,
|
||||
PlusIcon,
|
||||
ShareIcon,
|
||||
SnowflakeIcon,
|
||||
XIcon,
|
||||
} from "@/components/icons";
|
||||
import { Spinner } from "@/components/ui";
|
||||
import {
|
||||
detectBrowser,
|
||||
detectPlatform,
|
||||
dismissInstallPrompt,
|
||||
INSTALL_PROMPT_EVENT,
|
||||
INSTALLED_EVENT,
|
||||
installSheetTheme,
|
||||
isDismissed,
|
||||
isInstalled,
|
||||
isStandalone,
|
||||
markInstalled,
|
||||
OPEN_INSTALL_EVENT,
|
||||
type BeforeInstallPromptEvent,
|
||||
type InstallBrowser,
|
||||
type InstallPlatform,
|
||||
} from "@/lib/install";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type SheetInfo = {
|
||||
platform: InstallPlatform;
|
||||
browser: InstallBrowser;
|
||||
theme: "dark" | "light";
|
||||
};
|
||||
|
||||
/**
|
||||
* "Install the app" bottom sheet. Mounted once in the root layout so it can
|
||||
* appear over any screen (including the API-key gate) about a second after
|
||||
* load. Phones/tablets only, never when already installed, and at most once
|
||||
* per 7 days after a dismissal. Closing it leaves the site exactly as it was.
|
||||
*/
|
||||
export function InstallSheet() {
|
||||
const [info, setInfo] = useState<SheetInfo | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [promptEvent, setPromptEvent] = useState<BeforeInstallPromptEvent | null>(null);
|
||||
const [installing, setInstalling] = useState(false);
|
||||
const dragControls = useDragControls();
|
||||
const reduceMotion = useReducedMotion();
|
||||
const domain = typeof window === "undefined" ? "" : window.location.host;
|
||||
|
||||
/** Everything needed to render the sheet, or null if it shouldn't appear. */
|
||||
const prepare = useCallback((): SheetInfo | null => {
|
||||
const platform = detectPlatform();
|
||||
if (platform === "other" || isInstalled()) return null;
|
||||
return { platform, browser: detectBrowser(platform), theme: installSheetTheme() };
|
||||
}, []);
|
||||
|
||||
// Automatic prompt: about a second after load, unless dismissed recently.
|
||||
useEffect(() => {
|
||||
if (isStandalone()) {
|
||||
markInstalled();
|
||||
return;
|
||||
}
|
||||
const next = prepare();
|
||||
if (!next || isDismissed()) return;
|
||||
const timer = window.setTimeout(() => {
|
||||
setInfo(next);
|
||||
setOpen(true);
|
||||
}, 1000);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [prepare]);
|
||||
|
||||
// Manual open from the Settings row (ignores the 7-day window).
|
||||
useEffect(() => {
|
||||
const onOpen = () => {
|
||||
const next = prepare();
|
||||
if (!next) return;
|
||||
setInfo(next);
|
||||
setOpen(true);
|
||||
};
|
||||
window.addEventListener(OPEN_INSTALL_EVENT, onOpen);
|
||||
return () => window.removeEventListener(OPEN_INSTALL_EVENT, onOpen);
|
||||
}, [prepare]);
|
||||
|
||||
// Chrome's deferred install prompt + the "installed" signal.
|
||||
useEffect(() => {
|
||||
const sync = () => setPromptEvent(window.__freezmoInstallPrompt ?? null);
|
||||
const onInstalled = () => {
|
||||
markInstalled();
|
||||
setPromptEvent(null);
|
||||
setInstalling(false);
|
||||
setOpen(false);
|
||||
};
|
||||
window.addEventListener(INSTALL_PROMPT_EVENT, sync);
|
||||
window.addEventListener(INSTALLED_EVENT, onInstalled);
|
||||
window.addEventListener("appinstalled", onInstalled);
|
||||
sync();
|
||||
return () => {
|
||||
window.removeEventListener(INSTALL_PROMPT_EVENT, sync);
|
||||
window.removeEventListener(INSTALLED_EVENT, onInstalled);
|
||||
window.removeEventListener("appinstalled", onInstalled);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const close = useCallback(() => {
|
||||
dismissInstallPrompt();
|
||||
setOpen(false);
|
||||
setInstalling(false);
|
||||
}, []);
|
||||
|
||||
// Escape closes, like every other sheet in the app.
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onKey = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") close();
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [open, close]);
|
||||
|
||||
const runPrompt = async () => {
|
||||
if (!promptEvent || installing) return;
|
||||
setInstalling(true);
|
||||
try {
|
||||
await promptEvent.prompt();
|
||||
const choice = await promptEvent.userChoice;
|
||||
if (choice.outcome === "accepted") {
|
||||
markInstalled();
|
||||
setOpen(false);
|
||||
setInstalling(false);
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
/* the native prompt can fail; the steps below still work */
|
||||
}
|
||||
setInstalling(false);
|
||||
};
|
||||
|
||||
const steps: React.ReactNode[] = [];
|
||||
if (info?.platform === "ios") {
|
||||
if (info.browser !== "safari") {
|
||||
steps.push(
|
||||
<>
|
||||
Open this page in <Chip icon={<CompassIcon className="size-3.5" />}>Safari</Chip>.
|
||||
</>,
|
||||
);
|
||||
}
|
||||
steps.push(
|
||||
<>
|
||||
Tap <Chip icon={<ShareIcon className="size-3.5" />}>Share</Chip> in the browser bar — in
|
||||
some browsers it’s under <Chip icon={<EllipsisIcon className="size-3.5" />}>⋯</Chip>.
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Tap <Chip icon={<MoreIcon className="size-3.5" />}>More</Chip> in the share sheet.
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Choose <Chip icon={<AddToHomeIcon className="size-3.5" />}>Add to Home Screen</Chip>.
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Tap <AccentPill icon={<PlusIcon className="size-3.5" />}>Add</AccentPill> to confirm.
|
||||
</>,
|
||||
);
|
||||
} else if (info?.platform === "android") {
|
||||
if (info.browser !== "chrome") {
|
||||
steps.push(
|
||||
<>
|
||||
Open this page in <Chip icon={<ChromeIcon className="size-3.5" />}>Chrome</Chip>.
|
||||
</>,
|
||||
);
|
||||
}
|
||||
steps.push(
|
||||
<>
|
||||
Tap <Chip icon={<EllipsisIcon className="size-3.5" />}>⋯</Chip> in the top right of the
|
||||
browser.
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Choose <Chip icon={<DownloadIcon className="size-3.5" />}>Install app</Chip> or{" "}
|
||||
<Chip icon={<AddToHomeIcon className="size-3.5" />}>Add to Home screen</Chip>.
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Tap <AccentPill icon={<DownloadIcon className="size-3.5" />}>Install</AccentPill> to confirm.
|
||||
</>,
|
||||
);
|
||||
}
|
||||
|
||||
const showNativePrompt = info?.platform === "android" && Boolean(promptEvent);
|
||||
|
||||
return (
|
||||
// The sheet is dark by default; only an explicit light choice in the app
|
||||
// switches the palette (the wrapper scopes the app's .dark tokens).
|
||||
<div className={info?.theme === "light" ? undefined : "dark"}>
|
||||
<AnimatePresence>
|
||||
{open && info ? (
|
||||
<div className="fixed inset-x-0 top-0 z-[60] h-dvh">
|
||||
<motion.div
|
||||
aria-hidden
|
||||
onClick={close}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className="absolute inset-0 bg-black/45 backdrop-blur-[2px]"
|
||||
/>
|
||||
<motion.div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="install-sheet-title"
|
||||
drag="y"
|
||||
dragControls={dragControls}
|
||||
dragListener={false}
|
||||
dragConstraints={{ top: 0, bottom: 0 }}
|
||||
dragElastic={{ top: 0, bottom: 0.55 }}
|
||||
onDragEnd={(_, gesture) => {
|
||||
if (gesture.offset.y > 90 || gesture.delta.y > 140 || gesture.velocity.y > 700) close();
|
||||
}}
|
||||
initial={reduceMotion ? { opacity: 0 } : { y: "100%" }}
|
||||
animate={reduceMotion ? { opacity: 1 } : { y: 0 }}
|
||||
exit={reduceMotion ? { opacity: 0 } : { y: "100%" }}
|
||||
transition={{ duration: 0.34, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="absolute inset-x-0 bottom-0 mx-auto w-full rounded-t-[28px] border border-b-0 border-[var(--hairline)] bg-[var(--surface)] shadow-[0_-20px_60px_-28px_rgb(0_0_0/0.5)] sm:max-w-xl"
|
||||
>
|
||||
<div className="thin-scroll max-h-[88dvh] overflow-y-auto px-5 pb-safe pt-2">
|
||||
<div
|
||||
aria-hidden
|
||||
onPointerDown={(event) => dragControls.start(event)}
|
||||
className="mx-auto flex h-6 w-full cursor-grab touch-none items-center justify-center active:cursor-grabbing"
|
||||
>
|
||||
<span className="h-1.5 w-10 rounded-full bg-[var(--text-subtle)] opacity-40" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<h2
|
||||
id="install-sheet-title"
|
||||
className="text-[17px] font-semibold tracking-[-0.01em] text-[var(--text)]"
|
||||
>
|
||||
{info.platform === "ios"
|
||||
? "Install Freezmo on iPhone"
|
||||
: "Install Freezmo on Android"}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={close}
|
||||
aria-label="Close"
|
||||
className="grid size-10 shrink-0 place-items-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
||||
>
|
||||
<XIcon className="size-[18px]" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* app card */}
|
||||
<div className="mt-1 flex items-center gap-3 rounded-2xl border border-[var(--hairline)] bg-[var(--surface-sunken)] p-3">
|
||||
<span
|
||||
aria-hidden
|
||||
className="grid size-11 shrink-0 place-items-center rounded-xl bg-[var(--text)] text-[var(--page)]"
|
||||
>
|
||||
<SnowflakeIcon className="size-5" />
|
||||
</span>
|
||||
<span className="min-w-0">
|
||||
<span className="block text-[15px] font-semibold leading-tight text-[var(--text)]">
|
||||
Freezmo
|
||||
</span>
|
||||
<span className="block truncate text-[12.5px] text-[var(--text-subtle)]">
|
||||
{domain}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{showNativePrompt ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void runPrompt()}
|
||||
disabled={installing}
|
||||
className="btn-primary mt-4 h-12 w-full rounded-[14px] text-[15px] font-medium disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{installing ? (
|
||||
<>
|
||||
<Spinner className="size-4" /> Installing…
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<DownloadIcon className="size-4" /> Install
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
{showNativePrompt ? (
|
||||
<p className="mt-4 text-center text-[11.5px] text-[var(--text-subtle)]">
|
||||
Or install manually:
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<ol className={cn("space-y-3", showNativePrompt ? "mt-3" : "mt-4")}>
|
||||
{steps.map((step, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-start gap-2.5 text-[13.5px] leading-relaxed text-[var(--text-muted)]"
|
||||
>
|
||||
<span className="font-bold tabular-nums text-[var(--text)]">{index + 1}.</span>
|
||||
<span className="min-w-0 flex-1">{step}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Small pill for a UI element the user has to tap. */
|
||||
function Chip({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
|
||||
return (
|
||||
<span className="mx-0.5 inline-flex translate-y-[1px] items-center gap-1 rounded-full border border-[var(--field-border)] bg-[var(--field)] px-2 py-[3px] text-[12px] font-semibold leading-none text-[var(--text)]">
|
||||
<span aria-hidden>{icon}</span>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** The one coloured element: the final confirmation button. */
|
||||
function AccentPill({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
|
||||
return (
|
||||
<span className="mx-0.5 inline-flex translate-y-[1px] items-center gap-1 rounded-full bg-accent-600 px-2.5 py-[3px] text-[12px] font-semibold leading-none text-white">
|
||||
<span aria-hidden>{icon}</span>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,13 +4,15 @@ import { AnimatePresence, motion } from "framer-motion";
|
|||
import { useEffect, useState } from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { openInstallSheet, useInstallAvailable } from "@/lib/install";
|
||||
import { clearApiKey, saveSettings } from "@/lib/settings";
|
||||
import { useHealth } from "@/lib/use-health";
|
||||
import { AlertTriangleIcon, CheckCircleIcon, XCircleIcon } from "@/components/icons";
|
||||
import { AlertTriangleIcon, CheckCircleIcon, ChevronRightIcon, DownloadIcon, XCircleIcon } from "@/components/icons";
|
||||
import { Button, Spinner } from "@/components/ui";
|
||||
|
||||
export function SettingsDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
|
||||
const { health, loading, error, refresh, apiKey } = useHealth();
|
||||
const installAvailable = useInstallAvailable();
|
||||
const [keyDraft, setKeyDraft] = useState(apiKey);
|
||||
const [reveal, setReveal] = useState(false);
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
|
@ -145,6 +147,36 @@ export function SettingsDialog({ open, onClose }: { open: boolean; onClose: () =
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* ------------------------------------------------ install */}
|
||||
{installAvailable ? (
|
||||
<section className="mb-4 rounded-2xl border border-[var(--hairline)] bg-[var(--surface-sunken)] p-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onClose();
|
||||
openInstallSheet();
|
||||
}}
|
||||
className="flex w-full items-center gap-3 rounded-xl px-2.5 py-2 text-left transition hover:bg-[var(--hover)]"
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
className="grid size-9 shrink-0 place-items-center rounded-xl border border-[var(--hairline)] bg-[var(--surface)] text-[var(--text-muted)]"
|
||||
>
|
||||
<DownloadIcon className="size-4" />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block text-sm font-semibold text-frost-950 dark:text-frost-50">
|
||||
Install app
|
||||
</span>
|
||||
<span className="block text-[12px] text-[var(--text-subtle)]">
|
||||
Add Freezmo to your home screen
|
||||
</span>
|
||||
</span>
|
||||
<ChevronRightIcon className="size-4 shrink-0 text-[var(--text-subtle)]" />
|
||||
</button>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{loading && !health ? (
|
||||
<div className="flex items-center gap-3 py-6 text-sm text-slate-600 dark:text-slate-300">
|
||||
<Spinner className="size-5" /> Checking Ollama…
|
||||
|
|
|
|||
|
|
@ -285,3 +285,54 @@ export function ExternalLinkIcon({ className }: IconProps) {
|
|||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
/* --- Install-sheet chips ------------------------------------------------ */
|
||||
|
||||
export function CompassIcon({ className }: IconProps) {
|
||||
return (
|
||||
<Svg className={className}>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="m15.6 8.4-2.3 5.3-5.3 2.3 2.3-5.3 5.3-2.3Z" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function EllipsisIcon({ className }: IconProps) {
|
||||
return (
|
||||
<Svg className={className}>
|
||||
<circle cx="5.5" cy="12" r="1.4" fill="currentColor" stroke="none" />
|
||||
<circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none" />
|
||||
<circle cx="18.5" cy="12" r="1.4" fill="currentColor" stroke="none" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function MoreIcon({ className }: IconProps) {
|
||||
return (
|
||||
<Svg className={className}>
|
||||
<rect x="3.5" y="3.5" width="17" height="17" rx="5" />
|
||||
<circle cx="8.4" cy="12" r="1.2" fill="currentColor" stroke="none" />
|
||||
<circle cx="12" cy="12" r="1.2" fill="currentColor" stroke="none" />
|
||||
<circle cx="15.6" cy="12" r="1.2" fill="currentColor" stroke="none" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function AddToHomeIcon({ className }: IconProps) {
|
||||
return (
|
||||
<Svg className={className}>
|
||||
<rect x="4" y="4" width="16" height="16" rx="4.5" />
|
||||
<path d="M12 8.8v6.4M8.8 12h6.4" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function ChromeIcon({ className }: IconProps) {
|
||||
return (
|
||||
<Svg className={className}>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<circle cx="12" cy="12" r="3.4" />
|
||||
<path d="M12 8.6V3M9.05 13.7 4.2 16.5M14.95 13.7l4.85 2.8" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue