kopia lustrzana https://github.com/badgen/badgen.net
89 wiersze
2.3 KiB
TypeScript
89 wiersze
2.3 KiB
TypeScript
import Head from 'next/head'
|
|
import Image from 'next/image'
|
|
import { Inter, Merriweather } from '@next/font/google'
|
|
import styles from '../styles/Home.module.css'
|
|
|
|
const inter = Inter({ subsets: ['latin'] })
|
|
const merriweather = Inter({ subsets: ['latin'] })
|
|
|
|
// export default function Home() {
|
|
// return (
|
|
// <>
|
|
// <Head>
|
|
// <title>Create Next App</title>
|
|
// <meta name="description" content="Generated by create next app" />
|
|
// <meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
// <link rel="icon" href="/favicon.ico" />
|
|
// </Head>
|
|
// <main className={styles.main}>
|
|
// asdf
|
|
// </main>
|
|
// </>
|
|
// )
|
|
// }
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import BadgenTitle from '../components/badgen-title'
|
|
import Intro from '../components/home-intro'
|
|
import Footer from '../components/footer'
|
|
import examples from '../public/.meta/badges.json'
|
|
|
|
export default function Index () {
|
|
const [tab, setTab] = useState('live')
|
|
const [host, setHost] = useState('')
|
|
const badges = examples[tab]
|
|
|
|
useEffect(() => {
|
|
const forceHost = new URL(window.location.href).searchParams.get('host')
|
|
setHost((forceHost || window.location.origin) + '/')
|
|
})
|
|
|
|
return <>
|
|
<Head>
|
|
<title>Badgen: fast badge generating service</title>
|
|
<meta name="description" content="fast badge generating service" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<BadgenTitle host={host} />
|
|
<div className='body-wrapper'>
|
|
<Intro />
|
|
</div>
|
|
<Footer />
|
|
<style jsx>{`
|
|
.docs {
|
|
margin: 0 auto;
|
|
padding-bottom: 6em;
|
|
}
|
|
p {
|
|
text-align: center
|
|
}
|
|
|
|
.tab-row {
|
|
text-align: center;
|
|
}
|
|
.tab {
|
|
display: inline-block;
|
|
border: 1px solid #333;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.tab a {
|
|
display: inline-block;
|
|
padding: 0 8px;
|
|
color: #333;
|
|
font: 14px/26px sans-serif;
|
|
text-transform: uppercase;
|
|
}
|
|
.tab a:hover {
|
|
cursor: pointer;
|
|
}
|
|
.live a.live,
|
|
.static a.static {
|
|
color: #EEE;
|
|
background-color: #333;
|
|
}
|
|
`}
|
|
</style>
|
|
</> // eslint-disable-line
|
|
}
|