[Pages][m]: Add stub pages for learn, doc and gallery
This commit is contained in:
Rising Odegua
parent
c4375a6d70
commit
9ad383420d
@ -0,0 +1,16 @@
|
||||
import styles from '../../styles/Home.module.css'
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className={styles.footer}>
|
||||
<a
|
||||
href="https://www.datopian.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Built by{' '}
|
||||
<img src="/datopian-logo.png" alt="Datopian Logo" className={styles.logo} />
|
||||
</a>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@ -1,112 +1,48 @@
|
||||
import { useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
import styles from '../styles/Home.module.css'
|
||||
|
||||
export default function Home() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleClick = (event) => {
|
||||
event.preventDefault();
|
||||
setOpen(!open);
|
||||
};
|
||||
export default function Nav() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleClick = (event) => {
|
||||
event.preventDefault();
|
||||
setOpen(!open);
|
||||
};
|
||||
|
||||
const navMenu = [{ title: 'Home', path: '/' },
|
||||
{ title: 'Gallery', path: '/gallery' },
|
||||
{ title: 'Docs', path: '/docs' },
|
||||
{ title: 'Learn', path: '/learn' },
|
||||
{ title: 'Github', path: 'https://github.com/datopian/portal.js' }]
|
||||
const navMenu = [{ title: 'Home', path: '/' },
|
||||
{ title: 'Gallery', path: '/gallery' },
|
||||
{ title: 'Docs', path: '/docs' },
|
||||
{ title: 'Learn', path: '/learn' },
|
||||
{ title: 'Github', path: 'https://github.com/datopian/portal.js' }]
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200">
|
||||
<div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
|
||||
<img src="/logo.svg" alt="portal logo" width="110" />
|
||||
</div>
|
||||
<div className="block lg:hidden mx-4">
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className="flex items-center px-3 py-2 border rounded text-gray-700 border-orange-400 hover:text-black hover:border-black"
|
||||
>
|
||||
<svg
|
||||
className="fill-current h-3 w-3"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Menu</title>
|
||||
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className={`${open ? `block` : `hidden`} lg:block`}>
|
||||
{navMenu.map((menu, index) => {
|
||||
return (<Link href={menu.path} key={index}>
|
||||
<a className="block mt-4 lg:inline-block lg:mt-0 active:bg-primary-background text-gray-700 hover:text-black mr-6">
|
||||
{menu.title}
|
||||
</a>
|
||||
</Link>)
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className={styles.container}>
|
||||
<Head>
|
||||
<title>Create Portal App</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
|
||||
<main className={styles.main}>
|
||||
|
||||
<h1 className={styles.title}>
|
||||
Welcome to <a href="https://github.com/datopian/portal.js">Portal.js!</a>
|
||||
</h1>
|
||||
|
||||
<p className={styles.description}>
|
||||
Rapidly build rich data portals using a modern frontend framework!
|
||||
</p>
|
||||
|
||||
<div className={styles.grid}>
|
||||
<a href="/docs" className={styles.card}>
|
||||
<h3>Documentation →</h3>
|
||||
<p>Find in-depth information about Portal.js features and API.</p>
|
||||
</a>
|
||||
|
||||
<a href="/learn" className={styles.card}>
|
||||
<h3>Learn →</h3>
|
||||
<p>Learn about Portal.js with examples!</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/gallery"
|
||||
className={styles.card}
|
||||
>
|
||||
<h3>Gallery →</h3>
|
||||
<p>Discover examples of Portal.js projects.</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/datopian/portal.js"
|
||||
className={styles.card}
|
||||
>
|
||||
<h3>Contribute →</h3>
|
||||
<p>
|
||||
Checkout the Portal.js repository on github
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className={styles.footer}>
|
||||
<a
|
||||
href="https://www.datopian.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Built by{' '}
|
||||
<img src="/datopian-logo.png" alt="Datopian Logo" className={styles.logo} />
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<nav className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200">
|
||||
<div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
|
||||
<img src="/logo.svg" alt="portal logo" width="110" />
|
||||
</div>
|
||||
<div className="block lg:hidden mx-4">
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className="flex items-center px-3 py-2 border rounded text-gray-700 border-orange-400 hover:text-black hover:border-black"
|
||||
>
|
||||
<svg
|
||||
className="fill-current h-3 w-3"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Menu</title>
|
||||
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className={`${open ? `block` : `hidden`} lg:block`}>
|
||||
{navMenu.map((menu, index) => {
|
||||
return (<Link href={menu.path} key={index}>
|
||||
<a className="block mt-4 lg:inline-block lg:mt-0 active:bg-primary-background text-gray-700 hover:text-black mr-6">
|
||||
{menu.title}
|
||||
</a>
|
||||
</Link>)
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
import Head from 'next/head'
|
||||
import Nav from '../components/Nav'
|
||||
import Footer from '../components/Footer'
|
||||
import styles from '../styles/Home.module.css'
|
||||
|
||||
export default function Docs() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Portal.js Api Documentation</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<Nav />
|
||||
<div className={styles.container}>
|
||||
<main className={styles.main}>
|
||||
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import Head from 'next/head'
|
||||
import Nav from '../components/Nav'
|
||||
import Footer from '../components/Footer'
|
||||
import styles from '../styles/Home.module.css'
|
||||
|
||||
export default function Gallery() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Portal.js Gallery</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<Nav />
|
||||
<div className={styles.container}>
|
||||
<main className={styles.main}>
|
||||
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,59 +1,18 @@
|
||||
import { useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
import Nav from '../components/Nav'
|
||||
import Footer from '../components/Footer'
|
||||
import styles from '../styles/Home.module.css'
|
||||
|
||||
export default function Home() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleClick = (event) => {
|
||||
event.preventDefault();
|
||||
setOpen(!open);
|
||||
};
|
||||
|
||||
const navMenu = [{ title: 'Home', path: '/' },
|
||||
{ title: 'Gallery', path: '/gallery' },
|
||||
{ title: 'Docs', path: '/docs' },
|
||||
{ title: 'Learn', path: '/learn' },
|
||||
{ title: 'Github', path: 'https://github.com/datopian/portal.js' }]
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200">
|
||||
<div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
|
||||
<img src="/logo.svg" alt="portal logo" width="110" />
|
||||
</div>
|
||||
<div className="block lg:hidden mx-4">
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className="flex items-center px-3 py-2 border rounded text-gray-700 border-orange-400 hover:text-black hover:border-black"
|
||||
>
|
||||
<svg
|
||||
className="fill-current h-3 w-3"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Menu</title>
|
||||
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className={`${open ? `block` : `hidden`} lg:block`}>
|
||||
{navMenu.map((menu, index) => {
|
||||
return (<Link href={menu.path} key={index}>
|
||||
<a className="block mt-4 lg:inline-block lg:mt-0 active:bg-primary-background text-gray-700 hover:text-black mr-6">
|
||||
{menu.title}
|
||||
</a>
|
||||
</Link>)
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<Head>
|
||||
<title>Create Portal App</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<Nav />
|
||||
<div className={styles.container}>
|
||||
<Head>
|
||||
<title>Create Portal App</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
|
||||
<main className={styles.main}>
|
||||
|
||||
@ -95,17 +54,7 @@ export default function Home() {
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className={styles.footer}>
|
||||
<a
|
||||
href="https://www.datopian.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Built by{' '}
|
||||
<img src="/datopian-logo.png" alt="Datopian Logo" className={styles.logo} />
|
||||
</a>
|
||||
</footer>
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
import Head from 'next/head'
|
||||
import Nav from '../components/Nav'
|
||||
import Footer from '../components/Footer'
|
||||
import styles from '../styles/Home.module.css'
|
||||
|
||||
export default function Learn() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Portal.js Learn by Examples</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<Nav />
|
||||
<div className={styles.container}>
|
||||
<main className={styles.main}>
|
||||
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user