monoid
58adb46323
This commit adds a new component called BuildInfoCard. The BuildInfoCard component displays information about the build, including the Git branch, Git hash, build time, and build version. It is used in the SettingPage component. The packages/client/vite.config.ts file is modified to define environment variables for the build information. The __BUILD_TIME__, __BUILD_VERSION__, __GIT_BRANCH__, and __GIT_HASH__ variables are defined using functions that retrieve the current build time, build version, Git branch, and Git hash respectively. This commit introduces new functionality and improves the user experience by providing build information in the application.
94 lines
No EOL
4.6 KiB
TypeScript
94 lines
No EOL
4.6 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { type TernaryDarkMode, useTernaryDarkMode, useMediaQuery } from "usehooks-ts";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
import { Label } from "@/components/ui/label";
|
|
import BuildInfoCard from "@/components/BuildInfoCard";
|
|
|
|
function LightModeView() {
|
|
return <div className="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
|
|
<div className="space-y-2 rounded-sm bg-[#ecedef] p-2">
|
|
<div className="space-y-2 rounded-md bg-white p-2 shadow-sm">
|
|
<div className="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
|
|
<div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
|
|
</div>
|
|
<div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
|
|
<div className="h-4 w-4 rounded-full bg-[#ecedef]" />
|
|
<div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
|
|
</div>
|
|
<div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
|
|
<div className="h-4 w-4 rounded-full bg-[#ecedef]" />
|
|
<div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
|
|
</div>
|
|
</div>
|
|
</div>;
|
|
}
|
|
|
|
function DarkModeView() {
|
|
return <div className="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
|
|
<div className="space-y-2 rounded-sm bg-slate-950 p-2">
|
|
<div className="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
|
|
<div className="h-2 w-[80px] rounded-lg bg-slate-400" />
|
|
<div className="h-2 w-[100px] rounded-lg bg-slate-400" />
|
|
</div>
|
|
<div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
|
|
<div className="h-4 w-4 rounded-full bg-slate-400" />
|
|
<div className="h-2 w-[100px] rounded-lg bg-slate-400" />
|
|
</div>
|
|
<div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
|
|
<div className="h-4 w-4 rounded-full bg-slate-400" />
|
|
<div className="h-2 w-[100px] rounded-lg bg-slate-400" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
export function SettingPage() {
|
|
const { setTernaryDarkMode, ternaryDarkMode } = useTernaryDarkMode();
|
|
const isSystemDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
|
|
|
|
return (
|
|
<div className="p-4 space-y-2">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">Settings</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-4">
|
|
<div>
|
|
<h3 className="text-lg">Appearance</h3>
|
|
<span className="text-muted-foreground text-sm">Dark mode</span>
|
|
</div>
|
|
<RadioGroup value={ternaryDarkMode} onValueChange={(v) => setTernaryDarkMode(v as TernaryDarkMode)}
|
|
className="flex space-x-2 items-center"
|
|
>
|
|
<RadioGroupItem id="dark" value="dark" className="sr-only" />
|
|
<Label htmlFor="dark">
|
|
<div className="grid place-items-center">
|
|
<DarkModeView />
|
|
<span>Dark Mode</span>
|
|
</div>
|
|
</Label>
|
|
<RadioGroupItem id="light" value="light" className="sr-only" />
|
|
<Label htmlFor="light">
|
|
<div className="grid place-items-center">
|
|
<LightModeView />
|
|
<span>Light Mode</span>
|
|
</div>
|
|
</Label>
|
|
<RadioGroupItem id="system" value="system" className="sr-only" />
|
|
<Label htmlFor="system">
|
|
<div className="grid place-items-center">
|
|
{isSystemDarkMode ? <DarkModeView /> : <LightModeView />}
|
|
<span>System Mode</span>
|
|
</div>
|
|
</Label>
|
|
</RadioGroup>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<BuildInfoCard />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SettingPage; |