Add link cards on homepage

laravel-portugal · Sep 19, 2020 · 5023778 · 5023778
1 parent b2af6e2
commit 5023778
Show file tree

Hide file tree

Showing 9 changed files with 248,422 additions and 10 deletions.
diff --git a/_ide_helper.php b/_ide_helper.php
diff --git a/app/Http/Livewire/Link.php b/app/Http/Livewire/Link.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use Livewire\Component;
+
+class Link extends Component
+{
+    public array $link;
+
+    public function render()
+    {
+        return view('livewire.link');
+    }
+
+    public function mount(array $link): void
+    {
+        $this->link;
+    }
+}
diff --git a/app/Http/Livewire/RecentLinks.php b/app/Http/Livewire/RecentLinks.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use Livewire\Component;
+
+class RecentLinks extends Component
+{
+    public string $title = 'From the blog';
+    public string $description = 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa libero labore natus atque, ducimus sed.';
+
+    public array $links = [
+        [
+            'id'           => 1,
+            'title'        => 'Boost your conversion rate',
+            'description'  => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
+            'author_name'  => 'Roel Aufderhar',
+            'author_email' => '[email protected]',
+            'cover_image'  => 'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
+            'created_at'   => '2020-09-19 16:49:31.229524',
+        ],
+        [
+            'id'           => 2,
+            'title'        => 'How to use search engine optimization to drive sales',
+            'description'  => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
+            'author_name'  => 'Brenna Goyette',
+            'author_email' => '[email protected]',
+            'cover_image'  => 'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80',
+            'created_at'   => '2020-09-19 16:49:31.229524',
+        ],
+        [
+            'id'           => 3,
+            'title'        => 'Improve your customer experience',
+            'description'  => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
+            'author_name'  => 'Daniela Metz',
+            'author_email' => '[email protected]',
+            'cover_image'  => 'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80',
+            'created_at'   => '2020-09-19 16:49:31.229524',
+        ],
+    ];
+
+    public function render()
+    {
+        return view('livewire.recent-links');
+    }
+}
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,6 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=29a9299f0cf992276ffd",
-    "/css/app.css": "/css/app.css?id=9ae34f4e7244a476d795",
-    "/js/app.js.map": "/js/app.js.map?id=ef86610ec71a5ec6d3f6",
-    "/css/app.css.map": "/css/app.css.map?id=c9394a83c6374f793dff"
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
 }
diff --git a/resources/views/livewire/link.blade.php b/resources/views/livewire/link.blade.php
@@ -0,0 +1,48 @@
+    <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
+        <div class="flex-shrink-0">
+            <img class="h-48 w-full object-cover" src="{{ $link['cover_image']}}" alt="">
+        </div>
+        <div class="flex-1 bg-white p-6 flex flex-col justify-between">
+            <div class="flex-1">
+                <p class="text-sm leading-5 font-medium text-indigo-600">
+                    <a href="#" class="hover:underline">
+                        Blog
+                    </a>
+                </p>
+                <a href="#" class="block">
+                    <h3 class="mt-2 text-xl leading-7 font-semibold text-gray-900">
+                        {{ $link['title'] }}
+                    </h3>
+                    <p class="mt-3 text-base leading-6 text-gray-500">
+                        {{ $link['description']}}
+                    </p>
+                </a>
+            </div>
+            <div class="mt-6 flex items-center">
+                <div class="flex-shrink-0">
+                    <a href="#">
+                        <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
+                    </a>
+                </div>
+                <div class="ml-3">
+                    <p class="text-sm leading-5 font-medium text-gray-900">
+                        <a href="#" class="hover:underline">
+                            {{ $link['author_name']}}
+                        </a>
+                    </p>
+                    <div class="flex text-sm leading-5 text-gray-500">
+                        <time datetime="2020-03-16">
+                            {{ $link['created_at']}}
+                        </time>
+                        <span class="mx-1">
+                  &middot;
+                </span>
+                        <span>
+                  6 min read
+                </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
diff --git a/resources/views/livewire/recent-links.blade.php b/resources/views/livewire/recent-links.blade.php
@@ -0,0 +1,20 @@
+<div class="relative bg-gray-50 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
+    <div class="absolute inset-0">
+        <div class="bg-white h-1/3 sm:h-2/3"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto">
+        <div class="text-center">
+            <h2 class="text-3xl leading-9 tracking-tight font-extrabold text-gray-900 sm:text-4xl sm:leading-10">
+                {{ $title }}
+            </h2>
+            <p class="mt-3 max-w-2xl mx-auto text-xl leading-7 text-gray-500 sm:mt-4">
+                {{ $description }}
+            </p>
+        </div>
+        <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+            @foreach($links as $link)
+                <livewire:link :key="$link['id']" :link="$link"/>
+            @endforeach
+        </div>
+    </div>
+</div>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
@@ -118,5 +118,10 @@
         </div>
     </div>
 
-    <!-- Links listing -->
+    <!-- START: Links listing -->
+
+        <livewire:recent-links />
+
+
+        <!-- END: Links listing -->
 @endsection