Introduce a Reset button

src/components/Settings.tsx

@@ -2,7 +2,10 @@ import {
   AspectRatio,
   SUPPORTED_ASPECT_RATIOS,
   Settings as SettingsType,
+  defaultSettings,
 } from "@config/defaults";
+import { RotateCcw } from "lucide-react";
+import { Button } from "./ui/Button";
 import { Input } from "./ui/Input";
 import { Label } from "./ui/Label";
 import { RadioGroup, RadioGroupItem } from "./ui/RadioGroup";
@@ -24,13 +27,32 @@ export const Settings = ({
   setInsetPadding: (v: SettingsType["insetPadding"]) => void;
   setIsDark: (v: SettingsType["isDark"]) => void;
 }) => {
+  const handleReset = () => {
+    setAspectRatio(defaultSettings.aspectRatio);
+    setPadding(defaultSettings.padding);
+    setInsetPadding(defaultSettings.insetPadding);
+  };
+
   return (
-    <div className="space-y-6">
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold leading-none text-slate-100 peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+          Settings
+        </h2>
+        <Button
+          variant="ghost"
+          className="hover:bg-red-800/90"
+          onClick={() => handleReset()}
+        >
+          <RotateCcw className="m-1 h-4 w-4" />
+        </Button>
+      </div>
       <div className="space-y-3">
         <Label htmlFor="aspect-settings">Aspect Ratio</Label>
         <RadioGroup
           id="aspect-settings"
           defaultValue="aspect-video"
+          value={settings.aspectRatio}
           onValueChange={(value) => setAspectRatio(value as AspectRatio)}
         >
           <div className="flex items-center space-x-2">

src/components/ui/Button.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { VariantProps, cva } from "class-variance-authority";
 import { cn } from "@utils/cn";
+import { VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-100/25 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-slate-900",
@@ -10,6 +10,7 @@ const buttonVariants = cva(
       variant: {
         default: "bg-slate-100 text-slate-900 hover:bg-slate-200/90",
         secondary: "bg-slate-800 text-slate-100 hover:bg-slate-700/90",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
       },
       size: {
         default: "h-10 py-2 px-4",

src/config/defaults.ts

@@ -18,6 +18,6 @@ export const defaultSettings: Settings = {
   aspectRatio: "aspect-video",
   padding: 4,
   insetColor: "#000000",
-  insetPadding: 0,
+  insetPadding: 1,
   isDark: true,
 };