✨ Checkbox WIP

Author: chanjunren

www/docs/.obsidian/appearance.json

@@ -1,7 +1,7 @@
 {
   "accentColor": "#616161",
-  "cssTheme": "",
+  "cssTheme": "Minimal",
   "translucency": false,
-  "theme": "moonstone",
+  "theme": "obsidian",
   "monospaceFontFamily": "JetBrainsMono Nerd Font Mono"
 }

www/src/components/projects/pixellab/Experiments.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import Align from "./experiments/align";
 import Chart from "./experiments/chart";
+import Checkbox from "./experiments/checkbox";
 import BouncingDownload from "./experiments/download";
 import Dustbin from "./experiments/dustbin";
 import Graph from "./experiments/graph";
@@ -28,6 +29,7 @@ const Experiments: FC = () => {
       <Graph />
       <BouncingDownload />
       <Chart />
+      <Checkbox />
     </div>
   );
 };

www/src/components/projects/pixellab/experiments/checkbox/index.tsx

@@ -0,0 +1,32 @@
+import { FC } from "react";
+import PixelLabContainer from "../../helpers/PixelLabContainer";
+
+const CheckboxIcon: FC = () => {
+  return (
+    <svg viewBox="0 0 24 24" width="60" stroke="currentColor">
+      <rect
+        width="8"
+        height="8"
+        y="8"
+        x="6"
+        fill="none"
+        rx="1"
+        strokeWidth={0.8}
+      />
+      <path
+        className="checkmark"
+        d="M7.75 11.75L10 14.25L16.25 7.75"
+        strokeWidth="1.5"
+        fill="none"
+      />
+    </svg>
+  );
+};
+
+export default function Checkbox() {
+  return (
+    <PixelLabContainer label="008">
+      <CheckboxIcon />
+    </PixelLabContainer>
+  );
+}