Skip to content

Commit

Permalink
Create search dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@luiz-moura
luiz-moura committed Feb 10, 2022
1 parent 155e0fc commit 9d8b65e
Show file tree
Hide file tree
Showing 5 changed files with 189 additions and 71 deletions.
26 changes: 26 additions & 0 deletions app/Http/Livewire/SearchDropdown.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<?php

namespace App\Http\Livewire;

use Illuminate\Support\Facades\Http;
use Livewire\Component;

class SearchDropdown extends Component
{
public $search = '';

public function render()
{
$searchResults = [];

if (strlen($this->search) >= 2) {
$searchResults = Http::withToken(config('services.tmdb.token'))
->get("https://api.themoviedb.org/3/search/movie?query={$this->search}")
->json()['results'];
}

return view('livewire.search-dropdown', [
'searchResults' => collect($searchResults)->take(7),
]);
}
}
187 changes: 124 additions & 63 deletions public/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5101,27 +5101,36 @@ Ensure the default browser behavior of the `hidden` attribute.
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-2 {
margin-top: 0.5rem;
.mt-4 {
margin-top: 1rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-12 {
margin-top: 3rem;
}
.mr-8 {
margin-right: 2rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.ml-4 {
margin-left: 1rem;
}
.ml-12 {
margin-left: 3rem;
}
.mt-4 {
margin-top: 1rem;
}
.-mt-px {
margin-top: -1px;
}
Expand All @@ -5131,21 +5140,18 @@ Ensure the default browser behavior of the `hidden` attribute.
.mt-1\.5 {
margin-top: 0.375rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-24 {
margin-left: 6rem;
}
.mt-12 {
margin-top: 3rem;
.mr-4 {
margin-right: 1rem;
}
.ml-8 {
margin-left: 2rem;
.mr-3 {
margin-right: 0.75rem;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.grid {
display: grid;
}
Expand All @@ -5164,8 +5170,11 @@ Ensure the default browser behavior of the `hidden` attribute.
.min-h-screen {
min-height: 100vh;
}
.w-96 {
width: 24rem;
.w-64 {
width: 16rem;
}
.w-6 {
width: 1.5rem;
}
.w-auto {
width: auto;
Expand All @@ -5176,15 +5185,12 @@ Ensure the default browser behavior of the `hidden` attribute.
.w-5 {
width: 1.25rem;
}
.w-64 {
width: 16rem;
}
.w-6 {
width: 1.5rem;
}
.max-w-6xl {
max-width: 72rem;
}
.flex-none {
flex: none;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
Expand All @@ -5209,12 +5215,12 @@ Ensure the default browser behavior of the `hidden` attribute.
.overflow-hidden {
overflow: hidden;
}
.rounded-full {
border-radius: 9999px;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-full {
border-radius: 9999px;
}
.border-b {
border-bottom-width: 1px;
}
Expand All @@ -5229,10 +5235,13 @@ Ensure the default browser behavior of the `hidden` attribute.
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-x-gray-800 {
.border-gray-700 {
--tw-border-opacity: 1;
border-left-color: rgb(31 41 55 / var(--tw-border-opacity));
border-right-color: rgb(31 41 55 / var(--tw-border-opacity));
border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
.bg-orange-500 {
--tw-bg-opacity: 1;
background-color: rgb(249 115 22 / var(--tw-bg-opacity));
}
.bg-gray-100 {
--tw-bg-opacity: 1;
Expand All @@ -5250,10 +5259,6 @@ Ensure the default browser behavior of the `hidden` attribute.
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.bg-orange-500 {
--tw-bg-opacity: 1;
background-color: rgb(249 115 22 / var(--tw-bg-opacity));
}
.fill-current {
fill: currentColor;
}
Expand All @@ -5272,6 +5277,10 @@ Ensure the default browser behavior of the `hidden` attribute.
padding-top: 4rem;
padding-bottom: 4rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
Expand All @@ -5288,9 +5297,13 @@ Ensure the default browser behavior of the `hidden` attribute.
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.pt-16 {
padding-top: 4rem;
Expand All @@ -5311,14 +5324,14 @@ Ensure the default browser behavior of the `hidden` attribute.
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.font-semibold {
font-weight: 600;
}
Expand All @@ -5339,29 +5352,29 @@ Ensure the default browser behavior of the `hidden` attribute.
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-gray-700 {
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.text-gray-500 {
.text-white {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-gray-600 {
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-white {
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-300 {
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.underline {
-webkit-text-decoration-line: underline;
Expand Down Expand Up @@ -5389,10 +5402,58 @@ Ensure the default browser behavior of the `hidden` attribute.
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.spinner {
position: relative;
color: transparent !important;
pointer-events: none;
}
.spinner::after {
content: '';
position: absolute !important;
top: calc(50% - (1em / 2));
left: calc(50% - (1em / 2));
display: block;
width: 1em;
height: 1em;
border: 2px solid #dae1e7;
border-radius: 9999px;
border-right-color: transparent;
border-top-color: transparent;
-webkit-animation: spinAround 500ms infinite linear;
animation: spinAround 500ms infinite linear;
}
@-webkit-keyframes spinAround {

from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}
@keyframes spinAround {

from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

.spinner {
position: absolute;
}
.hover\:bg-orange-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(234 88 12 / var(--tw-bg-opacity));
}
.hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.hover\:text-gray-300:hover {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
Expand Down Expand Up @@ -5489,24 +5550,20 @@ Ensure the default browser behavior of the `hidden` attribute.
}
@media (min-width: 768px) {

.md\:ml-6 {
margin-left: 1.5rem;
.md\:ml-24 {
margin-left: 6rem;
}

.md\:mt-0 {
margin-top: 0px;
}

.md\:ml-4 {
margin-left: 1rem;
}

.md\:ml-24 {
margin-left: 6rem;
.md\:ml-6 {
margin-left: 1.5rem;
}

.md\:w-96 {
width: 24rem;
.md\:ml-4 {
margin-left: 1rem;
}

.md\:grid-cols-3 {
Expand All @@ -5531,6 +5588,10 @@ Ensure the default browser behavior of the `hidden` attribute.
}
@media (min-width: 1024px) {

.lg\:w-96 {
width: 24rem;
}

.lg\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
Expand Down
4 changes: 4 additions & 0 deletions resources/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
@tailwind components;
@tailwind utilities;

.spinner {
position: absolute;
}

@import '~@fortawesome/fontawesome-free/css/fontawesome';
@import '~@fortawesome/fontawesome-free/css/regular';
@import '~@fortawesome/fontawesome-free/css/solid';
Expand Down
Loading

0 comments on commit 9d8b65e

Please sign in to comment.