Adding updates to the react starter kit

Author: tnylea

README.md

@@ -1,13 +1,13 @@
 <p align="center"><a href="https://laravel.com" target="_blank"><img src="https://cdn.devdojo.com/assets/svg/laravel-react-logo.svg" width="300" alt="Laravel Logo"></a></p>
 
 <p align="center">
-<a href="github.com/laravel/react-starter-kit/actions"><img src="https://github.com/laravel/react-starter-kit/workflows/tests/badge.svg" alt="Build Status"></a>
+<a href="https://github.com/laravel/react-starter-kit/actions"><img src="https://github.com/laravel/react-starter-kit/workflows/tests/badge.svg" alt="Build Status"></a>
 <a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a>
 </p>
 
 ## Introduction
 
-Welcome to the Laravel React Starter Kit. This starter kit utilizes Intertia v2, Tailwind V3 (soon to be V4), React 19, and ShadCN UI.
+Welcome to the <a href="https://laravel.com" target="_blank">Laravel</a> React</a> Starter Kit. This starter kit utilizes <a href="https://inertiajs.com/" target="_blank">Intertia v2</a>, <a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a>,V3 (soon to be V4), <a href="https://reactjs.dev" target="_blank">React 19</a>, and <a href="https://ui.shadcn.com/" target="_blank">ShadCN UI</a>.
 
 ## Installation
 
@@ -29,6 +29,15 @@ This shell file will run the following commands, which you may wish to run manua
 5. npm install
 6. npm run dev
 
+## Features
+
+This Starter Kit includes the following features:
+
+ - **User Authentication** (login, register, password reset, email verify, and password confirmation)
+ - **Dashboard Page** (Auth Protected User Dashboard Page)
+ - **Settings Page** (Profile Update, Password Update, Delete Account)
+ 
+
 
 ## Front-end App Structure
 
@@ -56,10 +65,40 @@ This code will load the `resources/js/Pages/Dashboard.tsx` file.
 
 ### Layouts
 
-All your pages will utilize a layout as the structure for each page. These layout files are located in the `resources/js/Layouts` folder. Currently, there are two layouts, `AppLayout` and `AuthLayout`.
+All your pages will utilize a layout as the structure for each page. These layout files are located in the `resources/js/Layouts` folder. Currently, there will be two layouts. An `App` layout and an `Auth` layout.
 
 1. **AppLayout** - This layout will be used for all authenticated users.
-2. **AuthLayout** - This layout will be used for unauthenticated users and this layout is used specifically for all the Authentication views.
+2. **Auth\AuthBase** - This is the main layout for your authentication pages, more info below.
+
+### Authentication Layouts
+
+The Authentication layouts are used specifically for all the Authentication views. You'll notice that there are a few different layouts in the `resources/js/Layouts/Auth` folder. This is because we provide you with three layouts to choose from.
+
+#### AuthSimpleLayout.tsx
+
+A clean and simple layout for your authentication pages.
+
+![Simple Auth Layout Screenshot](https://cdn.devdojo.com/images/december2024/simple-layout.png)
+
+#### AuthCardLayout.tsx
+
+A layout with a slightly darker background and with the auth form inside a card.
+
+![Simple Auth Layout Screenshot](https://cdn.devdojo.com/images/december2024/card-layout.png)
+
+#### SplitLayout.tsx
+
+A split view authentication layout screen
+
+![Simple Auth Layout Screenshot](https://cdn.devdojo.com/images/december2024/split-layout.png)
+
+---
+
+To change the Layout you would like to use, simply change the Layout file that is imported in the **AppBase.tsx**. As an example, to use the `AuthSplitLayout.tsx`, the first line would be modified to look like the following:
+
+```tsx
+import AuthLayoutTemplate from "@/Layouts/Auth/AuthSplitLayout";
+```
 
 ---
 

resources/js/Layouts/Auth/AuthSplitLayout.tsx

@@ -3,18 +3,17 @@ import ApplicationLogo from "@/Components/ApplicationLogo"
 
 interface AuthLayoutProps {
     children: React.ReactNode
-    name?: string
     title?: string
     description?: string
 }
 
 export default function AuthSplitLayout({
     children,
     title,
-    description,
-    name
+    description
 }: AuthLayoutProps) {
     const quote = usePage().props.quote;
+    const name = usePage().props.name;
 
     return (
         <div className="px-8 sm:px-0 relative h-dvh flex-col items-center justify-center grid lg:max-w-none lg:grid-cols-2 lg:px-0">