Add switch component and bg color to popover

components/Popover.tsx

@@ -27,6 +27,7 @@ const StyledContent = styled(PopoverPrimitive.Content, {
   fontSize: 12,
   lineHeight: 1,
   color: "$text",
+  background: "$background",
   boxShadow:
     "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
   "@media (prefers-reduced-motion: no-preference)": {

components/Switch.tsx

@@ -0,0 +1,32 @@
+import { styled } from "../stitches.config";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+
+const StyledSwitch = styled(SwitchPrimitive.Root, {
+  all: "unset",
+  width: 42,
+  height: 25,
+  backgroundColor: "$mauve9",
+  borderRadius: "9999px",
+  position: "relative",
+  boxShadow: `0 2px 10px $colors$mauve2`,
+  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
+  "&:focus": { boxShadow: `0 0 0 2px $colors$mauveA2` },
+  '&[data-state="checked"]': { backgroundColor: "$green11" },
+});
+
+const StyledThumb = styled(SwitchPrimitive.Thumb, {
+  display: "block",
+  width: 21,
+  height: 21,
+  backgroundColor: "white",
+  borderRadius: "9999px",
+  boxShadow: `0 2px 2px $colors$mauveA6`,
+  transition: "transform 100ms",
+  transform: "translateX(2px)",
+  willChange: "transform",
+  '&[data-state="checked"]': { transform: "translateX(19px)" },
+});
+
+// Exports
+export const Switch = StyledSwitch;
+export const SwitchThumb = StyledThumb;