style: 💄 add fields form

julianoalvescode · Apr 9, 2024 · d913073 · d913073
1 parent 0965055
commit d913073
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 2 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,4 +1,6 @@
 import { SettingsTabs } from "@/components/SettingsTabs";
+import * as Input from "@/components/Input";
+import { Mail } from "lucide-react";
 
 export default function Home() {
   return (
@@ -29,8 +31,126 @@ export default function Home() {
             </button>
           </div>
         </div>
-        <form id="settings" action="" className="mt-6 flex w-full flex-col">
-          form
+        <form
+          id="settings"
+          className="mt-6 flex w-full flex-col gap-5 divide-y divide-zinc-200"
+        >
+          <div className="grid grid-cols-form gap-3">
+            <label
+              htmlFor="firstName"
+              className="text-sm font-medium text-zinc-700"
+            >
+              Name
+            </label>
+            <div className="grid grid-cols-2 gap-6">
+              <Input.Root>
+                <Input.Control id="firstName" defaultValue="Diego" />
+              </Input.Root>
+
+              <Input.Root>
+                <Input.Control defaultValue="Fernandes" />
+              </Input.Root>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-form gap-3 pt-5">
+            <label
+              htmlFor="email"
+              className="text-sm font-medium text-zinc-700"
+            >
+              Email address
+            </label>
+            <Input.Root>
+              <Input.Prefix>
+                <Mail className="h-5 w-5 text-zinc-500" />
+              </Input.Prefix>
+              <Input.Control
+                id="email"
+                type="email"
+                defaultValue="diego@rocketseat.com.br"
+              />
+            </Input.Root>
+          </div>
+
+          <div className="grid grid-cols-form gap-3 pt-5">
+            <label
+              htmlFor="email"
+              className="text-sm font-medium text-zinc-700"
+            >
+              Your photo
+              <span className="mt-0.5 block text-sm font-normal text-zinc-500">
+                This will be displayed on your profile.
+              </span>
+            </label>
+            <div />
+          </div>
+
+          <div className="grid grid-cols-form gap-3 pt-5">
+            <label htmlFor="role" className="text-sm font-medium text-zinc-700">
+              Role
+            </label>
+            <Input.Root>
+              <Input.Control id="role" defaultValue="CTO" />
+            </Input.Root>
+          </div>
+
+          <div className="grid grid-cols-form gap-3 pt-5">
+            <label
+              htmlFor="country"
+              className="text-sm font-medium text-zinc-700"
+            >
+              Country
+            </label>
+            <div />
+          </div>
+
+          <div className="grid grid-cols-form gap-3 pt-5">
+            <label
+              htmlFor="timezone"
+              className="text-sm font-medium text-zinc-700"
+            >
+              Timezone
+            </label>
+            <div />
+          </div>
+
+          <div className="grid grid-cols-form gap-3 pt-5">
+            <label htmlFor="bio" className="text-sm font-medium text-zinc-700">
+              Bio
+              <span className="mt-0.5 block text-sm font-normal text-zinc-500">
+                Write a short introduction.
+              </span>
+            </label>
+            <div />
+          </div>
+
+          <div className="grid grid-cols-form gap-3 pt-5">
+            <label
+              htmlFor="projects"
+              className="text-sm font-medium text-zinc-700"
+            >
+              Portfolio projects
+              <span className="mt-0.5 block text-sm font-normal text-zinc-500">
+                Share a few snippets of your work.
+              </span>
+            </label>
+            <div />
+          </div>
+
+          <div className="flex items-center justify-end gap-2 pt-5">
+            <button
+              type="button"
+              className="rounded-lg border border-zinc-300 px-4 py-2 text-sm font-semibold text-zinc-700 shadow-sm hover:bg-zinc-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="rounded-lg bg-violet-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-violet-700"
+            >
+              Save
+            </button>
+          </div>
         </form>
       </div>
     </>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -17,6 +17,7 @@ const config: Config = {
       gridTemplateColumns: {
         app: "minmax(18rem, 20rem) 1fr",
         profile: "max-content 1fr min-content",
+        form: "minmax(7.5rem, 17.5rem) minmax(25rem, 1fr) minmax(0, 15rem)",
       },
     },
   },