Currently, our form layout is straightforward - one field per line. It takes a lot of horizontal space. Why can't we fit a few fields in one row?
For that, we will use the Card component from Shadcn.
How Card is Used in Starter Kit
This lesson is an example of how to analyze already-existing starter kit components and generate ideas.
Auth screens have three layouts to choose from:
-
layouts/auth/auth-simple-layout.tsx(the default) -
layouts/auth/auth-card-layout.tsx -
layouts/auth/auth-split-layout.tsx
You can try changing it in the auth-layout.tsx file. For this example, we will use the auth-card-layout.
resources/js/layouts/auth-layout.tsx:
import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'; import AuthLayoutTemplate from '@/layouts/auth/auth-card-layout'; This is the Login form with the default auth-simple-layout.
And this is the form with the Card, powered by the auth-card-layout.
Inside that auth-card-layout, we may find the parts of the Shadcn Card component.
resources/js/layouts/auth/auth-card-layout.tsx
import AppLogoIcon from '@/components/app-logo-icon';import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Link } from '@inertiajs/react';import { PropsWithChildren } from 'react'; export default function AuthCardLayout({ children, title, description,}: PropsWithChildren<{ name?: string; title?: string; description?: string;}>) { return ( <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10"> <div className="flex w-full max-w-md flex-col gap-6"> <Link href={route('home')} className="flex items-center gap-2 self-center font-medium"> <div className="flex h-9 w-9 items-center justify-center"> <AppLogoIcon className="size-9 fill-current text-black dark:text-white" /> </div> </Link> <div className="flex flex-col gap-6"> <Card className="rounded-xl"> <CardHeader className="px-10 pt-8 pb-0 text-center"> <CardTitle className="text-xl">{title}</CardTitle> <CardDescription>{description}</CardDescription> </CardHeader> <CardContent className="px-10 py-8">{children}</CardContent> </Card> </div> </div> </div> );}See those <Card>, <CardHeader>, <CartTitle>, <CartDescription>, and <CardContent>?
Let's try to use them in our Create Task form.
Using Card in Create Task Form
Look at our form now. Too much horizontal space, right?
Let's change it into three columns in a row.
We will not use the same components or the same way as the Auth layout. That's the main message: use your imagination and design skills, experiment, and build your own form layouts.
In our example, we will just add a border, divide the form into three columns, and separate the Button into the Card footer.
resources/js/pages/Tasks/Create.tsx:
import { Card, CardContent, CardFooter } from '@/components/ui/card'; // ... return ( <AppLayout breadcrumbs={breadcrumbs}> <Head title="Create Task" /> <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4"> <form onSubmit={createTask}> <Card> <CardContent className="space-y-6 grid grid-cols-3 gap-4"> <div className="grid gap-2"> <Label htmlFor="name">Task Name*</Label> // ... other fields // ... finishing the last "categories" field: <InputError message={errors.categories} /> </div> </CardContent> <CardFooter> <Button disabled={processing}>Create Task</Button> </CardFooter> </Card> </form> </div> </AppLayout>);Here's the visual result:
This is just a simple example. I won't change the layout for other forms in this course. As I said, feel free to experiment with your layouts.
Here's the GitHub commit for this lesson.
No comments yet…