feat: implement text inspector and case converter tool

components/icons.tsx

@@ -28,6 +28,7 @@ export const Settings = memo(icons.Settings, equal);
 export const Settings2 = memo(icons.Settings2, equal);
 export const Space = memo(icons.Space, equal);
 export const Sun = memo(icons.SunMedium, equal);
+export const Type = memo(icons.Type, equal);
 export const Minus = memo(icons.Minus, equal);
 export const Moon = memo(icons.Moon, equal);
 export const X = memo(icons.X, equal);

components/ui/toggle-group.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+
+import { cn } from "@/lib/style";
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center gap-2.5", className)}
+    {...props}
+  />
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      "focus-visible:ring-ring inline-flex h-10 items-center justify-center rounded-md bg-accent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-sky-600 data-[state=on]:text-white",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </ToggleGroupPrimitive.Item>
+));
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };