Skip to content

Instantly share code, notes, and snippets.

@NandoKstroNet

NandoKstroNet/Contents.php

Last active February 2, 2022 21:21
Show Gist options
  • Save NandoKstroNet/2082dd3bbcc6e568adf333f40bee159e to your computer and use it in GitHub Desktop.
Save NandoKstroNet/2082dd3bbcc6e568adf333f40bee159e to your computer and use it in GitHub Desktop.
Download ZIP
Área dos meus conteúdos Projeto VideoFlix Curso Laravel Mastery em https://laravelmastery.com.br
Raw
contents.blade.php
<div class="max-w-7xl mx-auto mt-10 py-6 px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-3 gap-0.5">
@foreach($contents as $content)
<div class="w-96 mb-8 bg-gray-900 rounded shadow-lg hover:p-4">
<img src="{{$content->cover}}" alt="Capa do conteúdo: {{$content->title}}" class="mb-8 rounded-t">
<div class="px-4 pb-4 text-white relative h-64">
<h5 class="font-extrabold text-2xl mb-4">{{$content->title}}</h5>
<p class="leading-4 text-xl mb-20">{{$content->description}}</p>
<a href="{{route('video.player', $content)}}" class="mt-8 font-bold text-2xl block w-full text-center px-2 py-4
hover:bg-white hover:text-gray-900 rounded transition duration-300 ease-in-out
absolute bottom-0.5 left-0 right-0">Assistir</a>
</div>
</div>
@endforeach
</div>
</div>
Raw
Contents.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Content;
class Contents extends Component
{
public Content $content;
public function mount(Content $content)
{
$this->content = $content;
}
public function render()
{
return view('livewire.contents', [
'contents' => $this->content->paginate(10)
])->layout('layouts.my-contents');
}
}
Raw
layout-my-contents.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
@livewireStyles
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-black">
@include('layouts.my-navigation')
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
@livewireScripts
</body>
</html>
Raw
my-navigation.blade.php
<nav x-data="{ open: false }" class="bg-black border-b border-gray-600">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="flex-shrink-0 flex items-center">
<a href="{{ route('my-content.main') }}">
<x-application-logo class="block h-10 w-auto fill-current text-gray-600" />
</a>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<x-nav-link :href="route('my-content.main')">
Meus Conteúdos
</x-nav-link>
</div>
</div>
<!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ml-6">
<div class="flex">
<x-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
<div>{{ Auth::user()->name }}</div>
<div class="ml-1">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
</x-slot>
<x-slot name="content">
<!-- Authentication -->
<form method="POST" action="{{ route('logout') }}">
@csrf
<x-dropdown-link :href="route('logout')"
onclick="event.preventDefault();
this.closest('form').submit();">
{{ __('Log Out') }}
</x-dropdown-link>
</form>
</x-slot>
</x-dropdown>
</div>
</div>
<!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Responsive Navigation Menu -->
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<x-responsive-nav-link :href="route('my-content.main')" :active="request()->routeIs('my-content*')">
Meus Conteúdos
</x-responsive-nav-link>
</div>
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200">
<div class="px-4">
<div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
<div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
</div>
<div class="mt-3 space-y-1">
<!-- Authentication -->
<form method="POST" action="{{ route('logout') }}">
@csrf
<x-responsive-nav-link :href="route('logout')"
onclick="event.preventDefault();
this.closest('form').submit();">
{{ __('Log Out') }}
</x-responsive-nav-link>
</form>
</div>
</div>
</div>
</nav>
Raw
routes-contents.php
<?php
Route::get('/watch/{content:slug}',\App\Http\Livewire\Player::class)->middleware('auth')->name('video.player');
Route::middleware(['auth'])->prefix('my-content')->name('my-content.')->group(function(){
Route::get('/', \App\Http\Livewire\Contents::class)->name('main');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment