Korbs/Zarro
Korbs/Zarro
1
Fork 0
Code Issues Pull requests Activity

Add components

Browse source
This commit is contained in:
Korbs 2024-10-23 00:15:28 -04:00
parent e447693306
commit bbd2f6e32f
7 changed files with 240 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
source/src/components/global/Footer.astro Normal file
View file

20
source/src/components/global/Head.astro Normal file
View file

@ -0,0 +1,20 @@
---
// Components
import { Tooltips } from 'astro-tooltips'
---
<head>
<title>Zarro Search</title>
<!-- Metadata -->
<title></title>
<meta name="description" />
<!-- Options -->
<meta charset="UTF-8" />
<meta name="theme-color" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover" />
<!-- Favicon -->
<link rel="apple-touch-icon" href="https://md.sudovanilla.org/images/Union.png" />
<link rel="icon" href="https://md.sudovanilla.org/images/Union.png" />
<!-- Tooltip -->
<Tooltips interactive={false} delay={[15, 1000]} />
</head>

79
source/src/components/global/Header.astro Normal file
View file

@ -0,0 +1,79 @@
---
// Properties
const {Query} = Astro.props
// Icons
import { HalfMoon, Menu } from "@iconoir/vue";
---
<header>
<div class="header-start">
<img width="18px" src="https://md.sudovanilla.org/images/Union.png" />
<div class="search-box">
<input value={Query} placeholder="Search" />
</div>
</div>
<div class="header-end">
<button>English</button>
<button title="Toggle Theme" class="button-icon"><HalfMoon /></button>
<button title="Options" class="button-icon" data-tooltip-placement="right"><Menu /></button>
</div>
</header>
<style lang="scss">
header {
padding: 16px 0px;
display: flex;
justify-content: space-between;
align-items: center;
.header-start,
.header-end {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
}
.header-end {
button {
min-height: 32px;
border-radius: 3rem;
border: 1px white solid;
padding: 0px 12px;
background: white;
border: 1px rgb(192, 192, 192) solid;
cursor: pointer;
}
.button-icon {
aspect-ratio: 1;
padding: 0px 6px;
svg {
width: 16px;
transform: translate(0px, 2px);
}
}
}
.search-box {
background: white;
border: 1px rgb(192, 192, 192) solid;
border-radius: 3rem;
display: flex;
align-items: center;
gap: 6px;
padding: 16px 8px;
position: relative;
max-width: 500px;
width: 300px;
input {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: 3rem;
border: none;
background: transparent;
padding: 0px 12px;
}
}
}
</style>

51
source/src/components/global/SearchMenu.astro Normal file
View file

@ -0,0 +1,51 @@
---
// Properties
const {Type} = Astro.props
// Highlight Type
---
<div class="search-menu">
<a id="search-type-item-web" href="#">Web</a>
<a class="disabled-items" id="search-type-item-images" href="#">Images</a>
<a class="disabled-items" id="search-type-item-videos" href="#">Videos</a>
<a class="disabled-items" id="search-type-item-news" href="#">News</a>
<a class="disabled-items" id="search-type-item-map" href="#">Map</a>
</div>
<style lang="scss">
.search-menu {
a {
color: black;
text-decoration: none;
background: rgba(255, 255, 255, 0.25);
border-width: 2px;
border-style: solid;
border-color: transparent;
border-radius: 6px;
padding: 6px 12px;
transition: 0.3s background, 0.2s border-color;
&:hover {
background: rgba(255, 255, 255, 0.75);
border-color: #ddd;
transition: 0.3s background, 0.2s border-color;
}
}
}
</style>
{
()=> {
if (Type === "Web") {
return <style>#search-type-item-web {background: white; border-color: #ddd;} </style>
} else if (Type === "Images") {
return <style>#search-type-item-images {background: white; border-color: #ddd;} </style>
} else if (Type === "Videos") {
return <style>#search-type-item-videos {background: white; border-color: #ddd;} </style>
} else if (Type === "News") {
return <style>#search-type-item-news {background: white; border-color: #ddd;} </style>
} else if (Type === "Map") {
return <style>#search-type-item-map {background: white; border-color: #ddd;} </style>
}
}
}

24
source/src/components/search/Correction.astro Normal file
View file

@ -0,0 +1,24 @@
---
// Properties
const {
DidYouMean,
ActualQuery
} = Astro.props
---
<div class="search-correction">
<p>Did you mean "<a href="#">{DidYouMean}</a>"?</p>
<p>Search for "<a href="#">{ActualQuery}</a>" instead.</p>
</div>
<style lang="scss">
.search-correction {
border: 2px #ddd solid;
padding: 6px 24px;
font-size: 14px;
margin-bottom: 6px;
p {
margin: 0px;
}
}
</style>

23
source/src/components/search/RelatedSearches.astro Normal file
View file

@ -0,0 +1,23 @@
<p>Related searches</p>
<div class="related-search-tags">
<slot/>
</div>
<style lang="scss" is:global>
.related-search-tags {
line-height: 32px;
display: flex;
flex-wrap: wrap;
a {
background: white;
border-radius: 3rem;
text-decoration: none;
font-size: 14px;
padding: 6px 12px;
color: black;
text-wrap: nowrap;
margin-bottom: 6px;
margin-right: 4px;
}
}
</style>

43
source/src/components/search/WebLink.astro Normal file
View file

@ -0,0 +1,43 @@
---
// Properties
const {
Title,
Description,
Link
} = Astro.props
---
<div class="search-result-web">
<a href={Link}>
<h2>{Title}</h2>
<p><u>{Link}</u></p>
</a>
<p>{Description}</p>
</div>
<style lang="scss">
.search-result-web {
display: flex;
flex-direction: column;
gap: 6px;
background: white;
margin-bottom: 12px;
border-radius: 6px;
padding: 6px 12px;
box-shadow: 0px 4px 10px 0px #0000000a;
* {
margin: 0px;
}
p {
font-size: 14px;
}
a {
h2 {
font-size: 20px;
}
p {
font-size: 14px;
}
}
}
</style>