Add Search Field

This commit is contained in:
Korbs 2024-09-06 23:45:59 -04:00
parent bddd6b9c51
commit 3a55534dbb
2 changed files with 137 additions and 2 deletions

55
src/search/Field.astro Normal file
View file

@ -0,0 +1,55 @@
---
import { Search, ArrowRight } from "@iconoir/vue";
---
<div class="search-field">
<Search class="search-field-mag" />
<input placeholder="Search..." />
<button class="search-field-submit">Go</button>
</div>
<style lang="scss">
.search-field {
display: flex;
align-items: center;
position: relative;
max-width: 360px;
input {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: -moz-available;
border-radius: 3rem;
border: 1px #3b3b3b solid;
background: #282828;
color: white;
padding: 18px 24px 18px 48px;
&:focus {
outline: none;
}
}
.search-field-mag {
position: absolute;
z-index: 5;
left: 18px;
top: 7px;
width: 18px;
pointer-events: none;
}
.search-field-submit {
display: none;
position: absolute;
right: 12px;
top: 6px;
border-radius: 3rem;
border: none;
align-items: center;
gap: 6px;
font-size: 14px;
background: white;
padding: 4px 12px;
cursor: pointer;
}
}
</style>

View file

@ -10,6 +10,32 @@ import SidebarCreator from '../../../src/SidebarCreator.astro'
import Dialog from '../../../src/Dialog.astro' import Dialog from '../../../src/Dialog.astro'
import Sidebar from '../../../src/Sidebar.astro' import Sidebar from '../../../src/Sidebar.astro'
import Video from '../../../src/VideoItem.astro' import Video from '../../../src/VideoItem.astro'
import Category from '../../../src/Category.astro'
import SearchField from '../../../src/search/Field.astro'
// Data
/// Fetch Categories for YouTube
const TrendingFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending'
const TrendingResponse = await fetch(TrendingFetch)
const TrendingData = await TrendingResponse.json()
const TrendingSplit = TrendingData.slice(0, 1)
const MoviesFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending?type=movies'
const MoviesResponse = await fetch(MoviesFetch)
const MoviesData = await MoviesResponse.json()
const MoviesSplit = MoviesData.slice(0, 1)
const MusicFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending?type=music'
const MusicResponse = await fetch(MusicFetch)
const MusicData = await MusicResponse.json()
const MusicSplit = MusicData.slice(0, 1)
const GamingFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending?type=gaming'
const GamingResponse = await fetch(GamingFetch)
const GamingData = await GamingResponse.json()
const GamingSplit = GamingData.slice(0, 1)
// Icons // Icons
import { import {
@ -27,6 +53,7 @@ import {
LogOut, LogOut,
OpenInBrowser OpenInBrowser
} from '@iconoir/vue' } from '@iconoir/vue'
import { Search } from '@iconoir/vue'
--- ---
@ -93,6 +120,14 @@ import {
</Sidebar> </Sidebar>
<div class="content"> <div class="content">
<div style="margin: auto;width: 360px;padding: 64px;">
<SearchField/>
</div>
<br/>
<br/>
<br/>
<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 12px;"> <div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 12px;">
<Video <Video
VideoId="PuGeR075MkE" VideoId="PuGeR075MkE"
@ -148,6 +183,45 @@ import {
<br/> <br/>
<br/> <br/>
<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px;">
{TrendingSplit.map((category) =>
<Category
Name="Trending"
Link="#"
Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
Platform="YouTube"
/>
)}
{MoviesSplit.map((category) =>
<Category
Name="Trailers"
Link="#"
Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
Platform="YouTube"
/>
)}
{MusicSplit.map((category) =>
<Category
Name="Music"
Link="#"
Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
Platform="YouTube"
/>
)}
{GamingSplit.map((category) =>
<Category
Name="Gaming"
Link="#"
Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
Platform="YouTube"
/>
)}
</div>
<br/>
<br/>
<br/>
<Comment <Comment
Avatar="https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj" Avatar="https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj"
Username="The Linux Experiment" Username="The Linux Experiment"
@ -163,7 +237,7 @@ Phasellus eget consequat penatibus magnis at. Augue neque placerat pellentesque
body { body {
background: black; background: black;
color: white; color: white;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;+
} }
.content { .content {
margin-left: 260px; margin-left: 260px;
@ -212,4 +286,10 @@ body {
document.querySelector('#dialog-id-thingie').style.display = 'none' document.querySelector('#dialog-id-thingie').style.display = 'none'
document.querySelector('#dialog-id-thingie-backdrop').style.display = 'none' document.querySelector('#dialog-id-thingie-backdrop').style.display = 'none'
} }
</script> </script>
<style is:inline>
div.fl-sidebar-items:nth-child(2) > a:nth-child(1) {
background: #3c3c3c !important;
}
</style>