From 5a057fa913da16940b995336fb0a2ec101305a47 Mon Sep 17 00:00:00 2001
From: Niisse <nisselommerde@gmail.com>
Date: Thu, 8 Jun 2023 15:05:30 +0200
Subject: [PATCH] work

---
 .../views/components/nav-button.blade.php     | 13 ++++-
 .../views/components/news-item.blade.php      | 19 +++++++
 resources/views/dashboard.blade.php           | 57 ++++++++++++++-----
 resources/views/layouts/app.blade.php         |  2 +-
 resources/views/layouts/navigation.blade.php  | 10 ++--
 5 files changed, 80 insertions(+), 21 deletions(-)
 create mode 100644 resources/views/components/news-item.blade.php

diff --git a/resources/views/components/nav-button.blade.php b/resources/views/components/nav-button.blade.php
index b5ba89e..3c347e4 100644
--- a/resources/views/components/nav-button.blade.php
+++ b/resources/views/components/nav-button.blade.php
@@ -1,7 +1,14 @@
-<button class="filter drop-shadow-pixel-sm hover:drop-shadow-pixel-sm-hover shadow-black ">
+@props(['active'])
 
-    <div class="py-1 px-3 bg-zinc-800 text-white hover:bg-neutral-700 group pixel-corner-sm
-                 active:bg-zinc-900">
+@php
+    $classes = ($active ?? false)
+                ? 'py-1 px-3 bg-zinc-700/75 text-white hover:bg-zinc-700 group pixel-corner-sm active:bg-zinc-900'
+                : 'py-1 px-3 bg-zinc-800 text-white hover:bg-zinc-700 group pixel-corner-sm active:bg-zinc-900'
+@endphp
+
+<button class=" filter drop-shadow-pixel-sm hover:drop-shadow-pixel-sm-hover shadow-black">
+
+    <div class="{{$classes}}">
 
         <div class="flex flex-row">
             <div class="text-neutral-200 mr-1 text-shadow-sm shadow-zinc-950">
diff --git a/resources/views/components/news-item.blade.php b/resources/views/components/news-item.blade.php
new file mode 100644
index 0000000..20726ec
--- /dev/null
+++ b/resources/views/components/news-item.blade.php
@@ -0,0 +1,19 @@
+@props(['date', 'link' => '', 'link_name', 'title', 'newest' => false])
+
+<div class="inline-flex w-full">
+
+    <!-- Date -->
+    <div class="pr-2">
+        <span {{$attributes->merge(['class' => "font-bold"])}} ">{{ $date }}</span>:
+    </div>
+
+    <!-- Title -->
+    <div class="grow {{$newest ? 'text-white' : ''}} justify-self-start max-w-sm overflow-hidden text-ellipsis">{{ $title }}</div>
+
+    <!-- Link -->
+    @if ($link !== '')
+        <div>
+            (<span class="text-blue-400 hover:text-blue-300 underline"><a href="{{ $link }}">{{ $link_name }}</a></span>)
+        </div>
+    @endif
+</div>
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index 5252404..936a053 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -10,9 +10,9 @@
         </div>
     </div>
 
-    <div class="flex flex-row gap-x-4">
-        <div class="filter drop-shadow-pixel-md shadow-zinc-950 my-2">
-            <div class="bg-zinc-800 p-6 pixel-corner-sm shadow-black ">
+    <div class="mt-4 grid grid-cols-1 md:grid-cols-5 lg:grid-cols-12 gap-4">
+        <div class="col-span-1 md:col-span-3 lg:col-span-8 filter drop-shadow-pixel-md shadow-zinc-950">
+            <div class="bg-zinc-800 p-6 pixel-corner-sm shadow-black text-justify ">
                 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                 industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                 scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
@@ -23,34 +23,65 @@
         </div>
 
         <!-- Changelog -->
-        <div class="filter drop-shadow-pixel-md shadow-zinc-950 my-2">
+        <div class="col-span-1 md:col-span-2 lg:col-span-4 filter drop-shadow-pixel-md shadow-zinc-950">
             <div class="bg-zinc-800 p-4 pixel-corner-sm shadow-black ">
                 <div class="space-y-2 whitespace-nowrap">
                     <h2 class="text-xl text-shadow-sm shadow-zinc-900 font-bold">What's new?</h2>
+
                     <hr class="border-zinc-500 drop-shadow-pixel-sm shadow-zinc-900">
-                    <ul class="list-disc list-inside marker:font-ibm marker:text-lime-400">
+
+                    <ul class="list-disc list-inside mr-7 marker:font-ibm marker:text-lime-400">
+
+                        <li>
+                            <x-news-item class="text-white"
+                                         newest="true"
+                                         date="2023-06-08"
+                                         link="#"
+                                         link_name="link"
+                                         title="Newest item style">
+                            </x-news-item>
+                        </li>
                         <li>
-                            <span class="text-white font-bold">2023-06-08</span><span class="text-white">: Newest Item, special styling</span>
-                            (<span class="text-blue-400 hover:text-blue-300 underline"><a href="">link</a></span>)
+                            <x-news-item class="text-red-500"
+                                         date="2023-06-07"
+                                         link="#"
+                                         link_name="blog"
+                                         title="A Blog Entry">
+                            </x-news-item>
                         </li>
                         <li>
-                            <span class="text-red-500 font-bold">2023-06-06</span>: A Blog Post
-                                                                                  (<span class="text-blue-400 hover:text-blue-300 underline"><a href="">blog</a></span>)
+                            <x-news-item class="text-red-600"
+                                         date="2023-06-05"
+                                         link="#"
+                                         link_name="blog"
+                                         title="Another Blog Entry">
+                            </x-news-item>
                         </li>
                         <li>
-                            <span class="text-red-600 font-bold">2023-05-28</span>: Another Blog Post
-                                                                                  (<span class="text-blue-400 hover:text-blue-300 underline"><a href="">blog</a></span>)
+                            <x-news-item class="text-red-700"
+                                         date="2023-06-02"
+                                         link="#"
+                                         link_name="project"
+                                         title="Project Update">
+                            </x-news-item>
                         </li>
                         <li>
-                            <span class="text-red-700 font-bold">2023-05-28</span>: Website Maintenance
-                                                                                  (<span class="text-blue-400 hover:text-blue-300 underline"><a href="">blog</a></span>)
+                            <x-news-item class="text-red-700"
+                                         date="2023-06-02"
+                                         link="#"
+                                         link_name="link"
+                                         title="Another link">
+                            </x-news-item>
                         </li>
                     </ul>
+
                     <hr class="border-zinc-500 drop-shadow-pixel-sm shadow-zinc-900">
+
                     <div>
                         For more, see the
                         <span class="text-blue-400 hover:text-blue-300 underline"><a href="">changelog</a></span>.
                     </div>
+
                 </div>
             </div>
         </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index d2fc296..e14aa02 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -20,7 +20,7 @@
 </head>
 
 <body class="bg-zinc-900 text-zinc-300">
-<div class="min-h-screen bg-zinc-900 max-w-6xl mx-auto overflow-y-auto">
+<div class="min-h-screen bg-zinc-900 max-w-7xl mx-auto overflow-y-auto">
     <main>
         <div class="mx-16">
 
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index b9a9173..6fa15e3 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -3,14 +3,16 @@
     <div class="my-4">
         <div class="flex flex-row gap-x-2 text-xl font-ibm whitespace-nowrap">
 
-            <x-nav-button class="text-red-400 shadow-red-950">Home</x-nav-button>
+            <x-nav-button class="text-red-400 shadow-red-950"
+                          :active="request()->routeIs('dashboard')">Home
+            </x-nav-button>
             <x-nav-button class="text-yellow-300 shadow-yellow-950">About Me</x-nav-button>
             <x-nav-button class="text-green-400 shadow-green-950">Projects</x-nav-button>
             <x-nav-button class="text-blue-400 shadow-blue-950">Blog</x-nav-button>
 
-{{--            <div class="filter drop-shadow-pixel-sm w-full">--}}
-{{--                <div class="py-1 px-3 bg-zinc-800 w-full h-full shadow-pixel-sm pixel-corner-sm"></div>--}}
-{{--            </div>--}}
+            {{--            <div class="filter drop-shadow-pixel-sm w-full">--}}
+            {{--                <div class="py-1 px-3 bg-zinc-800 w-full h-full shadow-pixel-sm pixel-corner-sm"></div>--}}
+            {{--            </div>--}}
 
             <div class="ml-auto">
                 <x-nav-button class="text-shadow-sm shadow-black">niisse.net</x-nav-button>