57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslation } from "@/components/i18n/locale-provider";
|
|
import { createContext, useContext, useState, type ReactNode } from "react";
|
|
|
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
|
|
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,
|
|
chart,
|
|
exporting = false,
|
|
}: {
|
|
children: ReactNode;
|
|
chart: ReactNode;
|
|
exporting?: boolean;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
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={t("Weapon display mode")}
|
|
variant="outline"
|
|
value={[mode]}
|
|
onValueChange={(values) => {
|
|
if (values[0]) setMode(values[0]);
|
|
}}
|
|
>
|
|
<ToggleGroupItem value="normal">{t("List")}</ToggleGroupItem>
|
|
<ToggleGroupItem value="chart">{t("Chart")}</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
{mode === "chart" ? chart : children}
|
|
</div>
|
|
);
|
|
}
|