63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import dynamic from "next/dynamic";
|
|
import type { PublicGuide } from "@/lib/guides/queries";
|
|
|
|
import { createContext, useContext, useState, type ReactNode } from "react";
|
|
|
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
|
|
const LazyWeaponChart = dynamic(() => import("./weapon-chart").then((module) => module.WeaponChart), {
|
|
loading: () => <Skeleton className="h-80 rounded-xl" aria-label="กำลังโหลดกราฟ" />,
|
|
});
|
|
|
|
const WeaponModeContext = createContext<{
|
|
mode: string;
|
|
setMode: (mode: string) => void;
|
|
} | null>(null);
|
|
|
|
export function WeaponDisplayModeProvider({ children }: { children: ReactNode }) {
|
|
const [mode, setMode] = useState("normal");
|
|
|
|
return (
|
|
<WeaponModeContext.Provider value={{ mode, setMode }}>
|
|
{children}
|
|
</WeaponModeContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function WeaponDisplayMode({
|
|
children,
|
|
rows,
|
|
exporting = false,
|
|
}: {
|
|
children: ReactNode;
|
|
rows: PublicGuide["weaponGroups"][number]["rows"];
|
|
exporting?: boolean;
|
|
}) {
|
|
const context = useContext(WeaponModeContext);
|
|
|
|
if (!context) throw new Error("WeaponDisplayMode requires WeaponDisplayModeProvider");
|
|
const { mode, setMode } = context;
|
|
|
|
if (exporting) return children;
|
|
|
|
return (
|
|
<div className="flex min-w-0 flex-col gap-3">
|
|
<ToggleGroup
|
|
aria-label="รูปแบบการแสดงอาวุธ"
|
|
variant="outline"
|
|
value={[mode]}
|
|
onValueChange={(values) => {
|
|
if (values[0]) setMode(values[0]);
|
|
}}
|
|
>
|
|
<ToggleGroupItem value="normal" className="max-sm:min-h-11">รายการ</ToggleGroupItem>
|
|
<ToggleGroupItem value="chart" className="max-sm:min-h-11">กราฟ</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
{mode === "chart" ? <LazyWeaponChart rows={rows} /> : children}
|
|
</div>
|
|
);
|
|
}
|