From 9fa2bea4a43960a432249bc7cd3066f49e48f2b5 Mon Sep 17 00:00:00 2001 From: TinsFox Date: Mon, 2 Dec 2024 19:22:25 +0800 Subject: [PATCH] style: basic form style --- .../(admin)/(with-layout)/form/basic-form.tsx | 616 +++++++++--------- pnpm-lock.yaml | 157 +++-- 2 files changed, 410 insertions(+), 363 deletions(-) diff --git a/apps/admin/src/pages/(admin)/(with-layout)/form/basic-form.tsx b/apps/admin/src/pages/(admin)/(with-layout)/form/basic-form.tsx index 3580465..3af631e 100644 --- a/apps/admin/src/pages/(admin)/(with-layout)/form/basic-form.tsx +++ b/apps/admin/src/pages/(admin)/(with-layout)/form/basic-form.tsx @@ -139,321 +139,355 @@ export function Component() { }) } return ( -
+
+
+

Basic Form

+

+ Fill out the form below with your information. +

+
+
- - ( - - Username - - - - - This is your public display name. - - - - )} - /> - ( - -
- Sidebar - - Select the items you want to display in the sidebar. - -
- {items.map((item) => ( - ( - - - - checked ? - field.onChange([...field.value, item.id]) : - field.onChange( - field.value?.filter( - (value) => value !== item.id, - ), - )} - /> - - - {item.label} - - - )} - /> - ))} - - - )} - /> - ( - - Date of birth - - + + {/* Personal Information Group */} +
+

Personal Information

+
+ ( + + Username - + - - - - date > new Date() || date < new Date("1900-01-01")} - initialFocus - /> - - - - Your date of birth is used to calculate your age. - - - - )} - /> - ( - - Notify me about... - - - - - - - - All new messages - - - - - - - - Direct messages and mentions - + + This is your public display name. + + + + )} + /> + +
+ ( + + Date of birth + + + + + + + + + date > new Date() || date < new Date("1900-01-01")} + initialFocus + /> + + + + Your date of birth is used to calculate your age. + + - - - - - Nothing + )} + /> + + ( + + Language + + + + + + + + + + + No framework found. + + {languages.map((language) => ( + { + form.setValue("language", language.value) + }} + > + {language.label} + + + ))} + + + + + + + This is the language that will be used in the dashboard. + + - - - - - )} - /> - ( - - Email - - - You can manage email addresses in your - {" "} - email settings - . - - - - )} - /> -
-

Email Notifications

-
+ )} + /> +
+ ( - -
- Marketing emails - - Receive emails about new products, features, and more. - -
+ + Bio - + + You can @mention other users and organizations. + + )} /> +
+
+ + {/* Contact & Notifications Group */} +
+

Contact & Notifications

+
( - -
- Security emails - - Receive emails about your account security. - -
+ + Email + + + You can manage email addresses in your + {" "} + email settings + . + + + + )} + /> + + ( + + Notify me about... - + + + + + + + All new messages + + + + + + + + Direct messages and mentions + + + + + + + Nothing + + + )} /> + +
+

Email Notifications

+
+ ( + +
+ Marketing emails + + Receive emails about new products, features, and more. + +
+ + + + + )} + /> + ( + +
+ Security emails + + Receive emails about your account security. + +
+ + + + + )} + /> +
+
- ( - - Bio - -