WIP: Améliorations UX et corrections de bugs avant création des épiques

keep-notes/components/settings/SettingsSection.tsx

@@ -0,0 +1,36 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+interface SettingsSectionProps {
+  title: string
+  description?: string
+  icon?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}
+
+export function SettingsSection({
+  title,
+  description,
+  icon,
+  children,
+  className
+}: SettingsSectionProps) {
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          {icon}
+          {title}
+        </CardTitle>
+        {description && (
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            {description}
+          </p>
+        )}
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {children}
+      </CardContent>
+    </Card>
+  )
+}