Update Examples for Fast Refresh (#13068)
This commit is contained in:
Joe Haddad
GitHub
parent
86160a5190
commit
dbad9db68c
254 changed files with 2338 additions and 1888 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"root": true,
|
||||
"parser": "babel-eslint",
|
||||
"plugins": ["react", "react-hooks", "jest"],
|
||||
"plugins": ["react", "react-hooks", "jest", "import"],
|
||||
"env": {
|
||||
"browser": true,
|
||||
"commonjs": true,
|
||||
|
|
@ -91,6 +91,26 @@
|
|||
"packages/create-next-app/templates/**/*"
|
||||
],
|
||||
"rules": { "react/react-in-jsx-scope": "off" }
|
||||
},
|
||||
{
|
||||
"files": ["examples/**/*"],
|
||||
"rules": {
|
||||
"import/no-anonymous-default-export": [
|
||||
"error",
|
||||
{
|
||||
// React components:
|
||||
"allowArrowFunction": false,
|
||||
"allowAnonymousClass": false,
|
||||
"allowAnonymousFunction": false,
|
||||
|
||||
// Non-React stuff:
|
||||
"allowArray": true,
|
||||
"allowCallExpression": true,
|
||||
"allowLiteral": true,
|
||||
"allowObject": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"rules": {
|
||||
|
|
|
|||
|
|
@ -2,122 +2,124 @@ import Head from 'next/head'
|
|||
|
||||
export const config = { amp: true }
|
||||
|
||||
export default () => (
|
||||
<>
|
||||
<Head>
|
||||
<title>Example AMP Story in Next.js</title>
|
||||
<script
|
||||
async
|
||||
key="amp-story"
|
||||
custom-element="amp-story"
|
||||
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
|
||||
/>
|
||||
<script
|
||||
async
|
||||
key="amp-video"
|
||||
custom-element="amp-video"
|
||||
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
|
||||
/>
|
||||
</Head>
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Example AMP Story in Next.js</title>
|
||||
<script
|
||||
async
|
||||
key="amp-story"
|
||||
custom-element="amp-story"
|
||||
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
|
||||
/>
|
||||
<script
|
||||
async
|
||||
key="amp-video"
|
||||
custom-element="amp-video"
|
||||
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
|
||||
/>
|
||||
</Head>
|
||||
|
||||
<amp-story
|
||||
standalone=""
|
||||
title="Stories in AMP - Hello World"
|
||||
publisher="AMP Project"
|
||||
publisher-logo-src="https://amp.dev/favicons/coast-228x228.png"
|
||||
poster-portrait-src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
|
||||
poster-square-src="https://amp.dev/static/samples/img/story_dog2_square.jpg"
|
||||
poster-landscape-src="https://amp.dev/static/samples/img/story_dog2_landscape.jpg"
|
||||
>
|
||||
{/* <!-- A story consists of one or more pages. Each page is declared by an `amp-story-page` element. Pages are designed by layering videos, images and text. Here we have a page that uses two layers. One layer filling the available space with an image and one text layer that shows a heading. --> */}
|
||||
<amp-story-page id="page-1">
|
||||
<amp-story-grid-layer template="fill">
|
||||
<amp-img
|
||||
src="https://amp.dev/static/samples/img/story_dog2.jpg"
|
||||
width="720"
|
||||
height="1280"
|
||||
layout="responsive"
|
||||
/>
|
||||
</amp-story-grid-layer>
|
||||
<amp-story-grid-layer template="vertical">
|
||||
<h1>Hello World</h1>
|
||||
<p>This is an AMP Story.</p>
|
||||
</amp-story-grid-layer>
|
||||
</amp-story-page>
|
||||
|
||||
{/* <!-- Here we have a page consisting of a video which autoplays and loops. --> */}
|
||||
<amp-story-page id="page-2">
|
||||
<amp-story-grid-layer template="fill">
|
||||
<amp-video
|
||||
autoplay=""
|
||||
loop=""
|
||||
width="720"
|
||||
height="960"
|
||||
poster="https://amp.dev/static/samples/img/story_video_dog_cover.jpg"
|
||||
layout="responsive"
|
||||
>
|
||||
<source
|
||||
src="https://amp.dev/static/samples/video/story_video_dog.mp4"
|
||||
type="video/mp4"
|
||||
<amp-story
|
||||
standalone=""
|
||||
title="Stories in AMP - Hello World"
|
||||
publisher="AMP Project"
|
||||
publisher-logo-src="https://amp.dev/favicons/coast-228x228.png"
|
||||
poster-portrait-src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
|
||||
poster-square-src="https://amp.dev/static/samples/img/story_dog2_square.jpg"
|
||||
poster-landscape-src="https://amp.dev/static/samples/img/story_dog2_landscape.jpg"
|
||||
>
|
||||
{/* <!-- A story consists of one or more pages. Each page is declared by an `amp-story-page` element. Pages are designed by layering videos, images and text. Here we have a page that uses two layers. One layer filling the available space with an image and one text layer that shows a heading. --> */}
|
||||
<amp-story-page id="page-1">
|
||||
<amp-story-grid-layer template="fill">
|
||||
<amp-img
|
||||
src="https://amp.dev/static/samples/img/story_dog2.jpg"
|
||||
width="720"
|
||||
height="1280"
|
||||
layout="responsive"
|
||||
/>
|
||||
</amp-video>
|
||||
</amp-story-grid-layer>
|
||||
</amp-story-page>
|
||||
</amp-story-grid-layer>
|
||||
<amp-story-grid-layer template="vertical">
|
||||
<h1>Hello World</h1>
|
||||
<p>This is an AMP Story.</p>
|
||||
</amp-story-grid-layer>
|
||||
</amp-story-page>
|
||||
|
||||
{/* <!-- Pre-defined entry animations make it possible to create dynamic pages without videos. The length and initial delay can be customized using the `animate-in-duration` and `animate-in-delay` properties. The [animations sample](/documentation/examples/visual-effects/amp_story_animations/) shows all available animantions in action. --> */}
|
||||
<amp-story-page id="animation-demo">
|
||||
<amp-story-grid-layer template="fill">
|
||||
<amp-img
|
||||
src="https://amp.dev/static/samples/img/story_dog4.jpg"
|
||||
animate-in="fly-in-top"
|
||||
width="720"
|
||||
height="1280"
|
||||
layout="responsive"
|
||||
/>
|
||||
</amp-story-grid-layer>
|
||||
<amp-story-grid-layer template="thirds">
|
||||
<h2
|
||||
animate-in="fly-in-bottom"
|
||||
grid-area="lower-third"
|
||||
animate-in-delay="0.4s"
|
||||
>
|
||||
Best walk ever!
|
||||
</h2>
|
||||
</amp-story-grid-layer>
|
||||
</amp-story-page>
|
||||
{/* <!-- Here we have a page consisting of a video which autoplays and loops. --> */}
|
||||
<amp-story-page id="page-2">
|
||||
<amp-story-grid-layer template="fill">
|
||||
<amp-video
|
||||
autoplay=""
|
||||
loop=""
|
||||
width="720"
|
||||
height="960"
|
||||
poster="https://amp.dev/static/samples/img/story_video_dog_cover.jpg"
|
||||
layout="responsive"
|
||||
>
|
||||
<source
|
||||
src="https://amp.dev/static/samples/video/story_video_dog.mp4"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</amp-video>
|
||||
</amp-story-grid-layer>
|
||||
</amp-story-page>
|
||||
|
||||
{/* <!-- Stories can use predefined layouts to style the page. Here we're using the `thirds` template. For an overview about the available layouts take a look at the [layouts sample](/documentation/examples/style-layout/amp_story_layouts/). --> */}
|
||||
<amp-story-page id="layout-demo">
|
||||
<amp-story-grid-layer template="thirds">
|
||||
<amp-img
|
||||
grid-area="upper-third"
|
||||
src="https://amp.dev/static/samples/img/story_thirds_1.jpg"
|
||||
width="560"
|
||||
height="420"
|
||||
layout="responsive"
|
||||
/>
|
||||
<amp-img
|
||||
grid-area="middle-third"
|
||||
src="https://amp.dev/static/samples/img/story_thirds_2.jpg"
|
||||
width="560"
|
||||
height="420"
|
||||
layout="responsive"
|
||||
/>
|
||||
<amp-img
|
||||
grid-area="lower-third"
|
||||
src="https://amp.dev/static/samples/img/story_thirds_3.jpg"
|
||||
width="560"
|
||||
height="420"
|
||||
layout="responsive"
|
||||
/>
|
||||
</amp-story-grid-layer>
|
||||
</amp-story-page>
|
||||
{/* <!-- Pre-defined entry animations make it possible to create dynamic pages without videos. The length and initial delay can be customized using the `animate-in-duration` and `animate-in-delay` properties. The [animations sample](/documentation/examples/visual-effects/amp_story_animations/) shows all available animantions in action. --> */}
|
||||
<amp-story-page id="animation-demo">
|
||||
<amp-story-grid-layer template="fill">
|
||||
<amp-img
|
||||
src="https://amp.dev/static/samples/img/story_dog4.jpg"
|
||||
animate-in="fly-in-top"
|
||||
width="720"
|
||||
height="1280"
|
||||
layout="responsive"
|
||||
/>
|
||||
</amp-story-grid-layer>
|
||||
<amp-story-grid-layer template="thirds">
|
||||
<h2
|
||||
animate-in="fly-in-bottom"
|
||||
grid-area="lower-third"
|
||||
animate-in-delay="0.4s"
|
||||
>
|
||||
Best walk ever!
|
||||
</h2>
|
||||
</amp-story-grid-layer>
|
||||
</amp-story-page>
|
||||
|
||||
{/* <!-- A "bookend" panel containing links to other resources will appear on the last page of your story if you include an `amp-story-bookend` that references a [bookend JSON config](/static/samples/json/bookend.json). --> */}
|
||||
<amp-story-bookend
|
||||
src="https://amp.dev/static/samples/json/bookend.json"
|
||||
layout="nodisplay"
|
||||
/>
|
||||
</amp-story>
|
||||
</>
|
||||
)
|
||||
{/* <!-- Stories can use predefined layouts to style the page. Here we're using the `thirds` template. For an overview about the available layouts take a look at the [layouts sample](/documentation/examples/style-layout/amp_story_layouts/). --> */}
|
||||
<amp-story-page id="layout-demo">
|
||||
<amp-story-grid-layer template="thirds">
|
||||
<amp-img
|
||||
grid-area="upper-third"
|
||||
src="https://amp.dev/static/samples/img/story_thirds_1.jpg"
|
||||
width="560"
|
||||
height="420"
|
||||
layout="responsive"
|
||||
/>
|
||||
<amp-img
|
||||
grid-area="middle-third"
|
||||
src="https://amp.dev/static/samples/img/story_thirds_2.jpg"
|
||||
width="560"
|
||||
height="420"
|
||||
layout="responsive"
|
||||
/>
|
||||
<amp-img
|
||||
grid-area="lower-third"
|
||||
src="https://amp.dev/static/samples/img/story_thirds_3.jpg"
|
||||
width="560"
|
||||
height="420"
|
||||
layout="responsive"
|
||||
/>
|
||||
</amp-story-grid-layer>
|
||||
</amp-story-page>
|
||||
|
||||
{/* <!-- A "bookend" panel containing links to other resources will appear on the last page of your story if you include an `amp-story-bookend` that references a [bookend JSON config](/static/samples/json/bookend.json). --> */}
|
||||
<amp-story-bookend
|
||||
src="https://amp.dev/static/samples/json/bookend.json"
|
||||
layout="nodisplay"
|
||||
/>
|
||||
</amp-story>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
export default () => <div>About us</div>
|
||||
export default function About() {
|
||||
return <div>About us</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
export default () => <div>This is the contact page.</div>
|
||||
export default function Contact() {
|
||||
return <div>This is the contact page.</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
This is a static page goto{' '}
|
||||
<Link href="/">
|
||||
<a>dynamic</a>
|
||||
</Link>{' '}
|
||||
page.
|
||||
</div>
|
||||
)
|
||||
export default function About() {
|
||||
return (
|
||||
<div>
|
||||
This is a static page goto{' '}
|
||||
<Link href="/">
|
||||
<a>dynamic</a>
|
||||
</Link>{' '}
|
||||
page.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
This is a static page goto{' '}
|
||||
<Link href="/">
|
||||
<a>dynamic</a>
|
||||
</Link>{' '}
|
||||
page.
|
||||
</div>
|
||||
)
|
||||
export default function About() {
|
||||
return (
|
||||
<div>
|
||||
This is a static page goto{' '}
|
||||
<Link href="/">
|
||||
<a>dynamic</a>
|
||||
</Link>{' '}
|
||||
page.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export default (req, res) => {
|
||||
export default function userHandler(req, res) {
|
||||
const {
|
||||
query: { id, name },
|
||||
method,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Fake users data
|
||||
const users = [{ id: 1 }, { id: 2 }, { id: 3 }]
|
||||
|
||||
export default (req, res) => {
|
||||
export default function handler(req, res) {
|
||||
// Get data from your database
|
||||
res.status(200).json(users)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
export default ({ person }) => (
|
||||
<li>
|
||||
<Link href="/person/[id]" as={`/person/${person.id}`}>
|
||||
<a>{person.name}</a>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
export default function Person({ person }) {
|
||||
return (
|
||||
<li>
|
||||
<Link href="/person/[id]" as={`/person/${person.id}`}>
|
||||
<a>{person.name}</a>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { people } from '../../../data'
|
||||
|
||||
export default ({ query: { id } }, res) => {
|
||||
export default function personHandler({ query: { id } }, res) {
|
||||
const filtered = people.filter((p) => p.id === id)
|
||||
|
||||
// User with id exists
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { people } from '../../../data'
|
||||
|
||||
export default (req, res) => {
|
||||
export default function handler(req, res) {
|
||||
res.status(200).json(people)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
export default () => (
|
||||
<div className="hello">
|
||||
<p>Hello World</p>
|
||||
<style jsx>{`
|
||||
.hello {
|
||||
font: 15px Helvetica, Arial, sans-serif;
|
||||
background: #eee;
|
||||
padding: 100px;
|
||||
text-align: center;
|
||||
transition: 100ms ease-in background;
|
||||
}
|
||||
.hello:hover {
|
||||
background: #ccc;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="hello">
|
||||
<p>Hello World</p>
|
||||
<style jsx>{`
|
||||
.hello {
|
||||
font: 15px Helvetica, Arial, sans-serif;
|
||||
background: #eee;
|
||||
padding: 100px;
|
||||
text-align: center;
|
||||
transition: 100ms ease-in background;
|
||||
}
|
||||
.hello:hover {
|
||||
background: #ccc;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
export default () => <div>About us</div>
|
||||
export default function About() {
|
||||
return <div>About us</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
export default () => <div>About 2</div>
|
||||
export default function About2() {
|
||||
return <div>About 2</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
export default () => <div>Hello Day</div>
|
||||
export default function Day() {
|
||||
return <div>Hello Day</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import Link from 'next/link'
|
||||
export default () => (
|
||||
<div>
|
||||
Hello World.{' '}
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<div>
|
||||
Hello World.{' '}
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import { format } from 'date-fns'
|
||||
|
||||
export default ({ dateString }) => (
|
||||
<time dateTime={dateString}>
|
||||
{format(new Date(dateString), 'LLLL d, yyyy')}
|
||||
</time>
|
||||
)
|
||||
export default function Date({ dateString }) {
|
||||
return (
|
||||
<time dateTime={dateString}>
|
||||
{format(new Date(dateString), 'LLLL d, yyyy')}
|
||||
</time>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export default async (_, res) => {
|
||||
export default async function exit(_, res) {
|
||||
// Exit the current user from "Preview Mode". This function accepts no args.
|
||||
res.clearPreviewData()
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { getPreviewPostBySlug } from '../../lib/api'
|
||||
|
||||
export default async (req, res) => {
|
||||
export default async function preview(req, res) {
|
||||
const { secret, slug } = req.query
|
||||
|
||||
if (
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export default async (_, res) => {
|
||||
export default async function exit(_, res) {
|
||||
// Exit the current user from "Preview Mode". This function accepts no args.
|
||||
res.clearPreviewData()
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { getPreviewPostBySlug } from '../../lib/api'
|
||||
|
||||
export default async (req, res) => {
|
||||
export default async function preview(req, res) {
|
||||
// Check the secret and next parameters
|
||||
// This secret should only be known to this API route and the CMS
|
||||
if (
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export default async (_, res) => {
|
||||
export default async function exit(_, res) {
|
||||
// Exit the current user from "Preview Mode". This function accepts no args.
|
||||
res.clearPreviewData()
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ function linkResolver(doc) {
|
|||
return `/${doc.uid}`
|
||||
}
|
||||
|
||||
export default async (req, res) => {
|
||||
export default async function preview(req, res) {
|
||||
const ref = req.query.token
|
||||
|
||||
// Check the token parameter against the Prismic SDK
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export default async (_, res) => {
|
||||
export default async function exit(_, res) {
|
||||
// Exit the current user from "Preview Mode". This function accepts no args.
|
||||
res.clearPreviewData()
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { getPreviewPostBySlug } from '../../lib/api'
|
||||
|
||||
export default async (req, res) => {
|
||||
export default async function preview(req, res) {
|
||||
// Check the secret and next parameters
|
||||
// This secret should only be known to this API route and the CMS
|
||||
if (
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export default async (_, res) => {
|
||||
export default async function exit(_, res) {
|
||||
// Exit the current user from "Preview Mode". This function accepts no args.
|
||||
res.clearPreviewData()
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { getPreviewPostBySlug } from '../../lib/api'
|
||||
|
||||
export default async (req, res) => {
|
||||
export default async function preview(req, res) {
|
||||
// Check the secret and next parameters
|
||||
// This secret should only be known to this API route and the CMS
|
||||
if (
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
export default () => <div>a</div>
|
||||
export default function A() {
|
||||
return <div>a</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
export default () => <div>b</div>
|
||||
export default function B() {
|
||||
return <div>b</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
export default () => <div>a</div>
|
||||
export default function A() {
|
||||
return <div>a</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
export default () => <div>b</div>
|
||||
export default function B() {
|
||||
return <div>b</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
export default () => <div>a</div>
|
||||
export default function A() {
|
||||
return <div>a</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
export default () => <div>b</div>
|
||||
export default function B() {
|
||||
return <div>b</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import React from 'react'
|
||||
|
||||
export default () => <div>a</div>
|
||||
export default function A() {
|
||||
return <div>a</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import React from 'react'
|
||||
|
||||
export default () => <div>b</div>
|
||||
export default function B() {
|
||||
return <div>b</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
export default () => <div>a</div>
|
||||
export default function A() {
|
||||
return <div>a</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
export default () => <div>b</div>
|
||||
export default function B() {
|
||||
return <div>b</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import React from 'react'
|
||||
|
||||
export default () => <div>a</div>
|
||||
export default function A() {
|
||||
return <div>a</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import React from 'react'
|
||||
|
||||
export default () => <div>b</div>
|
||||
export default function B() {
|
||||
return <div>b</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import React from 'react'
|
||||
|
||||
export default () => <div>a</div>
|
||||
export default function A() {
|
||||
return <div>a</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import React from 'react'
|
||||
|
||||
export default () => <div>b</div>
|
||||
export default function B() {
|
||||
return <div>b</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/a" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/b" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/a" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/b" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import React from 'react'
|
||||
|
||||
export default () => <div>a</div>
|
||||
export default function A() {
|
||||
return <div>a</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import React from 'react'
|
||||
|
||||
export default () => <div>b</div>
|
||||
export default function B() {
|
||||
return <div>b</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import Link from 'next/link'
|
||||
export default () => (
|
||||
<div>
|
||||
<div>About us</div>
|
||||
export default function About() {
|
||||
return (
|
||||
<div>
|
||||
Back to{' '}
|
||||
<Link href="/" as={process.env.BACKEND_URL + '/'}>
|
||||
<a>Home</a>
|
||||
</Link>
|
||||
<div>About us</div>
|
||||
<div>
|
||||
Back to{' '}
|
||||
<Link href="/" as={process.env.BACKEND_URL + '/'}>
|
||||
<a>Home</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import Link from 'next/link'
|
||||
export default () => (
|
||||
<div>
|
||||
Hello World.{' '}
|
||||
<Link href="/about" as={process.env.BACKEND_URL + '/about'}>
|
||||
<a>About</a>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<div>
|
||||
Hello World.{' '}
|
||||
<Link href="/about" as={process.env.BACKEND_URL + '/about'}>
|
||||
<a>About</a>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
import Head from 'next/head'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<Head>
|
||||
<title>This page has a title 🤔</title>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||
</Head>
|
||||
export default function Home() {
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>This page has a title 🤔</title>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||
</Head>
|
||||
|
||||
<h1>This page has a title 🤔</h1>
|
||||
</div>
|
||||
)
|
||||
<h1>This page has a title 🤔</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,36 @@
|
|||
import Link from 'next/link'
|
||||
import Head from 'next/head'
|
||||
|
||||
export default ({ children, title = 'This is the default title' }) => (
|
||||
<div>
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||
</Head>
|
||||
<header>
|
||||
<nav>
|
||||
<Link href="/">
|
||||
<a>Home</a>
|
||||
</Link>{' '}
|
||||
|
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>{' '}
|
||||
|
|
||||
<Link href="/contact">
|
||||
<a>Contact</a>
|
||||
</Link>
|
||||
</nav>
|
||||
</header>
|
||||
export default function Layout({
|
||||
children,
|
||||
title = 'This is the default title',
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||
</Head>
|
||||
<header>
|
||||
<nav>
|
||||
<Link href="/">
|
||||
<a>Home</a>
|
||||
</Link>{' '}
|
||||
|
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>{' '}
|
||||
|
|
||||
<Link href="/contact">
|
||||
<a>Contact</a>
|
||||
</Link>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{children}
|
||||
{children}
|
||||
|
||||
<footer>{'I`m here to stay'}</footer>
|
||||
</div>
|
||||
)
|
||||
<footer>{'I`m here to stay'}</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import Layout from '../components/layout'
|
||||
|
||||
export default () => (
|
||||
<Layout title="About us">
|
||||
<div>About us</div>
|
||||
</Layout>
|
||||
)
|
||||
export default function About() {
|
||||
return (
|
||||
<Layout title="About us">
|
||||
<div>About us</div>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import Layout from '../components/layout'
|
||||
|
||||
export default () => (
|
||||
<Layout title="Contact us">
|
||||
<div>Contact</div>
|
||||
</Layout>
|
||||
)
|
||||
export default function Contact() {
|
||||
return (
|
||||
<Layout title="Contact us">
|
||||
<div>Contact</div>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import Layout from '../components/layout'
|
||||
|
||||
export default () => (
|
||||
<Layout>
|
||||
<div>Hello World.</div>
|
||||
</Layout>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<Layout>
|
||||
<div>Hello World.</div>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
export default ({ children }) => (
|
||||
<p>
|
||||
{children}
|
||||
<style jsx>{`
|
||||
p {
|
||||
font: 13px Helvetica, Arial;
|
||||
margin: 10px 0;
|
||||
}
|
||||
`}</style>
|
||||
</p>
|
||||
)
|
||||
export default function Paragraph({ children }) {
|
||||
return (
|
||||
<p>
|
||||
{children}
|
||||
<style jsx>{`
|
||||
p {
|
||||
font: 13px Helvetica, Arial;
|
||||
margin: 10px 0;
|
||||
}
|
||||
`}</style>
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
export default ({ title, children }) => (
|
||||
<div className="main">
|
||||
<h1>{title}</h1>
|
||||
{children}
|
||||
<style jsx>{`
|
||||
.main {
|
||||
font: 15px Helvetica, Arial;
|
||||
border: 1px solid #eee;
|
||||
padding: 0 10px;
|
||||
}
|
||||
export default function Post({ title, children }) {
|
||||
return (
|
||||
<div className="main">
|
||||
<h1>{title}</h1>
|
||||
{children}
|
||||
<style jsx>{`
|
||||
.main {
|
||||
font: 15px Helvetica, Arial;
|
||||
border: 1px solid #eee;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
h1 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,47 @@
|
|||
import P from '../components/paragraph'
|
||||
import Post from '../components/post'
|
||||
|
||||
export default () => (
|
||||
<div className="main">
|
||||
<Post title="My first blog post">
|
||||
<P>Hello there</P>
|
||||
<P>This is an example of a componentized blog post</P>
|
||||
</Post>
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="main">
|
||||
<Post title="My first blog post">
|
||||
<P>Hello there</P>
|
||||
<P>This is an example of a componentized blog post</P>
|
||||
</Post>
|
||||
|
||||
<hr />
|
||||
<hr />
|
||||
|
||||
<Post title="My second blog post">
|
||||
<P>Hello there</P>
|
||||
<P>This is another example.</P>
|
||||
<P>Wa-hoo!</P>
|
||||
</Post>
|
||||
<Post title="My second blog post">
|
||||
<P>Hello there</P>
|
||||
<P>This is another example.</P>
|
||||
<P>Wa-hoo!</P>
|
||||
</Post>
|
||||
|
||||
<hr />
|
||||
<hr />
|
||||
|
||||
<Post title="The final blog post">
|
||||
<P>C’est fin</P>
|
||||
</Post>
|
||||
<Post title="The final blog post">
|
||||
<P>C’est fin</P>
|
||||
</Post>
|
||||
|
||||
<style jsx>{`
|
||||
.main {
|
||||
margin: auto;
|
||||
max-width: 420px;
|
||||
padding: 10px;
|
||||
}
|
||||
<style jsx>{`
|
||||
.main {
|
||||
margin: auto;
|
||||
max-width: 420px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100px;
|
||||
border-width: 0;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
}
|
||||
hr {
|
||||
width: 100px;
|
||||
border-width: 0;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
hr::before {
|
||||
content: '***';
|
||||
color: #ccc;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
hr::before {
|
||||
content: '***';
|
||||
color: #ccc;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
import React from 'react'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<h3>Loading...</h3>
|
||||
<style jsx>{`
|
||||
div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 50vh;
|
||||
justify-content: center;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div>
|
||||
<h3>Loading...</h3>
|
||||
<style jsx>{`
|
||||
div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 50vh;
|
||||
justify-content: center;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react'
|
||||
|
||||
export default function (props) {
|
||||
export default function Post(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1>My {props.id} blog post</h1>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,23 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/blog?id=first" as="/blog/first">
|
||||
<a>My first blog post</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/blog?id=second" as="/blog/second">
|
||||
<a>My second blog post</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/blog?id=last" as="/blog/last">
|
||||
<a>My last blog post</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/blog?id=first" as="/blog/first">
|
||||
<a>My first blog post</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/blog?id=second" as="/blog/second">
|
||||
<a>My second blog post</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/blog?id=last" as="/blog/last">
|
||||
<a>My last blog post</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
import React from 'react'
|
||||
import Cat from '../svgs/cat.svg'
|
||||
|
||||
export default () => (
|
||||
<div className="container">
|
||||
<marquee>SVG Cat!</marquee>
|
||||
<Cat />
|
||||
<style jsx>{`
|
||||
.container {
|
||||
width: 600px;
|
||||
margin: 100px auto;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="container">
|
||||
<marquee>SVG Cat!</marquee>
|
||||
<Cat />
|
||||
<style jsx>{`
|
||||
.container {
|
||||
width: 600px;
|
||||
margin: 100px auto;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import React from 'react'
|
||||
|
||||
export default () => <div>About us</div>
|
||||
export default function About() {
|
||||
return <div>About us</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
Hello World.{' '}
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<div>
|
||||
Hello World.{' '}
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import { useRouter } from 'next/router'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<Link href="/">Home</Link>
|
||||
<Link href="/about">About</Link>
|
||||
</div>
|
||||
)
|
||||
export default function Header() {
|
||||
return (
|
||||
<div>
|
||||
<Link href="/">Home</Link>
|
||||
<Link href="/about">About</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Link = ({ children, href }) => {
|
||||
const router = useRouter()
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import Header from '../components/header'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<Header />
|
||||
<p>This is the about page.</p>
|
||||
</div>
|
||||
)
|
||||
export default function About() {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<p>This is the about page.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import Header from '../components/header'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<Header />
|
||||
<p>HOME PAGE is here!</p>
|
||||
</div>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<p>HOME PAGE is here!</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
export default () => (
|
||||
<header>
|
||||
<h1>Hello world!</h1>
|
||||
</header>
|
||||
)
|
||||
export default function Header() {
|
||||
return (
|
||||
<header>
|
||||
<h1>Hello world!</h1>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import Header from 'components/header.js'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<Header />
|
||||
</div>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ HitComponent.propTypes = {
|
|||
hit: PropTypes.object,
|
||||
}
|
||||
|
||||
export default class extends React.Component {
|
||||
export default class App extends React.Component {
|
||||
static propTypes = {
|
||||
searchState: PropTypes.object,
|
||||
resultsState: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const updateAfter = 700
|
|||
const searchStateToUrl = (searchState) =>
|
||||
searchState ? `${window.location.pathname}?${qs.stringify(searchState)}` : ''
|
||||
|
||||
export default class extends React.Component {
|
||||
export default class Home extends React.Component {
|
||||
static propTypes = {
|
||||
resultsState: PropTypes.object,
|
||||
searchState: PropTypes.object,
|
||||
|
|
|
|||
|
|
@ -11,64 +11,78 @@ import {
|
|||
const FormItem = Form.Item
|
||||
const Option = Select.Option
|
||||
|
||||
export default () => (
|
||||
<div style={{ marginTop: 100 }}>
|
||||
<Form layout="horizontal">
|
||||
<FormItem
|
||||
label="Input Number"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<InputNumber
|
||||
size="large"
|
||||
min={1}
|
||||
max={10}
|
||||
style={{ width: 100 }}
|
||||
defaultValue={3}
|
||||
name="inputNumber"
|
||||
/>
|
||||
<a href="#">Link</a>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="Switch" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
|
||||
<Switch defaultChecked name="switch" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="Slider" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
|
||||
<Slider defaultValue={70} />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="Select" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
|
||||
<Select
|
||||
size="large"
|
||||
defaultValue="lucy"
|
||||
style={{ width: 192 }}
|
||||
name="select"
|
||||
export default function Home() {
|
||||
return (
|
||||
<div style={{ marginTop: 100 }}>
|
||||
<Form layout="horizontal">
|
||||
<FormItem
|
||||
label="Input Number"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
<Option value="disabled" disabled>
|
||||
disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<InputNumber
|
||||
size="large"
|
||||
min={1}
|
||||
max={10}
|
||||
style={{ width: 100 }}
|
||||
defaultValue={3}
|
||||
name="inputNumber"
|
||||
/>
|
||||
<a href="#">Link</a>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="DatePicker"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<DatePicker name="startDate" />
|
||||
</FormItem>
|
||||
<FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
|
||||
<Button size="large" type="primary" htmlType="submit">
|
||||
OK
|
||||
</Button>
|
||||
<Button size="large" style={{ marginLeft: 8 }}>
|
||||
Cancel
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
<FormItem
|
||||
label="Switch"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Switch defaultChecked name="switch" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Slider"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Slider defaultValue={70} />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Select"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Select
|
||||
size="large"
|
||||
defaultValue="lucy"
|
||||
style={{ width: 192 }}
|
||||
name="select"
|
||||
>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
<Option value="disabled" disabled>
|
||||
disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="DatePicker"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<DatePicker name="startDate" />
|
||||
</FormItem>
|
||||
<FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
|
||||
<Button size="large" type="primary" htmlType="submit">
|
||||
OK
|
||||
</Button>
|
||||
<Button size="large" style={{ marginLeft: 8 }}>
|
||||
Cancel
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@ import Layout from '../components/Layout'
|
|||
import { Button } from 'antd-mobile'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<Layout title="About">
|
||||
<Link href="/">
|
||||
<Button>Go to Index</Button>
|
||||
</Link>
|
||||
</Layout>
|
||||
)
|
||||
export default function About() {
|
||||
return (
|
||||
<Layout title="About">
|
||||
<Link href="/">
|
||||
<Button>Go to Index</Button>
|
||||
</Link>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@ import Layout from '../components/Layout'
|
|||
import { Button } from 'antd-mobile'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<Layout title="Index">
|
||||
<Link href="/about">
|
||||
<Button>Go to About</Button>
|
||||
</Link>
|
||||
</Layout>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<Layout title="Index">
|
||||
<Link href="/about">
|
||||
<Button>Go to About</Button>
|
||||
</Link>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,13 +56,15 @@ const menuItemRender = (options: MenuDataItem, element: React.ReactNode) => (
|
|||
</Link>
|
||||
)
|
||||
|
||||
export default ({ children }) => (
|
||||
<ProLayout
|
||||
style={{ minHeight: '100vh' }}
|
||||
route={ROUTES}
|
||||
menuItemRender={menuItemRender}
|
||||
menuHeaderRender={menuHeaderRender}
|
||||
>
|
||||
{children}
|
||||
</ProLayout>
|
||||
)
|
||||
export default function Main({ children }) {
|
||||
return (
|
||||
<ProLayout
|
||||
style={{ minHeight: '100vh' }}
|
||||
route={ROUTES}
|
||||
menuItemRender={menuItemRender}
|
||||
menuHeaderRender={menuHeaderRender}
|
||||
>
|
||||
{children}
|
||||
</ProLayout>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import MainLayout from '../layouts/main'
|
||||
|
||||
export default () => <MainLayout>Example page</MainLayout>
|
||||
export default function Example() {
|
||||
return <MainLayout>Example page</MainLayout>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,59 +13,73 @@ import MainLayout from '../layouts/main'
|
|||
const FormItem = Form.Item
|
||||
const Option = Select.Option
|
||||
|
||||
export default () => (
|
||||
<MainLayout>
|
||||
<Form layout="horizontal">
|
||||
<FormItem
|
||||
label="Input Number"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<InputNumber
|
||||
size="large"
|
||||
min={1}
|
||||
max={10}
|
||||
style={{ width: 100 }}
|
||||
defaultValue={3}
|
||||
name="inputNumber"
|
||||
/>
|
||||
<a href="#">Link</a>
|
||||
</FormItem>
|
||||
export default function Home() {
|
||||
return (
|
||||
<MainLayout>
|
||||
<Form layout="horizontal">
|
||||
<FormItem
|
||||
label="Input Number"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<InputNumber
|
||||
size="large"
|
||||
min={1}
|
||||
max={10}
|
||||
style={{ width: 100 }}
|
||||
defaultValue={3}
|
||||
name="inputNumber"
|
||||
/>
|
||||
<a href="#">Link</a>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="Switch" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
|
||||
<Switch defaultChecked />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="Switch"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Switch defaultChecked />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="Slider" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
|
||||
<Slider defaultValue={70} />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="Slider"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Slider defaultValue={70} />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="Select" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
|
||||
<Select size="large" defaultValue="lucy" style={{ width: 192 }}>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
<Option value="disabled" disabled>
|
||||
disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="Select"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Select size="large" defaultValue="lucy" style={{ width: 192 }}>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
<Option value="disabled" disabled>
|
||||
disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="DatePicker"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<DatePicker name="startDate" />
|
||||
</FormItem>
|
||||
<FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
|
||||
<Button size="large" type="primary" htmlType="submit">
|
||||
OK
|
||||
</Button>
|
||||
<Button size="large" style={{ marginLeft: 8 }}>
|
||||
Cancel
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</MainLayout>
|
||||
)
|
||||
<FormItem
|
||||
label="DatePicker"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<DatePicker name="startDate" />
|
||||
</FormItem>
|
||||
<FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
|
||||
<Button size="large" type="primary" htmlType="submit">
|
||||
OK
|
||||
</Button>
|
||||
<Button size="large" style={{ marginLeft: 8 }}>
|
||||
Cancel
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</MainLayout>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import MainLayout from '../layouts/main'
|
||||
|
||||
export default () => <MainLayout>Welcome!</MainLayout>
|
||||
export default function Welcome() {
|
||||
return <MainLayout>Welcome!</MainLayout>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,86 +15,91 @@ const content = {
|
|||
marginTop: '100px',
|
||||
}
|
||||
|
||||
export default () => (
|
||||
<div style={content}>
|
||||
<div className="text-center mb-5">
|
||||
<Link href="#">
|
||||
<a className="logo mr-0">
|
||||
<SmileFilled size={48} strokeWidth={1} />
|
||||
</a>
|
||||
</Link>
|
||||
export default function Home() {
|
||||
return (
|
||||
<div style={content}>
|
||||
<div className="text-center mb-5">
|
||||
<Link href="#">
|
||||
<a className="logo mr-0">
|
||||
<SmileFilled size={48} strokeWidth={1} />
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<p className="mb-0 mt-3 text-disabled">Welcome to the world !</p>
|
||||
</div>
|
||||
<div>
|
||||
<Form layout="horizontal">
|
||||
<FormItem
|
||||
label="Input Number"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<InputNumber
|
||||
size="large"
|
||||
min={1}
|
||||
max={10}
|
||||
style={{ width: 100 }}
|
||||
defaultValue={3}
|
||||
name="inputNumber"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Switch"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Switch defaultChecked name="switch" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Slider"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Slider defaultValue={70} />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Select"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Select
|
||||
size="large"
|
||||
defaultValue="lucy"
|
||||
style={{ width: 192 }}
|
||||
name="select"
|
||||
<p className="mb-0 mt-3 text-disabled">Welcome to the world !</p>
|
||||
</div>
|
||||
<div>
|
||||
<Form layout="horizontal">
|
||||
<FormItem
|
||||
label="Input Number"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
<Option value="disabled" disabled>
|
||||
disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<InputNumber
|
||||
size="large"
|
||||
min={1}
|
||||
max={10}
|
||||
style={{ width: 100 }}
|
||||
defaultValue={3}
|
||||
name="inputNumber"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="DatePicker"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<DatePicker name="startDate" />
|
||||
</FormItem>
|
||||
<FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
|
||||
<Button size="large" type="primary" htmlType="submit">
|
||||
OK
|
||||
</Button>
|
||||
<Button size="large" style={{ marginLeft: 8 }}>
|
||||
Cancel
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<FormItem
|
||||
label="Switch"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Switch defaultChecked name="switch" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Slider"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Slider defaultValue={70} />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Select"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<Select
|
||||
size="large"
|
||||
defaultValue="lucy"
|
||||
style={{ width: 192 }}
|
||||
name="select"
|
||||
>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
<Option value="disabled" disabled>
|
||||
disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="DatePicker"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 8 }}
|
||||
>
|
||||
<DatePicker name="startDate" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
style={{ marginTop: 48 }}
|
||||
wrapperCol={{ span: 8, offset: 8 }}
|
||||
>
|
||||
<Button size="large" type="primary" htmlType="submit">
|
||||
OK
|
||||
</Button>
|
||||
<Button size="large" style={{ marginLeft: 8 }}>
|
||||
Cancel
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,13 @@ if (typeof window !== 'undefined') {
|
|||
StyleSheet.rehydrate(window.__NEXT_DATA__.ids)
|
||||
}
|
||||
|
||||
export default () => (
|
||||
<div className={css(styles.root)}>
|
||||
<h1 className={css(styles.title)}>My page</h1>
|
||||
</div>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className={css(styles.root)}>
|
||||
<h1 className={css(styles.title)}>My page</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
|
|
|
|||
|
|
@ -1,45 +1,47 @@
|
|||
export default ({ children }) => (
|
||||
<main>
|
||||
{children}
|
||||
<style jsx global>{`
|
||||
* {
|
||||
font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
|
||||
'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
|
||||
monospace, serif;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 25px 50px;
|
||||
}
|
||||
a {
|
||||
color: #22bad9;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
article {
|
||||
margin: 0 auto;
|
||||
max-width: 650px;
|
||||
}
|
||||
button {
|
||||
align-items: center;
|
||||
background-color: #22bad9;
|
||||
border: 0;
|
||||
color: white;
|
||||
display: flex;
|
||||
padding: 5px 7px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
button:active {
|
||||
background-color: #1b9db7;
|
||||
}
|
||||
button:disabled {
|
||||
background-color: #b5bebf;
|
||||
}
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
`}</style>
|
||||
</main>
|
||||
)
|
||||
export default function App({ children }) {
|
||||
return (
|
||||
<main>
|
||||
{children}
|
||||
<style jsx global>{`
|
||||
* {
|
||||
font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
|
||||
'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
|
||||
monospace, serif;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 25px 50px;
|
||||
}
|
||||
a {
|
||||
color: #22bad9;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
article {
|
||||
margin: 0 auto;
|
||||
max-width: 650px;
|
||||
}
|
||||
button {
|
||||
align-items: center;
|
||||
background-color: #22bad9;
|
||||
border: 0;
|
||||
color: white;
|
||||
display: flex;
|
||||
padding: 5px 7px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
button:active {
|
||||
background-color: #1b9db7;
|
||||
}
|
||||
button:disabled {
|
||||
background-color: #b5bebf;
|
||||
}
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
`}</style>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
export default ({ message }) => (
|
||||
<aside>
|
||||
{message}
|
||||
<style jsx>{`
|
||||
aside {
|
||||
padding: 1.5em;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
`}</style>
|
||||
</aside>
|
||||
)
|
||||
export default function ErrorMessage({ message }) {
|
||||
return (
|
||||
<aside>
|
||||
{message}
|
||||
<style jsx>{`
|
||||
aside {
|
||||
padding: 1.5em;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
`}</style>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@ import React from 'react'
|
|||
|
||||
const Layout = ({ children }) => <div className="layout">{children}</div>
|
||||
|
||||
export default ({ Component, pageProps }) => (
|
||||
<Layout>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
)
|
||||
export default function App({ Component, pageProps }) {
|
||||
return (
|
||||
<Layout>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
export default () => {
|
||||
export default function Home() {
|
||||
return <div>test</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import Button, { ButtonGroup } from '@atlaskit/button'
|
||||
|
||||
export default () => {
|
||||
export default function ButtonComponent() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button style={{ margin: 10 }}>Button</Button>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import { Checkbox } from '@atlaskit/checkbox'
|
||||
|
||||
export default () => {
|
||||
export default function CheckboxComponent() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Checkbox
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import {
|
|||
} from '@atlaskit/datetime-picker'
|
||||
import { Label } from '@atlaskit/field-base'
|
||||
|
||||
export default () => {
|
||||
export default function DateTimePickerComponent() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Label label="TimePicker - timeFormat (h:mm a)" />
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import DropdownMenu, {
|
|||
} from '@atlaskit/dropdown-menu'
|
||||
import { Label } from '@atlaskit/field-base'
|
||||
|
||||
export default () => {
|
||||
export default function DropdownMenuComponent() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Label label="DropdownMenu" />
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import CheckboxComponent from '../components/CheckboxComponent'
|
|||
import DateTimePickerComponent from '../components/DateTimePickerComponent'
|
||||
import DropdownMenuComponent from '../components/DropdownMenuComponent'
|
||||
|
||||
export default () => {
|
||||
export default function Home() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ButtonComponent />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export default (props) => {
|
||||
export default function Clock(props) {
|
||||
return (
|
||||
<div className={props.light ? 'light' : ''}>
|
||||
{format(new Date(props.lastUpdate))}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
const SECOND = 1000
|
||||
let timer = null
|
||||
|
||||
export default (context) => {
|
||||
export default function provider(context) {
|
||||
context.clock = {
|
||||
start(signalPath) {
|
||||
const signal = context.controller.getSignal(signalPath)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { query as q } from 'faunadb'
|
||||
import { serverClient, serializeFaunaCookie } from '../../utils/fauna-auth'
|
||||
|
||||
export default async (req, res) => {
|
||||
export default async function login(req, res) {
|
||||
const { email, password } = await req.body
|
||||
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { query as q } from 'faunadb'
|
|||
import cookie from 'cookie'
|
||||
import { faunaClient, FAUNA_SECRET_COOKIE } from '../../utils/fauna-auth'
|
||||
|
||||
export default async (req, res) => {
|
||||
export default async function logout(req, res) {
|
||||
const cookies = cookie.parse(req.headers.cookie ?? '')
|
||||
const faunaSecret = cookies[FAUNA_SECRET_COOKIE]
|
||||
if (!faunaSecret) {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export const profileApi = async (faunaSecret) => {
|
|||
return ref.id
|
||||
}
|
||||
|
||||
export default async (req, res) => {
|
||||
export default async function profile(req, res) {
|
||||
const cookies = cookie.parse(req.headers.cookie ?? '')
|
||||
const faunaSecret = cookies[FAUNA_SECRET_COOKIE]
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { query as q } from 'faunadb'
|
||||
import { serverClient, serializeFaunaCookie } from '../../utils/fauna-auth'
|
||||
|
||||
export default async (req, res) => {
|
||||
export default async function signuo(req, res) {
|
||||
const { email, password } = await req.body
|
||||
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -9,11 +9,13 @@ if (typeof window !== 'undefined') {
|
|||
cxs.rehydrate(serverCss)
|
||||
}
|
||||
|
||||
export default () => (
|
||||
<div className={cx.root}>
|
||||
<h1 className={cx.title}>My page</h1>
|
||||
</div>
|
||||
)
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className={cx.root}>
|
||||
<h1 className={cx.title}>My page</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const cx = {
|
||||
root: cxs({
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export default () => {
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<h1>Hello World!</h1>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue