| pineafan | e0283a8 | 2022-02-13 10:05:56 +0000 | [diff] [blame] | 1 | import { Component, useRef } from "react"; |
| 2 | import Styles from '../styles/Components/header.module.css'; |
| pineafan | 876af7d | 2021-10-14 20:31:21 +0100 | [diff] [blame] | 3 | import Head from 'next/head'; |
| pineafan | a5ce910 | 2021-09-02 17:21:31 +0100 | [diff] [blame] | 4 | |
| 5 | class Header extends Component { |
| pineafan | 9b1b68c | 2021-11-05 17:47:27 +0000 | [diff] [blame] | 6 | constructor(props) { |
| 7 | super(props); |
| Samuel Shuert | 604e31d | 2021-09-02 16:06:20 -0500 | [diff] [blame] | 8 | this.keys = [] |
| pineafan | 9b1b68c | 2021-11-05 17:47:27 +0000 | [diff] [blame] | 9 | } |
| pineafan | a5ce910 | 2021-09-02 17:21:31 +0100 | [diff] [blame] | 10 | |
| pineafan | 9b1b68c | 2021-11-05 17:47:27 +0000 | [diff] [blame] | 11 | render() { |
| 12 | return ( |
| pineafan | a5ce910 | 2021-09-02 17:21:31 +0100 | [diff] [blame] | 13 | <div className={Styles.header} style={{ |
| pineafan | eebe3c6 | 2022-02-11 19:46:21 +0000 | [diff] [blame] | 14 | margin: "0", |
| pineafan | e0283a8 | 2022-02-13 10:05:56 +0000 | [diff] [blame] | 15 | minHeight: this.props.fullscreen ? "100vh" : "calc(100vh - (2 * max(2em, 4vw)) - 1em)", |
| pineafan | a5ce910 | 2021-09-02 17:21:31 +0100 | [diff] [blame] | 16 | }} id={this.props.id ? this.props.id : null}> |
| pineafan | a841c76 | 2021-11-14 21:21:04 +0000 | [diff] [blame] | 17 | <div className={Styles.backgroundGradient} style={{ |
| 18 | backgroundImage: `linear-gradient(69.44deg, #${this.props.gradient[0]} 0%, #${this.props.gradient[1]} 100%)`, |
| 19 | }} /> |
| pineafan | 876af7d | 2021-10-14 20:31:21 +0100 | [diff] [blame] | 20 | <Head> |
| pineafan | 4f9cf4d | 2021-10-24 09:02:30 +0100 | [diff] [blame] | 21 | <title>{this.props.nameOverwrite ? this.props.nameOverwrite : this.props.name} - Clicks Minute Per</title> |
| pineafan | 40a7e4b | 2021-10-16 21:26:03 +0100 | [diff] [blame] | 22 | <meta name="title" content={this.props.name} /> |
| 23 | <meta name="og:title" content={this.props.name} /> |
| pineafan | 876af7d | 2021-10-14 20:31:21 +0100 | [diff] [blame] | 24 | <meta name="description" content={this.props.subtext} /> |
| 25 | <meta name="og:description" content={this.props.subtext} /> |
| pineafan | 40a7e4b | 2021-10-16 21:26:03 +0100 | [diff] [blame] | 26 | <meta name="theme-color" content={"#" + this.props.gradient[1]} /> |
| 27 | <meta name="og:theme-color" content={"#" + this.props.gradient[1]} /> |
| 28 | <meta name="author" content="Clicks Minute Per" /> |
| 29 | <meta name="og:author" content="Clicks Minute Per" /> |
| pineafan | 876af7d | 2021-10-14 20:31:21 +0100 | [diff] [blame] | 30 | </Head> |
| pineafan | a841c76 | 2021-11-14 21:21:04 +0000 | [diff] [blame] | 31 | <img draggable={false} alt="" className={Styles.backgroundImage} src={`https://assets.clicksminuteper.net/${this.props.wave}.svg`} /> |
| pineafan | a5ce910 | 2021-09-02 17:21:31 +0100 | [diff] [blame] | 32 | <div className={Styles.panel}> |
| 33 | <div className={Styles.titleContainer}> |
| 34 | <h1 className={Styles.title}>{this.props.name}</h1> |
| 35 | </div> |
| 36 | <p className={Styles.subtext + " " + (this.props.buttons.length ? Styles.subtextExtra : null)}>{this.props.subtext}</p> |
| 37 | <div className={Styles.buttonLayout}> |
| 38 | { |
| Samuel Shuert | 604e31d | 2021-09-02 16:06:20 -0500 | [diff] [blame] | 39 | this.props.buttons ? this.props.buttons.map((button, index) => { |
| pineafan | a5ce910 | 2021-09-02 17:21:31 +0100 | [diff] [blame] | 40 | return <a |
| Samuel Shuert | 604e31d | 2021-09-02 16:06:20 -0500 | [diff] [blame] | 41 | key={index} |
| pineafan | a5ce910 | 2021-09-02 17:21:31 +0100 | [diff] [blame] | 42 | className={Styles.button} |
| pineafan | 9b1b68c | 2021-11-05 17:47:27 +0000 | [diff] [blame] | 43 | style={{ backgroundColor: `#${button.color}`, color: `#${button.buttonText}` }} |
| Samuel Shuert | 835c71f | 2021-09-03 15:49:26 -0500 | [diff] [blame] | 44 | href={button.link} |
| pineafan | 1de9876 | 2022-02-13 13:35:30 +0000 | [diff] [blame^] | 45 | onClick={() => { if (button.id) { this.props.callback(this.props.that, button.id) } }} |
| pineafan | aed3024 | 2021-09-04 09:33:40 +0100 | [diff] [blame] | 46 | target={button.target ? "_blank" : null} |
| pineafan | 0a17873 | 2022-02-09 21:00:05 +0000 | [diff] [blame] | 47 | rel="noreferrer"> |
| pineafan | 9b1b68c | 2021-11-05 17:47:27 +0000 | [diff] [blame] | 48 | {button.text} |
| pineafan | a5ce910 | 2021-09-02 17:21:31 +0100 | [diff] [blame] | 49 | </a> |
| 50 | }) : null |
| 51 | } |
| 52 | </div> |
| 53 | </div> |
| pineafan | 7872745 | 2021-11-04 21:25:07 +0000 | [diff] [blame] | 54 | <span className={Styles.arrowSpan + " " + (this.props.hideArrow ? Styles.arrowHidden : null)} draggable={false}> |
| pineafan | a841c76 | 2021-11-14 21:21:04 +0000 | [diff] [blame] | 55 | <a href="#start" draggable={false}><img alt="Down arrow" src="https://assets.clicksminuteper.net/web/icons/arrow.svg" className={Styles.arrow} draggable={false} style={{ |
| pineafan | 31d5d60 | 2021-11-13 21:10:30 +0000 | [diff] [blame] | 56 | height: "49px", width: "87px" |
| 57 | }}/></a> |
| pineafan | a5ce910 | 2021-09-02 17:21:31 +0100 | [diff] [blame] | 58 | </span> |
| 59 | </div> |
| pineafan | 9b1b68c | 2021-11-05 17:47:27 +0000 | [diff] [blame] | 60 | ) |
| 61 | } |
| pineafan | a5ce910 | 2021-09-02 17:21:31 +0100 | [diff] [blame] | 62 | } |
| 63 | |
| 64 | export default Header; |