Add components
This commit is contained in:
parent
e447693306
commit
bbd2f6e32f
7 changed files with 240 additions and 0 deletions
0
source/src/components/global/Footer.astro
Normal file
0
source/src/components/global/Footer.astro
Normal file
20
source/src/components/global/Head.astro
Normal file
20
source/src/components/global/Head.astro
Normal 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
79
source/src/components/global/Header.astro
Normal 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
51
source/src/components/global/SearchMenu.astro
Normal 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
24
source/src/components/search/Correction.astro
Normal 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
23
source/src/components/search/RelatedSearches.astro
Normal 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
43
source/src/components/search/WebLink.astro
Normal 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>
|
||||
Reference in a new issue