✍️ Adds intro text, and makes show hide functionality

This commit is contained in:
Alicia Sykes 2021-07-28 00:53:24 +01:00
parent 6036503e15
commit abe4b7e60c
1 changed files with 17 additions and 3 deletions

View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react'
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from '../styles/Header.module.scss';
@ -11,16 +11,30 @@ import IconBannerDocs from '../../static/icons/banner_docs.svg';
export default function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
const [showMore, setShowMore] = useState(false);
return (
<header className={styles.heroBanner}>
<h1 className={styles.heroTitle}>{siteConfig.title}</h1>
<h3 className={styles.heroSubTitle}>{siteConfig.tagline}</h3>
<div className={styles.buttons}>
<Button to="/docs" color="pink"><IconBannerDemo />Try it Out</Button>
<Button to="/docs" color="blue"><IconBannerGetStarted />Get Started</Button>
<Button to="/docs" color="pink"><IconBannerGetStarted />Get Started</Button>
<Button to="/docs" color="blue"><IconBannerDemo />Try it Out</Button>
<Button to="/docs" color="green"><IconBannerSource />Source Code</Button>
<Button to="/docs" color="yellow"><IconBannerDocs />Documentation</Button>
</div>
<div className={styles.dashyDescription}>
Dashy is an easy-to-deploy, highly-customizable self-hosted dashboard.
It helps you keep your apps and services organized in a single place,
and makes launching your apps super quick, with customizable keyboard
shortcuts and instant search.
<span className={styles.keepReading} onClick={() => setShowMore(!showMore)}>
{!showMore ? 'Keep Reading...' : 'Show Less'}
</span>
{showMore && (
<p className={styles.dashyDescription}>See me now</p>
)
}
</div>
</header>
);
}