47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
"use client";
|
|
import Template from "./Template";
|
|
import { RxShare2 } from "react-icons/rx";
|
|
import { CgAddR } from "react-icons/cg";
|
|
|
|
export default function PWAInstallModal() {
|
|
const steps = [
|
|
{
|
|
slug: "share-btn",
|
|
content: (
|
|
<>
|
|
Tap <RxShare2 className="mx-1.5 h-5 w-5" /> in your browser below
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
slug: "add-to-home",
|
|
content: (
|
|
<>
|
|
Select "Add to Home Screen <CgAddR className="ml-1.5 h-5 w-5" />
|
|
"
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
slug: "pop-up",
|
|
content: <>When a popup appears, click "Add"</>,
|
|
},
|
|
];
|
|
return (
|
|
<Template title="Install PWA" className="md:max-w-[400px]">
|
|
<ul role="list" className="-mx-2 mt-2 space-y-1">
|
|
{steps.map((step, i) => (
|
|
<li key={i}>
|
|
<div className="group flex gap-x-3 rounded-md p-2 text-sm font-medium leading-6 text-foreground">
|
|
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-border bg-background text-[0.625rem] font-medium text-muted-foreground">
|
|
{i + 1}
|
|
</span>
|
|
<span className="flex items-center truncate">{step.content}</span>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</Template>
|
|
);
|
|
}
|