feat: add tooltip for switch

This commit is contained in:
ReaJason
2025-12-16 21:55:21 +08:00
parent db85ec4bee
commit d51f7c1283
7 changed files with 158 additions and 27 deletions
@@ -2,6 +2,7 @@ import {
ArrowUpRightIcon,
AxeIcon,
CommandIcon,
InfoIcon,
NetworkIcon,
ServerIcon,
ShieldOffIcon,
@@ -40,6 +41,11 @@ import {
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Tabs } from "@/components/ui/tabs";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import {
type MainConfig,
type ServerConfig,
@@ -359,7 +365,7 @@ export default function MainConfigCard({
)}
/>
</div>
<div className="flex gap-4 mt-4 flex-col sm:flex-row xl:grid xl:grid-cols-2 2xl:grid 2xl:grid-cols-3">
<div className="flex gap-4 mt-4 flex-col lg:grid lg:grid-cols-2 2xl:grid 2xl:grid-cols-3">
<FormField
control={form.control}
name="debug"
@@ -372,7 +378,17 @@ export default function MainConfigCard({
onCheckedChange={field.onChange}
/>
</FormControl>
<FormLabel htmlFor="debug">{t("common:debug")}</FormLabel>
<div className="flex items-center gap-1">
<FormLabel htmlFor="debug">{t("common:debug")}</FormLabel>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent>
<p>{t("common:debug.description")}</p>
</TooltipContent>
</Tooltip>
</div>
</FormItem>
)}
/>
@@ -388,7 +404,17 @@ export default function MainConfigCard({
onCheckedChange={field.onChange}
/>
</FormControl>
<Label htmlFor="probe">{t("common:probe")}</Label>
<div className="flex items-center gap-1">
<Label htmlFor="probe">{t("common:probe")}</Label>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent>
<p>{t("common:probe.description")}</p>
</TooltipContent>
</Tooltip>
</div>
</FormItem>
)}
/>
@@ -404,7 +430,19 @@ export default function MainConfigCard({
onCheckedChange={field.onChange}
/>
</FormControl>
<Label htmlFor="bypass">{t("common:byPassJavaModule")}</Label>
<div className="flex items-center gap-1">
<Label htmlFor="bypass">
{t("common:byPassJavaModule")}
</Label>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent>
<p>{t("common:byPassJavaModule.description")}</p>
</TooltipContent>
</Tooltip>
</div>
</FormItem>
)}
/>
@@ -420,9 +458,19 @@ export default function MainConfigCard({
onCheckedChange={field.onChange}
/>
</FormControl>
<Label htmlFor="lambdaSuffix">
{t("common:lambdaSuffix")}
</Label>
<div className="flex items-center gap-1">
<Label htmlFor="lambdaSuffix">
{t("common:lambdaSuffix")}
</Label>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent>
<p>{t("common:lambdaSuffix.description")}</p>
</TooltipContent>
</Tooltip>
</div>
</FormItem>
)}
/>
@@ -438,7 +486,17 @@ export default function MainConfigCard({
onCheckedChange={field.onChange}
/>
</FormControl>
<Label htmlFor="shrink">{t("common:shrink")}</Label>
<div className="flex items-center gap-1">
<Label htmlFor="shrink">{t("common:shrink")}</Label>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent>
<p>{t("common:shrink.description")}</p>
</TooltipContent>
</Tooltip>
</div>
</FormItem>
)}
/>
@@ -454,9 +512,19 @@ export default function MainConfigCard({
onCheckedChange={field.onChange}
/>
</FormControl>
<Label htmlFor="staticInitialize">
{t("common:staticInitialize")}
</Label>
<div className="flex items-center gap-1">
<Label htmlFor="staticInitialize">
{t("common:staticInitialize")}
</Label>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent>
<p>{t("common:staticInitialize.description")}</p>
</TooltipContent>
</Tooltip>
</div>
</FormItem>
)}
/>
@@ -1,4 +1,4 @@
import { ServerIcon } from "lucide-react";
import { InfoIcon, ServerIcon } from "lucide-react";
import { useCallback, useEffect, useMemo } from "react";
import { FormProvider, type UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
@@ -22,6 +22,11 @@ import {
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import type { ServerConfig } from "@/types/memshell";
import type { ProbeShellFormSchema } from "@/types/schema";
import { Separator } from "../ui/separator";
@@ -288,7 +293,7 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
const SwitchGroup = useMemo(
() => (
<div className="flex gap-4 mt-4 flex-col sm:flex-row xl:grid xl:grid-cols-2 2xl:grid 2xl:grid-cols-3">
<div className="flex gap-4 mt-4 flex-col lg:grid lg:grid-cols-2 2xl:grid 2xl:grid-cols-3">
<FormField
control={form.control}
name="debug"
@@ -301,7 +306,17 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
onCheckedChange={field.onChange}
/>
</FormControl>
<FormLabel htmlFor="debug">{t("debug")}</FormLabel>
<div className="flex items-center gap-1">
<FormLabel htmlFor="debug">{t("debug")}</FormLabel>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent>
<p>{t("common:debug.description")}</p>
</TooltipContent>
</Tooltip>
</div>
</FormItem>
)}
/>
@@ -317,7 +332,17 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
onCheckedChange={field.onChange}
/>
</FormControl>
<Label htmlFor="bypass">{t("byPassJavaModule")}</Label>
<div className="flex items-center gap-1">
<Label htmlFor="bypass">{t("byPassJavaModule")}</Label>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent>
<p>{t("common:byPassJavaModule.description")}</p>
</TooltipContent>
</Tooltip>
</div>
</FormItem>
)}
/>
@@ -333,7 +358,17 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
onCheckedChange={field.onChange}
/>
</FormControl>
<Label htmlFor="lambdaSuffix">{t("common:lambdaSuffix")}</Label>
<div className="flex items-center gap-1">
<Label htmlFor="lambdaSuffix">{t("common:lambdaSuffix")}</Label>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent>
<p>{t("common:lambdaSuffix.description")}</p>
</TooltipContent>
</Tooltip>
</div>
</FormItem>
)}
/>
@@ -349,7 +384,17 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
onCheckedChange={field.onChange}
/>
</FormControl>
<Label htmlFor="shrink">{t("shrink")}</Label>
<div className="flex items-center gap-1">
<Label htmlFor="shrink">{t("shrink")}</Label>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent>
<p>{t("common:shrink.description")}</p>
</TooltipContent>
</Tooltip>
</div>
</FormItem>
)}
/>
@@ -365,9 +410,19 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
onCheckedChange={field.onChange}
/>
</FormControl>
<Label htmlFor="staticInitialize">
{t("common:staticInitialize")}
</Label>
<div className="flex items-center gap-1">
<Label htmlFor="staticInitialize">
{t("common:staticInitialize")}
</Label>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent>
<p>{t("common:staticInitialize.description")}</p>
</TooltipContent>
</Tooltip>
</div>
</FormItem>
)}
/>