refactor(client): split client to cms/mobile/party

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/components/profile/edit-profile-form.tsx

@@ -0,0 +1,102 @@
+import {
+  useForm,
+} from '@tanstack/react-form';
+import {
+  toast,
+} from 'sonner';
+import {
+  z,
+} from 'zod';
+import {
+  Button,
+} from '@/components/ui/button';
+import {
+  Field,
+  FieldError,
+  FieldLabel,
+} from '@/components/ui/field';
+import {
+  Input,
+} from '@/components/ui/input';
+
+const formSchema = z.object({
+  email: z.string(),
+  nickname: z.string().min(1),
+  subtitle: z.string().min(1),
+});
+
+export default function EditProfileForm() {
+  const form = useForm({
+    defaultValues: {
+      email: '',
+      nickname: '',
+      subtitle: '',
+    },
+    validators: {
+      onBlur: formSchema,
+    },
+    onSubmit: async ({
+      value,
+    }) => {
+      try {
+        toast(
+          <code className="text-white">{JSON.stringify(value, null, 2)}</code>,
+        );
+      }
+      catch (error) {
+        console.error('Form submission error', error);
+        toast.error('Failed to submit the form. Please try again.');
+      }
+    },
+  });
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        void form.handleSubmit();
+      }}
+    >
+      <Field>
+        <FieldLabel htmlFor="email">Email</FieldLabel>
+        <Input
+          id="email"
+          name="email"
+          placeholder="noa@requiem.garden"
+
+          value={form.getFieldValue('email')}
+          onChange={e => form.setFieldValue('email', e.target.value)}
+        />
+        <FieldError />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="nickname">昵称</FieldLabel>
+        <Input
+          id="nickname"
+          name="nickname"
+          placeholder="Noa Virellia"
+
+          value={form.getFieldValue('nickname')}
+          onChange={e => form.setFieldValue('nickname', e.target.value)}
+        />
+
+        <FieldError />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="subtitle">副标题</FieldLabel>
+        <Input
+          id="subtitle"
+          name="subtitle"
+          placeholder="天生骄傲"
+
+          value={form.getFieldValue('subtitle')}
+          onChange={e => form.setFieldValue('subtitle', e.target.value)}
+        />
+
+        <FieldError />
+      </Field>
+      <Button type="submit">提交</Button>
+    </form>
+  );
+}