Create some real styles

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');
+    }
+}

resources/sass/app.scss

@@ -1,22 +1,88 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    margin: 0;
+    padding: 0;
+}
+
 body {
-    font-family: Helvetica, Arial, sans-serif;
+    margin: 0;
-    background-color: hsl(100, 50%, 90%);
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
+    background-color: #335C67;
+}
+
+h1 {
+    color: #FFF3B0;
+    text-align: center;
 }
 
 .container {
     max-width: 40rem;
+    margin: 1em auto;
 }
 
 .bookmark {
-    padding: 1ex;
+    display: grid;
+    align-items: center;
+    gap: 0px 0px;
+    grid-template-areas:
+    "title title"
+    "href href"
+    "description description"
+    "date tags";
+
+    margin-bottom: 1em;
+    padding: 0;
+    border: 2px solid #540B0E;
+    background-color: #FFF3B0;
 
     &-title {
-        margin-top: 0;
+        margin: 0;
+        padding: 1ex;
+        background-color: #E09F3E;
+        grid-area: title;
+        font-weight: bold;
+    }
+
+    &-href,
+    &-description,
+    &-date,
+    &-tags {
+        padding: 1ex;
+        margin: 0;
+    }
+
+    &-href,
+    &-description,
+    &-date {
+        font-size: 0.9em;
+    }
+
+    &-href {
+        grid-area: href;
+    }
+
+    &-description {
+        grid-area: description;
+
+        > p {
+            border-left: 3px solid #9E2A2B;
+            margin: 0;
+            padding: 0.5ex 0 0.5ex 1ex;
+        }
+    }
+
+    &-date {
+        grid-area: date;
     }
 
     &-tags {
-        padding: 0;
+        font-size: 0.8em;
-        margin: 1em 0;
+        grid-area: tags;
+        text-align: right;
     }
 
     &-tag {
@@ -26,7 +92,7 @@ body {
         margin: 0 0 0.2ex 0;
 
         border-radius: 7px;
-        background-color: hsl(230, 50%, 50%);
+        background-color: #9E2A2B;
-        color: #fff;
+        color: #FFF3B0;
     }
 }

resources/views/bookmarks/index.blade.php

@@ -1,5 +1,9 @@
+@extends('layouts.app')
+
+@section('content')
+
 @foreach ($bookmarks as $bookmark)
-
+    <x-bookmark :bookmark="$bookmark" />
-@include('bookmarks.show')
-
 @endforeach
+
+@endsection

resources/views/bookmarks/show.blade.php

@@ -1,19 +1,5 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="bookmark">
+    <x-bookmark :bookmark="$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>
 @endsection

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>

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>