archtechx/laravel-tips
1
0
Fork 0
mirror of https://github.com/archtechx/laravel-tips.git synced 2025-12-12 05:14:04 +00:00
Code Activity

wip

Browse source
This commit is contained in:
Lars Klopstra 2021-04-07 18:31:59 +02:00
parent 5a65a83563
commit 8623a25b79
15 changed files with 8748 additions and 2104 deletions
Download patch file Download diff file Expand all files Collapse all files

58
resources/views/components/feed.blade.php
View file

@ -1,23 +1,45 @@
@props([
'tips',
])
@props(['tips'])
<section role="feed" class="my-8">
@foreach($tips as $tip)
<article class="border-b-2 border-gray-200 py-16" x-data @click="window.location.href = '{{ route('tip.show', $tip) }}'">
<h1 class="text-3xl font-medium">
<a href="{{ route('tip.show', $tip) }}">🔥 {{ $tip->title }}</a>
</h1>
<section role="feed" class="divide-y">
@foreach ($tips as $tip)
<div class="py-12 md:py-24 {{ $loop->odd ?: 'bg-gray-50' }}">
<div class="w-full max-w-4xl px-4 mx-auto sm:px-6 md:px-8">
<article
class="flex flex-col items-center space-y-6 md:space-y-12 text-center group transition transform active:scale-[0.99] duration-75 relative"
role="article">
<a class="absolute inset-0 w-full h-full" title="{{ $tip->title }}"
href="{{ route('tip.show', $tip) }}">
<span class="sr-only">{{ $tip->title }}</span>
</a>
<div class="mt-4 flex justify-center w-1/2 gap-1 flex-wrap mx-auto">
@foreach($tip->images() as $image)
<img alt="{{ $tip->title }}" src="{{ $image->small() }}">
@endforeach
<div
class="transition duration-200 transform shadow rounded-2xl group-hover:rotate-6 group-hover:-translate-y-2 group-hover:shadow-md">
<div
class="flex items-center justify-center w-16 h-16 text-2xl font-bold shadow-xl bg-gradient-to-b from-white to-pink-50 rounded-2xl tabular-nums">
<p
class="text-transparent transition duration-300 transform bg-gradient-to-br from-yellow-400 to-pink-400 bg-clip-text group-hover:scale-105 group-hover:rotate-6">
{{ count($tips) - $loop->index }}
</p>
</div>
</div>
<h2 class="text-xl font-bold tracking-tight md:text-4xl">
🔥 {{ $tip->title }}
</h2>
@if ($tip->images())
@foreach ($tip->images() as $image)
<img class="shadow-xl rounded-xl" src="{{ $image->small() }}" alt="{{ $tip->title }}">
@endforeach
@endif
@if ($tip->content)
<div class="prose break-all md:prose-xl">
{!! Str::of($tip->content)->markdown() !!}
</div>
@endif
</article>
</div>
<section role="article" class="mt-8 text-xl prose mx-auto">
@markdown{!! $tip->content !!}@endmarkdown
</section>
</article>
</div>
@endforeach
</section>