DevToysWeb/app/settings/page.tsx

"use client";

import { useTheme } from "next-themes";

import { singleTools } from "@/config/tools";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Configuration } from "@/components/configuration";
import { Configurations } from "@/components/configurations";
import { icons } from "@/components/icons";
import { PageRootSection } from "@/components/page-root-section";
import { PageSection } from "@/components/page-section";

export default function Page() {
  const { theme = "system", setTheme } = useTheme();

  const appThemeConfig = (
    <Configuration
      icon={<icons.Paintbrush size={24} />}
      title="App theme"
      description="Select which app theme to display"
      control={
        <Select value={theme} onValueChange={setTheme}>
          <SelectTrigger
            className="w-28"
            aria-label="toggle open/close state of app theme selection"
          >
            <SelectValue placeholder={theme} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="light">Light</SelectItem>
            <SelectItem value="dark">Dark</SelectItem>
            <SelectItem value="system">System</SelectItem>
          </SelectContent>
        </Select>
      }
    />
  );

  return (
    <PageRootSection title={singleTools.settings.longTitle}>
      <PageSection>
        <Configurations list={[appThemeConfig]} />
      </PageSection>
    </PageRootSection>
  );
}