Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-18 07:16:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(settings-dialog): integrate settings dialog state with store

Browse Source
This commit is contained in:
cfngc4594 2025-03-12 11:49:29 +08:00
parent 83356993e9
commit 247e54c40c
1 changed files with 8 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/settings-dialog.tsx
View File

@ -27,7 +27,7 @@ import {
} from "@/components/ui/breadcrumb"; } from "@/components/ui/breadcrumb";
import AppearanceSettings from "./appearance-settings"; import AppearanceSettings from "./appearance-settings";
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea } from "@/components/ui/scroll-area";
import { useSettingNavStore } from "@/store/useSettingNavStore"; import { useSettingsStore } from "@/store/useSettingsStore";
import { CodeXml, Globe, Paintbrush, Settings } from "lucide-react"; import { CodeXml, Globe, Paintbrush, Settings } from "lucide-react";
const data = { const data = {
@ -39,16 +39,11 @@ const data = {
], ],
}; };
interface SettingsDialogProps { export function SettingsDialog() {
open: boolean; const { isDialogOpen, activeSetting, setDialogOpen, setActiveSetting } = useSettingsStore();
onClose: () => void;
}
export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
const { activeNav, setActiveNav } = useSettingNavStore();
return ( return (
<Dialog open={open} onOpenChange={onClose}> <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]"> <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
<DialogTitle className="sr-only">Settings</DialogTitle> <DialogTitle className="sr-only">Settings</DialogTitle>
<DialogDescription className="sr-only"> <DialogDescription className="sr-only">
@ -64,8 +59,8 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
<SidebarMenuItem key={item.name}> <SidebarMenuItem key={item.name}>
<SidebarMenuButton <SidebarMenuButton
asChild asChild
isActive={item.name === activeNav} isActive={item.name === activeSetting}
onClick={() => setActiveNav(item.name)} onClick={() => setActiveSetting(item.name)}
> >
<a href="#"> <a href="#">
<item.icon /> <item.icon />
@ -89,7 +84,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbSeparator className="hidden md:block" /> <BreadcrumbSeparator className="hidden md:block" />
<BreadcrumbItem> <BreadcrumbItem>
<BreadcrumbPage>{activeNav}</BreadcrumbPage> <BreadcrumbPage>{activeSetting}</BreadcrumbPage>
</BreadcrumbItem> </BreadcrumbItem>
</BreadcrumbList> </BreadcrumbList>
</Breadcrumb> </Breadcrumb>
@ -97,7 +92,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
</header> </header>
<ScrollArea className="flex-1 overflow-y-auto p-4 pt-0"> <ScrollArea className="flex-1 overflow-y-auto p-4 pt-0">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{activeNav === "Appearance" ? ( {activeSetting === "Appearance" ? (
<AppearanceSettings /> <AppearanceSettings />
) : ( ) : (
Array.from({ length: 10 }).map((_, i) => ( Array.from({ length: 10 }).map((_, i) => (