Add account (#5)

* Add account * Fix code styling --------- Co-authored-by: mckenziearts <[email protected]>
shopperlabs · Jan 18, 2024 · 68931ac · 68931ac
1 parent 822d023
commit 68931ac
Show file tree

Hide file tree

Showing 14 changed files with 95 additions and 36 deletions.
diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php
@@ -12,7 +12,7 @@
 
 final class RouteServiceProvider extends ServiceProvider
 {
-    public const HOME = '/dashboard';
+    public const HOME = '/account';
 
     public function boot(): void
     {

diff --git a/app/View/Components/Layout/Account.php b/app/View/Components/Layout/Account.php
@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\View\Components\Layout;
+
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+final class Account extends Component
+{
+    public function render(): View
+    {
+        return view('layouts.account');
+    }
+}
diff --git a/resources/views/components/account-link.blade.php b/resources/views/components/account-link.blade.php
@@ -0,0 +1,11 @@
+@props(['active'])
+
+@php
+    $classes = ($active ?? false)
+                ? 'block text-sm px-3 py-2.5 text-secondary-900 rounded-md bg-secondary-100/50 hover:bg-secondary-50 transition duration-150 ease-in-out'
+                : 'block text-sm px-3 py-2.5 text-secondary-600 rounded-md hover:bg-secondary-50 hover:text-secondary-900 transition duration-150 ease-in-out';
+@endphp
+
+<a {{ $attributes->twMerge(['class' => $classes]) }}>
+    {{ $slot }}
+</a>
diff --git a/resources/views/components/banner.blade.php b/resources/views/components/banner.blade.php
@@ -1,5 +1,5 @@
 <div class="bg-secondary-100">
-    <div class="flex items-center justify-between h-10 px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
+    <x-container class="flex items-center justify-between h-10">
         <p class="flex-1 text-sm font-medium text-center text-secondary-700 lg:flex-none">
             {{ __('Get free delivery on orders over $100') }}
         </p>
@@ -12,7 +12,7 @@
                     <a href="{{ route('logout') }}" class="text-sm font-medium text-secondary-700 hover:text-secondary-900 hover:underline"
                        onclick="event.preventDefault();
                          this.closest('form').submit();">
-                        {{ __('Log Out') }}
+                        {{ __('Logout') }}
                     </a>
                 </form>
             @else
@@ -25,5 +25,5 @@
                 </a>
             @endauth
         </div>
-    </div>
+    </x-container>
 </div>
diff --git a/resources/views/components/menu/parent-category.blade.php b/resources/views/components/menu/parent-category.blade.php
@@ -1,4 +1,4 @@
-<div class="flex justify-center space-x-3">
+<div class="flex justify-center space-x-3 -mx-3">
     @foreach($categories as $category)
         <x-menu-link :title="$category->name" href="#" />
     @endforeach

diff --git a/resources/views/components/nav-link.blade.php b/resources/views/components/nav-link.blade.php
@@ -6,6 +6,6 @@
             : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out';
 @endphp
 
-<a {{ $attributes->merge(['class' => $classes]) }}>
+<a {{ $attributes->twMerge(['class' => $classes]) }}>
     {{ $slot }}
 </a>
diff --git a/resources/views/includes/header.blade.php b/resources/views/includes/header.blade.php
@@ -5,20 +5,20 @@
     <!-- Secondary navigation -->
     <div class="bg-white">
         <div class="border-b border-secondary-200">
-            <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
+            <x-container>
                 <div class="flex items-center justify-between h-16">
                     <div class="hidden lg:flex lg:flex-1">
                         <x-menu.parent-category />
                     </div>
                     <div class="hidden lg:flex lg:items-center">
-                        <a href="#">
+                        <a href="/">
                             <span class="sr-only">{{ config('app.name') }}</span>
                             <x-brand class="w-auto h-8" />
                         </a>
                     </div>
                     <div class="flex items-center justify-end flex-1">
                         <div class="flex items-center space-x-1 lg:ml-8">
-                            <a href="{{ Auth::check() ? route('dashboard') : route('login') }}" class="inline-flex items-center p-2 transition text-secondary-500 hover:text-secondary-700">
+                            <a href="{{ Auth::check() ? route('account') : route('login') }}" class="inline-flex items-center p-2 transition text-secondary-500 hover:text-secondary-700">
                                 <x-untitledui-user-02 class="w-6 h-6" stroke-width="1.5" />
                             </a>
                             <button type="button" class="inline-flex items-center p-2 transition text-secondary-500 hover:text-secondary-700">
@@ -30,7 +30,7 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </x-container>
         </div>
     </div>
 </header>
diff --git a/resources/views/layouts/account.blade.php b/resources/views/layouts/account.blade.php
@@ -0,0 +1,37 @@
+@props(['section' => __('Account')])
+
+<x-layout.shop>
+    <x-container class="py-12">
+        <h2 class="font-heading text-2xl ml-4 leading-6 font-bold text-secondary-900 lg:text-4xl">
+            {{ $section }}
+        </h2>
+        <div class="mt-10 grid grid-cols-1 lg:grid-cols-4 lg:gap-x-12">
+            <div class="lg:col-span-1">
+                <nav role="navigation" class="space-y-1 lg:pr-12">
+                    <x-account-link :href="route('account')" :active="request()->routeIs('account')">
+                        {{ __('Overview') }}
+                    </x-account-link>
+                    <x-account-link href="#">
+                        {{ __('Profile') }}
+                    </x-account-link>
+                    <x-account-link href="#">
+                        {{ __('Addresses') }}
+                    </x-account-link>
+                    <x-account-link href="#">
+                        {{ __('Orders') }}
+                    </x-account-link>
+                </nav>
+                <form class="ml-3 mt-6" method="POST" action="{{ route('logout') }}">
+                    @csrf
+
+                    <button type="submit" class="underline text-sm text-secondary-600 hover:text-secondary-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+                        {{ __('Logout') }}
+                    </button>
+                </form>
+            </div>
+            <div class="lg:col-span-3">
+                {{ $slot }}
+            </div>
+        </div>
+    </x-container>
+</x-layout.shop>
diff --git a/resources/views/layouts/shop.blade.php b/resources/views/layouts/shop.blade.php
@@ -21,7 +21,7 @@
         <div class="flex-1">
             @include('includes.header')
 
-            <main {{ $attributes->merge(['class' => 'z-0 h-full']) }}>
+            <main {{ $attributes->twMerge(['class' => 'z-0 h-full']) }}>
                 {{ $slot }}
             </main>
         </div>

diff --git a/resources/views/pages/account/index.blade.php b/resources/views/pages/account/index.blade.php
@@ -0,0 +1,13 @@
+<x-layout.account>
+    <p class="text-base leading-6 text-secondary-600">
+        Hello, <span class="font-bold text-secondary-900">{{ Auth::user()->last_name }}</span>
+        <span class="text-sm">
+            (signed in as: <span class="font-medium text-secondary-900">{{ Auth::user()->email }}</span>)
+        </span>
+    </p>
+    <p class="mt-6 text-sm text-secondary-600 leading-6">
+        From your account dashboard you can view your <a href="#" class="font-medium text-secondary-900 underline">recent orders</a>,
+        manage your <a href="#" class="font-medium text-secondary-900 underline">shipping and billing addresses</a>, and
+        <a href="#" class="font-medium text-secondary-900 underline">edit your password and account details</a>.
+    </p>
+</x-layout.account>
diff --git a/resources/views/pages/auth/login.blade.php b/resources/views/pages/auth/login.blade.php
@@ -1,4 +1,4 @@
-<x-layout.guest :title="__('Sign in to your account')">
+<x-layout.shop :title="__('Sign in to your account')">
     <div class="min-h-full flex flex-col justify-center py-12">
         <div class="sm:mx-auto sm:w-full sm:max-w-md px-4">
             <div>
@@ -60,4 +60,4 @@
             </div>
         </div>
     </div>
-</x-layout.guest>
+</x-layout.shop>
diff --git a/resources/views/pages/auth/register.blade.php b/resources/views/pages/auth/register.blade.php
@@ -1,4 +1,4 @@
-<x-layout.guest :title="__('Create your account')">
+<x-layout.shop :title="__('Create your account')">
     <div class="min-h-full flex flex-col justify-center py-12">
         <div class="sm:mx-auto sm:w-full sm:max-w-md px-4">
             <div>
@@ -72,7 +72,7 @@ class="block mt-1 w-full"
                                 {{ __('Already registered ?') }}
                             </a>
 
-                            <x-buttons.primary class="py-2 px-4 w-full max-w-xs sm:max-w-[200px]">
+                            <x-buttons.primary type="submit" class="py-2 px-4 w-full max-w-xs sm:max-w-[200px]">
                                 {{ __('Register') }}
                             </x-buttons.primary>
                         </div>
@@ -94,4 +94,4 @@ class="block mt-1 w-full"
             </div>
         </div>
     </div>
-</x-layout.guest>
+</x-layout.shop>
diff --git a/resources/views/pages/dashboard.blade.php b/resources/views/pages/dashboard.blade.php
diff --git a/routes/web.php b/routes/web.php
@@ -9,9 +9,9 @@
 
 Route::get('/', HomeController::class)->name('home');
 
-Route::get('/dashboard', fn () => view('pages.dashboard'))
+Route::get('/account', fn () => view('pages.account.index'))
     ->middleware(['auth', 'verified'])
-    ->name('dashboard');
+    ->name('account');
 
 Route::middleware('auth')->group(function (): void {
     Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');