From 40f273f5a204852a3d32c9ead3ac17138f30b0ad Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Sun, 15 Dec 2024 21:54:39 +0800
Subject: [PATCH] feat(playground): add ligatures checkbox component and update
 translations in PlaygroundPage

---
 messages/en-US.json                           | 10 +++++++
 messages/zh-CN.json                           | 10 +++++++
 package.json                                  |  2 ++
 .../components/ligatures-checkbox.tsx         | 18 +++++++++++
 .../components/playground-sidebar.tsx         |  4 ++-
 src/app/playground/layout.tsx                 |  2 ++
 src/components/ui/checkbox.tsx                | 30 +++++++++++++++++++
 src/components/ui/label.tsx                   | 26 ++++++++++++++++
 8 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 src/app/playground/components/ligatures-checkbox.tsx
 create mode 100644 src/components/ui/checkbox.tsx
 create mode 100644 src/components/ui/label.tsx

diff --git a/messages/en-US.json b/messages/en-US.json
index 4e6ba19..40cd89e 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -2,6 +2,16 @@
     "Page": {
         "DashboardPage": {
             "title": "Welcome to Judge4c!"
+        },
+        "PlaygroundPage": {
+            "Components": {
+                "playgroundSidebar": {
+                    "title": "Files"
+                },
+                "ligaturesCheckbox": {
+                    "label": "Font Ligatures"
+                }
+            }
         }
     },
     "Components": {
diff --git a/messages/zh-CN.json b/messages/zh-CN.json
index a5c4541..ed0d00e 100644
--- a/messages/zh-CN.json
+++ b/messages/zh-CN.json
@@ -2,6 +2,16 @@
     "Page": {
         "DashboardPage": {
             "title": "欢迎使用Judge4c！"
+        },
+        "PlaygroundPage": {
+            "Components": {
+                "playgroundSidebar": {
+                    "title": "文件"
+                },
+                "ligaturesCheckbox": {
+                    "label": "连字"
+                }
+            }
         }
     },
     "Components": {
diff --git a/package.json b/package.json
index deb835d..1a2d871 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,11 @@
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
diff --git a/src/app/playground/components/ligatures-checkbox.tsx b/src/app/playground/components/ligatures-checkbox.tsx
new file mode 100644
index 0000000..759eeb2
--- /dev/null
+++ b/src/app/playground/components/ligatures-checkbox.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useCodeEditorStore } from "@/store/codeEditorStore";
+
+export default function LigaturesCheckbox() {
+  const t = useTranslations("Page.PlaygroundPage.Components.ligaturesCheckbox");
+  const { setIsLigature } = useCodeEditorStore();
+
+  return (
+    <div className="flex items-center gap-2">
+      <Checkbox onCheckedChange={setIsLigature} />
+      <Label>{t("label")}</Label>
+    </div>
+  );
+}
diff --git a/src/app/playground/components/playground-sidebar.tsx b/src/app/playground/components/playground-sidebar.tsx
index 60061b0..2cc0d1c 100644
--- a/src/app/playground/components/playground-sidebar.tsx
+++ b/src/app/playground/components/playground-sidebar.tsx
@@ -20,6 +20,7 @@ import {
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import * as actions from "@/actions";
+import { useTranslations } from "next-intl";
 import { useSession } from "next-auth/react";
 import { COriginal, JavaOriginal } from "devicons-react";
 import { useCodeEditorStore } from "@/store/codeEditorStore";
@@ -89,6 +90,7 @@ export function PlaygroundSidebar({
   });
 
   const username = session?.user?.name ?? "";
+  const t = useTranslations("Page.PlaygroundPage.Components.playgroundSidebar");
 
   React.useEffect(() => {
     async function fetchFileTree() {
@@ -109,7 +111,7 @@ export function PlaygroundSidebar({
     <Sidebar {...props}>
       <SidebarContent>
         <SidebarGroup>
-          <SidebarGroupLabel>Files</SidebarGroupLabel>
+          <SidebarGroupLabel>{t("title")}</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
               {fileTree.children &&
diff --git a/src/app/playground/layout.tsx b/src/app/playground/layout.tsx
index 6c7a470..42500d3 100644
--- a/src/app/playground/layout.tsx
+++ b/src/app/playground/layout.tsx
@@ -8,6 +8,7 @@ import { Separator } from "@/components/ui/separator";
 import ThemeSelector from "./components/theme-selector";
 import { ModeSwitcher } from "@/components/mode-switcher";
 import LanguageSwitcher from "@/components/language-switcher";
+import LigaturesCheckbox from "./components/ligatures-checkbox";
 import { PlaygroundSidebar } from "@/app/playground/components/playground-sidebar";
 
 export default function PlaygroundLayout({
@@ -24,6 +25,7 @@ export default function PlaygroundLayout({
               <ModeSwitcher />
               <Separator orientation="vertical" className="mr-2 h-4" />
               <ThemeSelector />
+              <LigaturesCheckbox />
             </div>
             <div className="ml-auto px-3">
               <LanguageSwitcher />
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..c6fdd07
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..5341821
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }