extract ui to lib

src/components/Form.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { Label } from './Label';
+
+type FormProps = {
+  title: string;
+  titleBarRight?: ReactNode;
+  children: ReactNode;
+  className?: string;
+};
+
+export function Form({ title, titleBarRight, children, className = '' }: Readonly<FormProps>) {
+  return (
+    <div className={`surface overflow-hidden rounded-xl ${className}`.trim()}>
+      <div className="flex items-center justify-between border-b px-4 py-3 sm:px-5" style={{ borderColor: 'var(--surface-divider)' }}>
+        <Label variant="h4">{title}</Label>
+        {titleBarRight ? <div>{titleBarRight}</div> : null}
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 p-4 sm:p-5 lg:grid-cols-3">
+        {children}
+      </div>
+    </div>
+  );
+}