-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Dec 15 * Update announcement-banner.tsx * Update announcement-banner.tsx * Update announcement-banner.tsx * Update announcement-banner.tsx * Update announcement-banner.tsx * Update announcement-banner.tsx --------- Co-authored-by: Sheepy3 <[email protected]>
- Loading branch information
1 parent
7652e60
commit 60c9d11
Showing
6 changed files
with
203 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,100 @@ | ||
| import { IoAdd, IoLogoGithub, IoOpenOutline } from 'react-icons/io5' | ||
| import Button from './design-system/button' | ||
| import styles from './navbar.module.css' | ||
| import { SessionInfo } from '../lib/game-saving/account' | ||
| import { isDark } from '../lib/state' | ||
|
|
||
| import { IoAdd, IoLogoGithub, IoOpenOutline } from "react-icons/io5"; | ||
| import Button from "./design-system/button"; | ||
| import styles from "./navbar.module.css"; | ||
| import { SessionInfo } from "../lib/game-saving/account"; | ||
| import { isDark } from "../lib/state"; | ||
| import AnnouncementBanner from "./popups-etc/announcement-banner"; | ||
| interface MainNavbarProps { | ||
| session: SessionInfo | null | ||
| transparent?: boolean | ||
| goldLogo?: boolean | ||
| session: SessionInfo | null; | ||
| transparent?: boolean; | ||
| goldLogo?: boolean; | ||
| } | ||
|
|
||
| export default function MainNavbar(props: MainNavbarProps) { | ||
| return ( | ||
| <nav class={`${styles.container} ${props.transparent ? styles.transparent : ''}`}> | ||
| <nav | ||
| class={`${styles.container} ${ | ||
| props.transparent ? styles.transparent : "" | ||
| }`} | ||
| > | ||
| <div class={styles.mobile}> | ||
| <AnnouncementBanner /> | ||
| </div> | ||
| <ul class={styles.navlinks}> | ||
| <li class={styles.logo}> | ||
| <a href='/'> | ||
| <img class={styles.longImg} src={`/spriglogotext-${props.goldLogo ? 'gold' : 'white'}.png`} height={30} width={87} alt='Sprig Logo' /> | ||
| <a href="/"> | ||
| <img | ||
| class={styles.longImg} | ||
| src={`/spriglogotext-${ | ||
| props.goldLogo ? "gold" : "white" | ||
| }.png`} | ||
| height={30} | ||
| width={87} | ||
| alt="Sprig Logo" | ||
| /> | ||
| </a> | ||
| </li> | ||
| {props.session?.session.full ? ( | ||
| <li> | ||
| <a href='/~'>Your Games</a> | ||
| <a href="/~">Your Games</a> | ||
| </li> | ||
| ) : null} | ||
| <li><a href='/gallery'>Gallery</a></li> | ||
| <li><a href='/get'>Get a Sprig</a></li> | ||
| <li> | ||
| <a href="/gallery">Gallery</a> | ||
| </li> | ||
| <li> | ||
| <a href="/get">Get a Sprig</a> | ||
| </li> | ||
| </ul> | ||
| <div class={styles.desktop}> | ||
| <AnnouncementBanner /> | ||
| </div> | ||
| <ul class={styles.rightActions}> | ||
| {props.session?.session.full ? (<> | ||
| <li class={styles.actionIcon}> | ||
| <a href='https://github.com/hackclub/sprig/' target='_blank'> | ||
| <IoLogoGithub /> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href='/~/new'><Button icon={IoAdd}>New Game</Button></a> | ||
| </li> | ||
| </>) : (<> | ||
| <li class={styles.plainLink}> | ||
| <a href='https://github.com/hackclub/sprig/' target='_blank'> | ||
| GitHub{' '} | ||
| <span style={{ verticalAlign: 'middle', lineHeight: 1 }}> | ||
| <IoOpenOutline /> | ||
| </span> | ||
| </a> | ||
| </li> | ||
| <li class={styles.plainLink}> | ||
| <a href='/login'>Log In</a> | ||
| </li> | ||
| <li> | ||
| <a href='/editor'><Button>Open Editor</Button></a> | ||
| </li> | ||
| </>)} | ||
| {props.session?.session.full ? ( | ||
| <> | ||
| <li class={styles.actionIcon}> | ||
| <a | ||
| href="https://github.com/hackclub/sprig/" | ||
| target="_blank" | ||
| > | ||
| <IoLogoGithub /> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="/~/new"> | ||
| <Button icon={IoAdd}>New Game</Button> | ||
| </a> | ||
| </li> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <li class={styles.plainLink}> | ||
| <a | ||
| href="https://github.com/hackclub/sprig/" | ||
| target="_blank" | ||
| > | ||
| GitHub{" "} | ||
| <span | ||
| style={{ | ||
| verticalAlign: "middle", | ||
| lineHeight: 1, | ||
| }} | ||
| > | ||
| <IoOpenOutline /> | ||
| </span> | ||
| </a> | ||
| </li> | ||
| <li class={styles.plainLink}> | ||
| <a href="/login">Log In</a> | ||
| </li> | ||
| <li> | ||
| <a href="/editor"> | ||
| <Button>Open Editor</Button> | ||
| </a> | ||
| </li> | ||
| </> | ||
| )} | ||
| </ul> | ||
| </nav> | ||
| ) | ||
| } | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| .banner { | ||
| color: white; | ||
| cursor: pointer; | ||
| margin-top: 14px; | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .banner > a { | ||
| color: inherit; | ||
| align-items: center; | ||
| display: flex; | ||
| gap: 14px; | ||
| background-color: rgba(255, 255, 255, 0.2); | ||
| border-radius: 1rem; | ||
| width: fit-content; | ||
| padding: 0 1rem; | ||
| transition: all 0.1s; | ||
| max-width: 400px; | ||
| } | ||
|
|
||
| .banner:hover { | ||
| transform: scale(101%); | ||
| } | ||
|
|
||
| .banner > a:hover { | ||
| color: inherit; | ||
| } | ||
|
|
||
| .icon { | ||
| font-size: 5rem; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import styles from "./announcement-banner.module.css"; | ||
|
|
||
| export default function AnnouncementBanner() { | ||
| return ( | ||
| <div class={styles.banner}> | ||
| <a href="/drop"> | ||
| <img src="https://cloud-1h9ytxva8-hack-club-bot.vercel.app/0whitesnoman.png" alt="Lil Snoman" width="64" height="75" /> | ||
| <p> | ||
| SHAWN X SPRIG winter case drops dec-15! click here to learn | ||
| more about how you can get one! | ||
| </p> | ||
| </a> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60c9d11There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
sprig – ./
gamelab.hackclub.com
sprig-git-main.hackclub.dev
sprig.hackclub.com
sprig-beta.hackclub.dev