Initial commit

resources/themes/atom/views/components/article-card.blade.php

@@ -0,0 +1,45 @@
+@props(['article', 'forSlider' => false])
+
+<div @class([
+ 'h-[180px] md:h-[210px] rounded w-full shadow-sm relative overflow-hidden transition ease-in-out duration-200',
+ 'hover:scale-[101%]' => !$forSlider,
+ 'swiper-slide group' => $forSlider,
+]) style="background-color: var(--color-surface)"
+@if (!$forSlider)
+ onmouseover="slideImage({{ $article->id }})" onmouseleave="unslideImage({{ $article->id }})"
+ @endif>
+ <a href="{{ route('article.show', $article->slug) }}">
+ <div id="article-{{ $article->id }}" style="background: url('/storage/{{ $article->image }}');" class="article-image">
+ </div>
+
+ <div class="mt-3 md:mt-4 px-3 md:px-4">
+ <p @class([
+ 'font-semibold text-base md:text-lg truncate',
+ 'group-hover:text-[var(--color-primary)] transition duration-200' => $forSlider,
+ ]) >
+ {{ $article->title }}
+ </p>
+
+ <div class="flex items-center gap-x-2">
+ <div
+ class="mt-2 md:mt-3 flex h-8 w-8 md:h-10 md:w-10 items-center justify-center overflow-hidden rounded-full" style="background-color: var(--color-background)">
+ <img src="{{ setting('avatar_imager') }}{{ $article->user?->look }}&headonly=1" alt="">
+ </div>
+
+ <p class="mt-2 md:mt-4 font-semibold text-sm md:text-base" style="color: var(--color-text-muted)">
+ {{ $article->user->username ?? setting('hotel_name') }}
+ </p>
+ </div>
+ </div>
+ </a>
+</div>
+
+<script>
+ function slideImage(articleId) {
+ document.getElementById('article-' + articleId).classList.add('article-image-slide');
+ }
+
+ function unslideImage(articleId) {
+ document.getElementById('article-' + articleId).classList.remove('article-image-slide');
+ }
+</script>