Create the blog view component

app/Livewire/BlogView.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Livewire;
+
+use Illuminate\View\View;
+use Livewire\Component;
+
+class BlogView extends Component
+{
+    public $blog;
+
+    public function mount($blog): void
+    {
+        $this->blog = $blog;
+    }
+
+    public function render(): View
+    {
+        return view('blogs.show')->layout('blogs.layout');
+    }
+}

resources/views/blogs/show.blade.php

@@ -1,25 +1,22 @@
-@extends('layouts.app')
-
-@section('content')
-    <div class="container mx-auto py-8">
-        <div class="bg-white shadow-lg rounded-lg">
-            <div class="p-6">
-                <h1 class="text-3xl font-bold text-gray-800">{{ $blog->title }}</h1>
-                <p class="text-gray-600 text-sm mt-2">by {{ $blog->user->name }} on {{ $blog->created_at->format('F j, Y') }}</p>
-                <div class="mt-4 text-gray-700 leading-relaxed">
-                    {!! $blog->content !!}
-                </div>
-                @if ($blog->images->isNotEmpty())
-                    <div class="mt-6">
-                        <h2 class="text-2xl font-bold text-gray-800">Images</h2>
-                        <div class="grid grid-cols-2 gap-4 mt-4">
-                            @foreach ($blog->images as $image)
-                                <img src="{{ Storage::url($image->path) }}" alt="{{ $image->alt }}" class="rounded-lg">
-                            @endforeach
-                        </div>
-                    </div>
-                @endif
+<div class="container mx-auto p-4">
+    <div class="bg-white shadow-lg rounded-lg">
+        <div class="p-6">
+            <h1 class="text-3xl font-bold text-gray-800">{{ $blog->title }}</h1>
+            <p class="text-gray-600 text-sm mt-2">by {{ $blog->user->name }}
+                on {{ $blog->created_at->format('F j, Y') }}</p>
+            <div class="mt-4 text-gray-700 leading-relaxed">
+                {!! $blog->content !!}
             </div>
+            @if ($blog->images->isNotEmpty())
+                <div class="mt-6">
+                    <h2 class="text-2xl font-bold text-gray-800">Images</h2>
+                    <div class="grid grid-cols-2 gap-4 mt-4">
+                        @foreach ($blog->images as $image)
+                            <img src="{{ Storage::url($image->path) }}" alt="{{ $image->alt }}" class="rounded-lg">
+                        @endforeach
+                    </div>
+                </div>
+            @endif
         </div>
     </div>
-@endsection
+</div>

resources/views/livewire/blog-renderer.blade.php

@@ -1,3 +1,18 @@
-<div>
-    {{-- If you look to others for fulfillment, you will never truly be fulfilled. --}}
+<div class="container mx-auto py-8">
+    <h1 class="text-4xl font-bold text-center mb-8">Blog Posts</h1>
+
+    @forelse ($blogs as $blog)
+        <div class="bg-white shadow-lg rounded-lg mb-8">
+            <div class="p-6">
+                <h2 class="text-2xl font-bold text-gray-800">{{ $blog->title }}</h2>
+                <p class="text-gray-600 text-sm mt-2">by {{ $blog->user->name }} on {{ $blog->created_at->format('F j, Y') }}</p>
+                <div class="mt-4 text-gray-700 leading-relaxed">
+                    {!! Str::limit($blog->content, 300) !!}
+                </div>
+                <a href="{{ route('blog.show', $blog->slug) }}" class="text-blue-500 mt-4 inline-block">Read More</a>
+            </div>
+        </div>
+    @empty
+        <p class="text-center text-gray-600">No blog posts available.</p>
+    @endforelse
 </div>

resources/views/livewire/blog-view.blade.php

@@ -0,0 +1,3 @@
+<div>
+    {{-- Because she competes with no one, no one can compete with her. --}}
+</div>

routes/web.php

@@ -3,6 +3,7 @@
 use App\Http\Controllers\ProfileController;
 use App\Livewire\BlogMaker;
 use App\Livewire\AutoOrderCreate;
+use App\Livewire\BlogRenderer;
 use App\Livewire\EditProfile;
 use App\Livewire\ManageUsers;
 use App\Livewire\OrderCreate;
@@ -71,7 +72,7 @@
 Route::view('/info/order/payment', 'info.order.payment')->name('info.order.payment');
 Route::post('/newsletter/subscribe', [PagesController::class, 'subscribe'])->name('newsletter.subscribe');
 
-Route::get('/blog', [PagesController::class, 'blog'])->name('blog');
+Route::get('/blog', BlogRenderer::class)->name('blog');
 Route::get('/blogs/{blog:slug}', function (Blog $blog) {
     return view('blogs.show', compact('blog'));
 })->name('blog.show');