refactor: new settings page design and new pill component

src/components/settings/view/SettingsSection.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../../lib/utils';
+
+type SettingsSectionProps = {
+  title: string;
+  description?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+export default function SettingsSection({ title, description, children, className }: SettingsSectionProps) {
+  return (
+    <div className={cn('space-y-3', className)}>
+      <div>
+        <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+          {title}
+        </h3>
+        {description && (
+          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}