sort quote by category and author.

src/components.d.ts

@@ -24,8 +24,10 @@ declare module 'vue' {
     IRiShuffleFill: typeof import('~icons/ri/shuffle-fill')['default']
     IRiSunLine: typeof import('~icons/ri/sun-line')['default']
     QuoteCard: typeof import('./components/QuoteCard.vue')['default']
+    QuoteCardMini: typeof import('./components/QuoteCardMini.vue')['default']
     QuoteDialog: typeof import('./components/QuoteDialog.vue')['default']
     QuoteGallery: typeof import('./views/QuoteGallery.vue')['default']
+    QuoteMore: typeof import('./components/QuoteMore.vue')['default']
     QuoteSearch: typeof import('./components/QuoteSearch.vue')['default']
     QuotesFilter: typeof import('./components/QuotesFilter.vue')['default']
   }

src/components/QuoteCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, toRef, computed, withDefaults } from 'vue'
+import { toRef, computed, withDefaults } from 'vue'
 
 import { IQuote } from '../types'
 import { isValidLink } from '../utils/helpers'

src/components/QuoteCardMini.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { toRef } from 'vue'
+
+import { IQuote } from '../types.d'
+import { gradients } from '../utils/gradients'
+import { isValidLink } from '../utils/helpers'
+
+const props = defineProps<{
+  quote: IQuote
+}>()
+
+const quote = toRef(props, 'quote')
+
+function getGradientByIndex(index = 0) {
+  return gradients[index]
+}
+function truncateText(text: string, length = 52) {
+  return `${text.substring(0, length).trimEnd()}...`
+}
+</script>
+
+<template>
+  <div ref="card" class="card-size--mini w-full relative text-white overflow-hidden flex rounded-3xl shadow-lg p-2" :class="getGradientByIndex(quote.gradient_id)">
+    <div class="w-full flex flex-col dark:bg-gray-800 dark:rounded-2.2xl">
+      <div class="card-content flex flex-col items-start relative p-3 xl:p-5">
+        <a :href="`/quote/${quote.slug}`" target="_blank" class="absolute top-4 right-6 p-2 rounded-full hover:bg-black hover:bg-opacity-25 dark:hover:bg-gray-600 transition-colors hide-on-save button-save cursor-pointer" @click.stop>
+          <i-mdi-open-in-new />
+        </a>
+
+        <h2 class="card-content--icon flex-1">
+          <i-ri-double-quotes-l />
+        </h2>
+        <p class="card-content--text">
+          {{ truncateText(quote.text) }}
+        </p>
+        <p v-if="isValidLink(quote.author_detail_url)" class="card-content--author text-sm text-gray-100">
+          - <a :href="quote.author_detail_url" target="_blank" :title="`Read more about ${quote.author}`" rel="noreferrer noopener" class="pb-1 hover:border-b-2 hover:border-gray-200">{{ quote.author }}</a>
+        </p>
+        <p v-else class="card-content--author text-sm md:whitespace-nowrap text-gray-100">
+          - {{ quote.author }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.card-size--mini {
+  @apply md:hover:rotate-1 md:hover:scale-105 duration-300;
+}
+.card-size--mini .card-content .card-content--text {
+  @apply text-lg;
+}
+</style>

src/components/QuoteMore.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import rawQuotes from '../assets/quotes.json'
+
+import { IQuote } from '../types.d'
+import { shuffle } from '../utils/helpers'
+
+const props = defineProps<{
+  id: string
+  author: string
+}>()
+
+const getQuotesByAuthor = (): IQuote[] => {
+  const filtered = rawQuotes.filter(quote => (quote.author === props.author && quote.id !== props.id))
+
+  return shuffle(filtered).slice(0, 4)
+}
+
+const quotes = ref<IQuote[]>([])
+
+onMounted(() => {
+  quotes.value = getQuotesByAuthor()
+})
+</script>
+
+<template>
+  <div v-if="quotes.length > 0">
+    <h2 class="mt-12 mb-5 text-xl dark:text-white">
+      Quotes lain dari {{ author }} :
+    </h2>
+    <div class="grid grid-flow-row-dense grid-cols-2 gap-5">
+      <section v-for="quote in quotes" :key="quote.id" class="quote-card--container flex cursor-pointer">
+        <quote-card-mini :quote="quote" />
+      </section>
+    </div>
+  </div>
+</template>
+
+<style></style>

src/views/QuotePage.vue

@@ -26,6 +26,9 @@ onMounted(() => {
       <div class="grid grid-flow-row-dense grid-cols-1 gap-5 md:gap-6 xl:gap-8">
         <quote-card :quote="quote" size="xl" class="z-20 p-3" />
       </div>
+      <div class="mt-6">
+        <quote-more :id="quote.id" :author="quote.author" />
+      </div>
     </div>
   </div>
 </template>