Migrate MatomoOptOut to ShadCN

Author: minimalsm

src/components/MatomoOptOut.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react"
-import { Checkbox, Flex } from "@chakra-ui/react"
 
 import Text from "@/components/OldText"
 
 import { MATOMO_LS_KEY } from "@/lib/utils/matomo"
 
+import Checkbox from "../../tailwind/ui/Checkbox"
+
 const MatomoOptOut = () => {
   const [loading, setLoading] = useState<boolean>(true)
   const [isOptedOut, setIsOptedOut] = useState<boolean>(false)
@@ -22,28 +23,15 @@ const MatomoOptOut = () => {
     setLoading(false)
   }, [])
 
-  const handleCheckbox = ({
-    target: { checked },
-  }: React.ChangeEvent<HTMLInputElement>): void => {
+  const handleCheckbox = (checked: boolean): void => {
     // Set local opt-out state based on check mark
     // Note: `checked` in the UI refers to being opted-in
     setIsOptedOut(!checked)
     // Save selection to localStorage
     localStorage.setItem(MATOMO_LS_KEY, String(!checked))
   }
   return (
-    <Flex
-      border="1px solid"
-      borderColor="border"
-      bgColor="background.base"
-      borderRadius="base"
-      p={6}
-      direction="column"
-      mb={4}
-      mt={8}
-      align="flex-start"
-      justify="space-between"
-    >
+    <div className="mb-4 mt-8 flex flex-col rounded border border-body-light bg-background p-6">
       <Text color="fail">
         You can opt out of being tracked by Matomo Analytics and prevent the
         website from analysing the actions you take using the website. This will
@@ -53,18 +41,21 @@ const MatomoOptOut = () => {
       {loading ? (
         "Loading preferences..."
       ) : (
-        <Checkbox
-          id="matomo"
-          isChecked={!isOptedOut}
-          onChange={handleCheckbox}
-          me={2}
-        >
-          {isOptedOut
-            ? "You are opted out. Check this box to opt-in."
-            : "You are not opted out. Uncheck this box to opt-out."}
-        </Checkbox>
+        <div className="flex items-center">
+          <Checkbox
+            id="matomo"
+            checked={!isOptedOut}
+            onCheckedChange={handleCheckbox}
+            className="me-2"
+          />
+          <label htmlFor="matomo">
+            {isOptedOut
+              ? "You are opted out. Check this box to opt-in."
+              : "You are not opted out. Uncheck this box to opt-out."}
+          </label>
+        </div>
       )}
-    </Flex>
+    </div>
   )
 }