diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/LeftSidebarComponent.astro | 31 | ||||
| -rw-r--r-- | src/components/NavigationComponent.astro | 29 | ||||
| -rw-r--r-- | src/components/NavigationComponentLink.astro | 8 | ||||
| -rw-r--r-- | src/components/RightNavigationComponent.astro | 29 | ||||
| -rw-r--r-- | src/components/RightNavigationComponentLink.astro | 7 | ||||
| -rw-r--r-- | src/components/RightSidebarComponent.astro | 19 | ||||
| -rw-r--r-- | src/components/SearchComponent.astro | 31 |
7 files changed, 154 insertions, 0 deletions
diff --git a/src/components/LeftSidebarComponent.astro b/src/components/LeftSidebarComponent.astro new file mode 100644 index 0000000..0580d09 --- /dev/null +++ b/src/components/LeftSidebarComponent.astro @@ -0,0 +1,31 @@ +--- +import NavigationComponent from './NavigationComponent.astro'; +import NavigationComponentLink from './NavigationComponentLink.astro'; +--- + +<aside class="w-1/6"> + <NavigationComponent title="Navigation"> + <NavigationComponentLink href="/">Home</NavigationComponentLink> + <NavigationComponentLink href="/districts">Districts</NavigationComponentLink> + <NavigationComponentLink href="/guides">Guides</NavigationComponentLink> + <NavigationComponentLink href="/thoughts">Thoughts</NavigationComponentLink> + <NavigationComponentLink href="/faq">FAQ</NavigationComponentLink> + </NavigationComponent> + + <img + id="sidebar-image" + src="/images/internal/sidebar/default.gif" + alt="Left Sidebar Image" + class="w-full h-auto rounded-xl pointer-events-none select-none" + /> + + <NavigationComponent title="Resources" variation="alternate"> + <NavigationComponentLink href="/resources/avatars">Avatars</NavigationComponentLink> + <NavigationComponentLink href="/resources/backgrounds">Tiled Backgrounds</NavigationComponentLink> + <NavigationComponentLink href="/resources/blinkies">Blinkies</NavigationComponentLink> + <NavigationComponentLink href="/resources/flags">Flags</NavigationComponentLink> + <NavigationComponentLink href="/resources/stamps">Stamps</NavigationComponentLink> + </NavigationComponent> +</aside> + +<script src="../scripts/sidebarImage.ts"></script> diff --git a/src/components/NavigationComponent.astro b/src/components/NavigationComponent.astro new file mode 100644 index 0000000..9987c2f --- /dev/null +++ b/src/components/NavigationComponent.astro @@ -0,0 +1,29 @@ +--- +const { title, variation, bordered = true } = Astro.props; +--- + +<section class="saira uppercase my-4"> + <div class="text-xl flex flex-row gap-2 justify-center items-center"> + <div class={`${ + variation === "alternate" ? "bg-pagodapink" : "bg-pagodapurple" + } + rounded-l-2xl px-4 h-6`}></div> + <div>{title}</div> + <div class={`${ + variation === "alternate" ? "bg-pagodapurple" : "bg-pagodapink" + } ${ + bordered ? "rounded-tr-2xl" : "rounded-r-2xl" + } + flex-grow h-6`}></div> + </div> + <div class={` + ${ + bordered ? variation === "alternate" ? "border-pagodapurple bg-pagodapurple" : "border-pagodapink bg-pagodapink" : "" + } + ${ + bordered ? "border-r-8 border-b-2 border-solid relative bottom-1" : "" + } + rounded-br ml-8`}> + <slot /> + </div> +</section>
\ No newline at end of file diff --git a/src/components/NavigationComponentLink.astro b/src/components/NavigationComponentLink.astro new file mode 100644 index 0000000..30fa456 --- /dev/null +++ b/src/components/NavigationComponentLink.astro @@ -0,0 +1,8 @@ +--- +const { href } = Astro.props; +--- + +<div class="text-pagodagreen group hover:text-pagodagreen-shine bg-black py-1 flex flex-row gap-2 justify-end transition-all ease-in-out hover:gap-4 duration-300 font-semibold first:rounded-tr-xl"> + <a href={href}><slot /></a> + <span class="text-black group-hover:text-pagodapink-shine">▎</span> +</div>
\ No newline at end of file diff --git a/src/components/RightNavigationComponent.astro b/src/components/RightNavigationComponent.astro new file mode 100644 index 0000000..fcf0c39 --- /dev/null +++ b/src/components/RightNavigationComponent.astro @@ -0,0 +1,29 @@ +--- +const { title, variation, bordered = true } = Astro.props; +--- + +<section class="saira uppercase my-4"> + <div class="text-xl flex flex-row gap-2 justify-center items-center"> + <div class={`${ + variation === "alternate" ? "bg-pagodapink" : "bg-pagodapurple" + } + rounded-tl-2xl px-4 h-6`}></div> + <div>{title}</div> + <div class={`${ + variation === "alternate" ? "bg-pagodapurple" : "bg-pagodapink" + } ${ + bordered ? "rounded-r-2xl" : "rounded-tr-2xl" + } + flex-grow h-6`}></div> + </div> + <div class={` + ${ + bordered ? variation === "alternate" ? "border-pagodapink bg-pagodapink" : "border-pagodapurple bg-pagodapurple" : "" + } + ${ + bordered ? "border-l-8 border-b-2 border-solid relative bottom-1" : "" + } + rounded-bl mr-8`}> + <slot /> + </div> +</section>
\ No newline at end of file diff --git a/src/components/RightNavigationComponentLink.astro b/src/components/RightNavigationComponentLink.astro new file mode 100644 index 0000000..cda2cb7 --- /dev/null +++ b/src/components/RightNavigationComponentLink.astro @@ -0,0 +1,7 @@ +--- +const { href } = Astro.props; +--- +<div class="text-pagodagreen group hover:text-pagodapurple-shine bg-black p-1 flex flex-row gap-2 justify-start transition-all ease-in-out hover:gap-4 duration-300 font-semibold first:rounded-tl-xl"> + <span class="text-black group-hover:text-pagodapurple-shine">▎</span> + <a href={href}><slot /></a> +</div> diff --git a/src/components/RightSidebarComponent.astro b/src/components/RightSidebarComponent.astro new file mode 100644 index 0000000..1a19686 --- /dev/null +++ b/src/components/RightSidebarComponent.astro @@ -0,0 +1,19 @@ +--- +import SearchComponent from './SearchComponent.astro'; +import RightNavigationComponent from './RightNavigationComponent.astro'; +import RightNavigationComponentLink from './RightNavigationComponentLink.astro'; +--- + +<aside class="w-1/6"> + <img src="/images/internal/search.webp" alt="Search Image" class="h-32 mt-4 relative ml-20 pointer-events-none select-none" /> + <SearchComponent /> + <RightNavigationComponent title="Pagoda Services"> + <RightNavigationComponentLink href="/services/ad">Advertisement</RightNavigationComponentLink> + <RightNavigationComponentLink href="/services/blogs">Blogs</RightNavigationComponentLink> + <RightNavigationComponentLink href="/services/comments">Comments</RightNavigationComponentLink> + <RightNavigationComponentLink href="/services/counter">Counter</RightNavigationComponentLink> + <RightNavigationComponentLink href="/services/guestbook">Guestbook</RightNavigationComponentLink> + <RightNavigationComponentLink href="/services/journals">Journals</RightNavigationComponentLink> + <RightNavigationComponentLink href="/services/webring">Webring</RightNavigationComponentLink> + </RightNavigationComponent> +</aside>
\ No newline at end of file diff --git a/src/components/SearchComponent.astro b/src/components/SearchComponent.astro new file mode 100644 index 0000000..9a269d8 --- /dev/null +++ b/src/components/SearchComponent.astro @@ -0,0 +1,31 @@ +<div class="saira uppercase mb-4 relative bottom-1"> + <div class="text-xl flex flex-row gap-2 justify-center items-center"> + <div class="flex-grow h-6 bg-pagodapurple rounded-tl-2xl"></div> + <div>Site Search</div> + </div> + <div class="bg-pagodapurple rounded-br-2xl relative bottom-1 pl-2 pr-1 pt-1 pb-1"> + <form action="/search" method="GET" class="flex flex-col gap-1"> + <div class="flex flex-row gap-2 items-center"> + <label for="search" class="text-white w-1/4">Query:</label> + <input type="text" id="search" name="q" class="w-3/4 bg-black text-white border-2 border-pagodapurple rounded-lg px-2 py-1 focus:outline-none focus:border-pagodapink" placeholder="Search..." required /> + </div> + <div class="flex flex-row gap-2 items-center"> + <label for="category" class="text-white w-1/4">In:</label> + <select id="category" name="category" class="w-3/4 bg-black text-white border-2 border-pagodapurple rounded-lg px-2 py-1 focus:outline-none focus:border-pagodapink"> + <option value="all">All</option> + <option value="avatars">Avatars</option> + <option value="backgrounds">Tiled Backgrounds</option> + <option value="blinkies">Blinkies</option> + <option value="districts">Districts</option> + <option value="flags">Flags</option> + <option value="guides">Guides</option> + <option value="stamps">Stamps</option> + <option value="thoughts">Thoughts</option> + </select> + </div> + <div class="flex flex-row items-center"> + <button type="submit" class="bg-pagodapink text-white rounded-lg px-4 py-1 hover:bg-pagodagreen font-bold hover:text-black transition duration-300 cursor-pointer">Search</button> + </div> + </form> + </div> +</div>
\ No newline at end of file |