From 9d3fb270f6b684275d57b5ffa26922076cc74e09 Mon Sep 17 00:00:00 2001
From: Annika Backstrom <annika@sixohthree.com>
Date: Sat, 25 May 2024 14:59:27 +0100
Subject: [PATCH] Create app layout, move bookmark view into component

---
 app/View/Components/Bookmark.php              | 28 +++++++++++++++++++
 resources/views/bookmarks/index.blade.php     | 10 +++++--
 resources/views/bookmarks/show.blade.php      | 16 +----------
 resources/views/components/bookmark.blade.php | 19 +++++++++++++
 resources/views/layouts/app.blade.php         |  3 +-
 5 files changed, 57 insertions(+), 19 deletions(-)
 create mode 100644 app/View/Components/Bookmark.php
 create mode 100644 resources/views/components/bookmark.blade.php
diff --git a/app/View/Components/Bookmark.php b/app/View/Components/Bookmark.php
new file mode 100644
index 0000000..271cea1
--- /dev/null
+++ b/app/View/Components/Bookmark.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components;
+
+use App\Models\Bookmark as ModelsBookmark;
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Bookmark extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        public ModelsBookmark $bookmark
+    ) {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.bookmark');
+    }
+}
diff --git a/resources/views/bookmarks/index.blade.php b/resources/views/bookmarks/index.blade.php
index ee95107..77055d9 100644
--- a/resources/views/bookmarks/index.blade.php
+++ b/resources/views/bookmarks/index.blade.php
@@ -1,5 +1,9 @@
+@extends('layouts.app')
+
+@section('content')
+
 @foreach ($bookmarks as $bookmark)
-
-@include('bookmarks.show')
-
+    <x-bookmark :bookmark="$bookmark" />
 @endforeach
+
+@endsection
diff --git a/resources/views/bookmarks/show.blade.php b/resources/views/bookmarks/show.blade.php
index ee728d9..605ec9d 100644
--- a/resources/views/bookmarks/show.blade.php
+++ b/resources/views/bookmarks/show.blade.php
@@ -1,19 +1,5 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="bookmark">
-    <p class="bookmark-title">{{ $bookmark->title }}</p>
-    <p class="bookmark-href"><a href="{{ $bookmark->href }}">{{ $bookmark->href }}</a></p>
-    @if ($bookmark->description)
-        <p class="bookmark-description">{{ $bookmark->description }}</p>
-    @endif
-    <p>{{ $bookmark->created_at }}</p>
-    <ul class="bookmark-tags">
-        @foreach ($bookmark->tags as $tag)
-            <li class="bookmark-tag">
-                {{ $tag->tag->name }}
-            </li>
-        @endforeach
-    </ul>
-</div>
+    <x-bookmark :bookmark="$bookmark" />
 @endsection
diff --git a/resources/views/components/bookmark.blade.php b/resources/views/components/bookmark.blade.php
new file mode 100644
index 0000000..eaa31e4
--- /dev/null
+++ b/resources/views/components/bookmark.blade.php
@@ -0,0 +1,19 @@
+<div class="bookmark">
+    <p class="bookmark-title">{{ $bookmark->title }}</p>
+    <p class="bookmark-href"><a href="{{ $bookmark->href }}">{{ $bookmark->href }}</a></p>
+    @if (!empty($bookmark->description))
+        <div class="bookmark-description">
+            <p>{{ strip_tags($bookmark->description) }}</p>
+        </div>
+    @endif
+    <p class="bookmark-date">
+        <time datetime="{{ $bookmark->created_at }}">{{ $bookmark->created_at->diffForHumans() }}</time>
+    </p>
+    <ul class="bookmark-tags">
+        @foreach ($bookmark->tags as $tag)
+            <li class="bookmark-tag">
+                {{ $tag->tag->name }}
+            </li>
+        @endforeach
+    </ul>
+</div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 6d623a0..9a45b0f 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,11 +1,12 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <title>urlslug</title>
+    <title>urlsnail</title>
     @vite(['resources/sass/app.scss'])
 </head>
 <body>
     <div class="container">
+        <h1>url snail</h1>
         @yield('content')
     </div>
 </body>
