more visual enhancements and update readme

src/components/Credenza.tsx

@@ -78,7 +78,7 @@ const CredenzaClose = ({ className, children, ...props }: CredenzaProps) => {
     const CredenzaClose = isDesktop ? DialogClose : DrawerClose;
 
     return (
-        <CredenzaClose className={cn("mb-3 md:mb-0", className)} {...props}>
+        <CredenzaClose className={cn("mb-3 mt-3 md:mt-0 md:mb-0", className)} {...props}>
             {children}
         </CredenzaClose>
     );
@@ -168,7 +168,7 @@ const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
     const CredenzaFooter = isDesktop ? DialogFooter : SheetFooter;
 
     return (
-        <CredenzaFooter className={className} {...props}>
+        <CredenzaFooter className={cn("mt-8 md:mt-0", className)} {...props}>
             {children}
         </CredenzaFooter>
     );

src/components/Settings.tsx

@@ -19,7 +19,7 @@ export function SettingsSectionTitle({ children }: { children: React.ReactNode }
 }
 
 export function SettingsSectionDescription({ children }: { children: React.ReactNode }) {
-    return <p className="text-muted-foreground">{children}</p>
+    return <p className="text-muted-foreground text-sm">{children}</p>
 }
 
 export function SettingsSectionBody({ children }: { children: React.ReactNode }) {

src/components/StrategySelect.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { cn } from "@app/lib/cn";
+import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
+
+interface StrategyOption {
+    id: string;
+    title: string;
+    description: string;
+}
+
+interface StrategySelectProps {
+    options: StrategyOption[];
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+}
+
+export function StrategySelect({
+    options,
+    defaultValue,
+    onChange
+}: StrategySelectProps) {
+    return (
+        <RadioGroup
+            defaultValue={defaultValue}
+            onValueChange={onChange}
+            className="grid gap-4"
+        >
+            {options.map((option) => (
+                <label
+                    key={option.id}
+                    htmlFor={option.id}
+                    className={cn(
+                        "relative flex cursor-pointer rounded-lg border-2 p-4",
+                        "data-[state=checked]:border-primary data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary"
+                    )}
+                >
+                    <RadioGroupItem
+                        value={option.id}
+                        id={option.id}
+                        className="absolute left-4 top-5 h-4 w-4 border-primary text-primary"
+                    />
+                    <div className="pl-7">
+                        <div className="font-medium">{option.title}</div>
+                        <div className="text-sm text-muted-foreground">
+                            {option.description}
+                        </div>
+                    </div>
+                </label>
+            ))}
+        </RadioGroup>
+    );
+}

src/components/ui/select.tsx

@@ -20,8 +20,8 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-9 w-full items-center justify-between border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className,
-      "rounded-md"
+      "rounded-md",
+      className
     )}
     {...props}
   >