From 86a9eb213bbcd1abaedbb4eba204ceba16a94ff2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andrei=20Ioni=C8=9B=C4=83?= <hi@andrei.io>
Date: Wed, 29 Mar 2023 17:38:29 +0100
Subject: [PATCH] feat: component work (#291)

* feat: add buttons to image with text block

* fix: remove category description max-width

* fix: reduce person title font size
---
 app/View/Components/Blocks/ImageText.php      | 16 +++++++++
 .../js/components/Blocks/Block/ImageText.vue  | 32 +++++++++++++++++
 .../components/blocks/image-text.blade.php    | 35 +++++++++++++++----
 .../views/components/blocks/people.blade.php  | 11 +++---
 .../views/front/decisions/category.blade.php  |  2 +-
 .../views/front/posts/category.blade.php      |  2 +-
 6 files changed, 85 insertions(+), 13 deletions(-)

diff --git a/app/View/Components/Blocks/ImageText.php b/app/View/Components/Blocks/ImageText.php
index 7d0ba93a..8093af1e 100644
--- a/app/View/Components/Blocks/ImageText.php
+++ b/app/View/Components/Blocks/ImageText.php
@@ -14,6 +14,14 @@ class ImageText extends BlockComponent
 
     public ?Media $image;
 
+    public ?string $primary_button_url;
+
+    public ?string $primary_button_text;
+
+    public ?string $secondary_button_url;
+
+    public ?string $secondary_button_text;
+
     public function setup(): void
     {
         $this->title = $this->block->translatedInput('title');
@@ -21,6 +29,14 @@ public function setup(): void
         $this->html = $this->block->translatedInput('text');
 
         $this->image = $this->block->firstMedia('image');
+
+        $this->primary_button_url = $this->block->translatedInput('primary_button_url');
+
+        $this->primary_button_text = $this->block->translatedInput('primary_button_text');
+
+        $this->secondary_button_url = $this->block->translatedInput('secondary_button_url');
+
+        $this->secondary_button_text = $this->block->translatedInput('secondary_button_text');
     }
 
     public function containerColumns(): string
diff --git a/resources/js/components/Blocks/Block/ImageText.vue b/resources/js/components/Blocks/Block/ImageText.vue
index 553c1f25..4f1573e3 100644
--- a/resources/js/components/Blocks/Block/ImageText.vue
+++ b/resources/js/components/Blocks/Block/ImageText.vue
@@ -38,6 +38,34 @@
         :options="align"
         default="top"
     />
+
+    <localized-field
+        field="form-input"
+        type="text"
+        :label="$t('field.button_text')"
+        v-model="content.primary_button_text"
+    />
+
+    <localized-field
+        field="form-input"
+        type="url"
+        :label="$t('field.button_url')"
+        v-model="content.primary_button_url"
+    />
+
+    <localized-field
+        field="form-input"
+        type="text"
+        :label="$t('field.button_text')"
+        v-model="content.secondary_button_text"
+    />
+
+    <localized-field
+        field="form-input"
+        type="url"
+        :label="$t('field.button_url')"
+        v-model="content.secondary_button_url"
+    />
 </template>
 
 <script>
@@ -54,6 +82,10 @@
             position: String,
             align: String,
             width: String,
+            primary_button_text: Object,
+            primary_button_url: Object,
+            secondary_button_text: Object,
+            secondary_button_url: Object,
         },
         setup(props) {
             const position = computed(() =>
diff --git a/resources/views/components/blocks/image-text.blade.php b/resources/views/components/blocks/image-text.blade.php
index b6cb0dbd..7b1a9ddb 100644
--- a/resources/views/components/blocks/image-text.blade.php
+++ b/resources/views/components/blocks/image-text.blade.php
@@ -1,15 +1,15 @@
-<div
-    @class([
-        'grid gap-8 grid-flow-row-dense',
-        $containerColumns(),
-        $containerAlign(),
-    ])>
+<div @class([
+    'grid gap-8 grid-flow-row-dense',
+    $containerColumns(),
+    $containerAlign(),
+])>
     @if ($image)
         <x-media.figure
             :class="$imageColumns()"
             :src="$image->getUrl()"
             :caption="$image->caption"
-            :preload="$shouldPreload()" />
+            :preload="$shouldPreload()"
+        />
     @endif
 
     <div @class([$contentColumns()])>
@@ -18,5 +18,26 @@
         <div class="prose prose-lg prose-teal">
             {!! $html !!}
         </div>
+
+        <div class="flex items-center mt-10 gap-x-3">
+            @if ($primary_button_url && $primary_button_text)
+                <a
+                    href="{{ $primary_button_url }}"
+                    class="inline-flex rounded-md bg-primary/10 px-3.5 py-2.5 text-sm font-semibold text-primary shadow-sm hover:bg-primary/5 border border-primary/25"
+                >
+                    {{ $primary_button_text }}
+                </a>
+            @endif
+
+            @if ($secondary_button_url && $secondary_button_text)
+                <a
+                    href="{{ $secondary_button_url }}"
+                    class="inline-flex items-center text-sm px-3.5 py-2.5 rounded-md font-semibold text-gray-900 gap-x-1 hover:bg-gray-50 border border-transparent"
+                >
+                    {{ $secondary_button_text }}
+                    <x-ri-arrow-right-line class="w-4 h-4" />
+                </a>
+            @endif
+        </div>
     </div>
 </div>
diff --git a/resources/views/components/blocks/people.blade.php b/resources/views/components/blocks/people.blade.php
index 2d453599..34a53299 100644
--- a/resources/views/components/blocks/people.blade.php
+++ b/resources/views/components/blocks/people.blade.php
@@ -15,11 +15,13 @@ class="grid lg:col-span-2 sm:grid-cols-2 gap-x-6 gap-y-8 md:grid-cols-3 lg:grid-
                     <a
                         href="{{ $person->url }}"
                         title="{{ __('person.action.view') }}"
-                        class="block overflow-hidden transition-shadow duration-150 rounded-lg shadow-lg aspect-w-1 aspect-h-1 hover:shadow-xl">
+                        class="block overflow-hidden transition-shadow duration-150 rounded-lg shadow-lg aspect-w-1 aspect-h-1 hover:shadow-xl"
+                    >
                         <x-media.image
                             :src="$person->getThumbnailUrl(large: true)"
                             class="object-cover"
-                            :preload="$shouldPreload()" />
+                            :preload="$shouldPreload()"
+                        />
                     </a>
                 @endif
 
@@ -27,7 +29,8 @@ class="object-cover"
                     <a
                         href="{{ $person->url }}"
                         title="{{ __('person.action.view') }}"
-                        class="flex items-center justify-between gap-2 hover:underline">
+                        class="flex items-center justify-between gap-2 leading-tight hover:underline"
+                    >
                         <h3 class="font-semibold text-gray-900">
                             {{ $person->name }}
                         </h3>
@@ -35,7 +38,7 @@ class="flex items-center justify-between gap-2 hover:underline">
                         <x-ri-arrow-right-line class="w-5 h-5 shrink-0" />
                     </a>
 
-                    <p class="font-medium text-primary">{{ $person->title }}</p>
+                    <p class="text-sm font-medium text-primary">{{ $person->title }}</p>
                 </div>
 
                 <div class="prose text-gray-500 line-clamp-3">
diff --git a/resources/views/front/decisions/category.blade.php b/resources/views/front/decisions/category.blade.php
index c0c3f4d0..05c6be3d 100644
--- a/resources/views/front/decisions/category.blade.php
+++ b/resources/views/front/decisions/category.blade.php
@@ -4,7 +4,7 @@
             {{ $category->title }}
         </h1>
 
-        <div class="mt-4 prose text-gray-500 max-w-prose sm:prose-lg lg:prose-xl">
+        <div class="mt-4 prose text-gray-500 sm:prose-lg lg:prose-xl">
             {!! $category->description !!}
         </div>
 
diff --git a/resources/views/front/posts/category.blade.php b/resources/views/front/posts/category.blade.php
index 73f44a49..0240bc2f 100644
--- a/resources/views/front/posts/category.blade.php
+++ b/resources/views/front/posts/category.blade.php
@@ -4,7 +4,7 @@
             {{ $category->title }}
         </h1>
 
-        <div class="mt-4 prose text-gray-500 max-w-prose sm:prose-lg lg:prose-xl">
+        <div class="mt-4 prose text-gray-500 sm:prose-lg lg:prose-xl">
             {!! $category->description !!}
         </div>