forked from vercel/next.js
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
- Loading branch information
Showing
18 changed files
with
430 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
/node_modules | ||
/.pnp | ||
.pnp.js | ||
|
||
# testing | ||
/coverage | ||
|
||
# next.js | ||
/.next/ | ||
/out/ | ||
|
||
# production | ||
/build | ||
|
||
# misc | ||
.DS_Store | ||
*.pem | ||
|
||
# debug | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
.pnpm-debug.log* | ||
|
||
# local env files | ||
.env*.local | ||
|
||
# vercel | ||
.vercel | ||
|
||
# typescript | ||
*.tsbuildinfo | ||
next-env.d.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# NextUI Example | ||
|
||
This example shows how to use Next.js along with [NextUI](https://nextui.org/) of React. This is intended to show the integration of this UI toolkit with the Framework. | ||
|
||
## Deploy your own | ||
|
||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): | ||
|
||
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-next-ui) | ||
|
||
## How to use | ||
|
||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: | ||
|
||
```bash | ||
npx create-next-app --example with-next-ui with-next-ui-app | ||
# or | ||
yarn create next-app --example with-next-ui with-next-ui-app | ||
# or | ||
pnpm create next-app --example with-next-ui with-next-ui-app | ||
``` | ||
|
||
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export interface SvgProp { | ||
fill?: string | ||
size?: number | ||
height?: number | ||
width?: number | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { Checkbox } from '@nextui-org/react' | ||
|
||
const CustomCheckbox = () => { | ||
return ( | ||
<Checkbox.Group | ||
label="Select cities" | ||
orientation="horizontal" | ||
color="secondary" | ||
defaultValue={['buenos-aires']} | ||
> | ||
<Checkbox value="buenos-aires">Buenos Aires</Checkbox> | ||
<Checkbox value="sydney">Sydney</Checkbox> | ||
<Checkbox value="london">London</Checkbox> | ||
<Checkbox value="tokyo">Tokyo</Checkbox> | ||
</Checkbox.Group> | ||
) | ||
} | ||
|
||
export default CustomCheckbox |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import { Collapse, Text } from '@nextui-org/react' | ||
|
||
const CustomCollapse = () => { | ||
return ( | ||
<Collapse.Group> | ||
<Collapse title="Option A"> | ||
<Text> | ||
I have had my invitation to this world's festival, and thus my life | ||
has been blessed. | ||
</Text> | ||
</Collapse> | ||
<Collapse title="Option B"> | ||
<Text> | ||
In the meanwhile I smile and I sing all alone. In the meanwhile the | ||
air is filling with the perfume of promise. | ||
</Text> | ||
</Collapse> | ||
<Collapse title="Option C"> | ||
<Text> | ||
I came out on the chariot of the first gleam of light, and pursued my | ||
voyage through the wildernesses of worlds leaving my track on many a | ||
star and planet. | ||
</Text> | ||
</Collapse> | ||
</Collapse.Group> | ||
) | ||
} | ||
|
||
export default CustomCollapse |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { SvgProp } from '../common/interface' | ||
|
||
export const Mail = ({ fill, size, height, width, ...props }: SvgProp) => { | ||
return ( | ||
<svg | ||
width={size || width || 24} | ||
height={size || height || 24} | ||
viewBox="0 0 24 24" | ||
{...props} | ||
> | ||
<g | ||
fill="none" | ||
stroke={fill} | ||
strokeLinecap="round" | ||
strokeLinejoin="round" | ||
strokeWidth={1.5} | ||
> | ||
<path d="M12 20.5H7c-3 0-5-1.5-5-5v-7c0-3.5 2-5 5-5h10c3 0 5 1.5 5 5v3" /> | ||
<path d="M17 9l-3.13 2.5a3.166 3.166 0 01-3.75 0L7 9M19.21 14.77l-3.539 3.54a1.232 1.232 0 00-.3.59l-.19 1.35a.635.635 0 00.76.76l1.35-.19a1.189 1.189 0 00.59-.3l3.54-3.54a1.365 1.365 0 000-2.22 1.361 1.361 0 00-2.211.01zM18.7 15.28a3.185 3.185 0 002.22 2.22" /> | ||
</g> | ||
</svg> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { SvgProp } from '../common/interface' | ||
|
||
export const Password = ({ fill, size, height, width, ...props }: SvgProp) => { | ||
return ( | ||
<svg | ||
width={size || width || 24} | ||
height={size || height || 24} | ||
viewBox="0 0 24 24" | ||
{...props} | ||
> | ||
<g fill={fill}> | ||
<path d="M18.75 8v2.1a12.984 12.984 0 00-1.5-.1V8c0-3.15-.89-5.25-5.25-5.25S6.75 4.85 6.75 8v2a12.984 12.984 0 00-1.5.1V8c0-2.9.7-6.75 6.75-6.75S18.75 5.1 18.75 8z" /> | ||
<path d="M18.75 10.1a12.984 12.984 0 00-1.5-.1H6.75a12.984 12.984 0 00-1.5.1C2.7 10.41 2 11.66 2 15v2c0 4 1 5 5 5h10c4 0 5-1 5-5v-2c0-3.34-.7-4.59-3.25-4.9zM8.71 16.71A1.052 1.052 0 018 17a1 1 0 01-.38-.08 1.032 1.032 0 01-.33-.21A1.052 1.052 0 017 16a1 1 0 01.08-.38 1.155 1.155 0 01.21-.33 1.032 1.032 0 01.33-.21 1 1 0 011.09.21 1.155 1.155 0 01.21.33A1 1 0 019 16a1.052 1.052 0 01-.29.71zm4.21-.33a1.155 1.155 0 01-.21.33A1.052 1.052 0 0112 17a1.033 1.033 0 01-.71-.29 1.155 1.155 0 01-.21-.33A1 1 0 0111 16a1.033 1.033 0 01.29-.71 1.047 1.047 0 011.42 0A1.033 1.033 0 0113 16a1 1 0 01-.08.38zm3.79.33a1.014 1.014 0 01-1.42 0 1.014 1.014 0 010-1.42 1.047 1.047 0 011.42 0c.04.05.08.1.12.16a.556.556 0 01.09.17.636.636 0 01.06.18 1.5 1.5 0 01.02.2 1.052 1.052 0 01-.29.71z" /> | ||
</g> | ||
</svg> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import { Table } from '@nextui-org/react' | ||
|
||
const CustomTable = () => { | ||
return ( | ||
<Table | ||
aria-label="Example table with static content" | ||
css={{ | ||
height: 'auto', | ||
minWidth: '100%', | ||
}} | ||
> | ||
<Table.Header> | ||
<Table.Column>NAME</Table.Column> | ||
<Table.Column>ROLE</Table.Column> | ||
<Table.Column>STATUS</Table.Column> | ||
</Table.Header> | ||
<Table.Body> | ||
<Table.Row key="1"> | ||
<Table.Cell>Tony Reichert</Table.Cell> | ||
<Table.Cell>CEO</Table.Cell> | ||
<Table.Cell>Active</Table.Cell> | ||
</Table.Row> | ||
<Table.Row key="2"> | ||
<Table.Cell>Zoey Lang</Table.Cell> | ||
<Table.Cell>Technical Lead</Table.Cell> | ||
<Table.Cell>Paused</Table.Cell> | ||
</Table.Row> | ||
<Table.Row key="3"> | ||
<Table.Cell>Jane Fisher</Table.Cell> | ||
<Table.Cell>Senior Developer</Table.Cell> | ||
<Table.Cell>Active</Table.Cell> | ||
</Table.Row> | ||
<Table.Row key="4"> | ||
<Table.Cell>William Howard</Table.Cell> | ||
<Table.Cell>Community Manager</Table.Cell> | ||
<Table.Cell>Vacation</Table.Cell> | ||
</Table.Row> | ||
</Table.Body> | ||
</Table> | ||
) | ||
} | ||
|
||
export default CustomTable |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
/** @type {import('next').NextConfig} */ | ||
|
||
const nextConfig = { | ||
reactStrictMode: false, | ||
swcMinify: true, | ||
} | ||
|
||
module.exports = nextConfig |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
{ | ||
"private": true, | ||
"scripts": { | ||
"dev": "next dev", | ||
"build": "next build", | ||
"start": "next start" | ||
}, | ||
"dependencies": { | ||
"@nextui-org/react": "1.0.0-beta.9", | ||
"next": "latest", | ||
"react": "18.2.0", | ||
"react-dom": "18.2.0" | ||
}, | ||
"devDependencies": { | ||
"@types/node": "18.0.3", | ||
"@types/react": "18.0.15", | ||
"@types/react-dom": "18.0.6", | ||
"typescript": "4.7.4" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import '../styles/globals.css' | ||
import { NextUIProvider } from '@nextui-org/react' | ||
|
||
import type { AppProps } from 'next/app' | ||
|
||
export default function MyApp({ Component, pageProps }: AppProps) { | ||
return ( | ||
<NextUIProvider> | ||
<Component {...pageProps} /> | ||
</NextUIProvider> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import Document, { | ||
Html, | ||
Head, | ||
Main, | ||
NextScript, | ||
DocumentContext, | ||
DocumentInitialProps, | ||
} from 'next/document' | ||
|
||
import { CssBaseline } from '@nextui-org/react' | ||
|
||
import { Children } from 'react' | ||
|
||
export default class MyDocument extends Document { | ||
static async getInitialProps( | ||
ctx: DocumentContext | ||
): Promise<DocumentInitialProps> { | ||
const initialProps = await Document.getInitialProps(ctx) | ||
|
||
return { | ||
...initialProps, | ||
styles: Children.toArray([initialProps.styles]), | ||
} | ||
} | ||
|
||
render() { | ||
return ( | ||
<Html lang="en"> | ||
<Head>{CssBaseline.flush()}</Head> | ||
<body> | ||
<Main /> | ||
<NextScript /> | ||
</body> | ||
</Html> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import Head from 'next/head' | ||
import Image from 'next/image' | ||
import styles from '../styles/Home.module.css' | ||
import dynamic from 'next/dynamic' | ||
import { Avatar, Pagination } from '@nextui-org/react' | ||
|
||
const CustomCheckbox = dynamic(() => import('../components/Checkbox')) | ||
const CustomTable = dynamic(() => import('../components/Table')) | ||
const CustomCollapse = dynamic(() => import('../components/Collapse')) | ||
|
||
export default function Home() { | ||
return ( | ||
<div className={styles.container}> | ||
<Head> | ||
<title>NextUI Example</title> | ||
<meta name="description" content="Generated by create next app" /> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
<main className={styles.main}> | ||
<h1> | ||
<Avatar text="Hi" color="gradient" textColor={'white'} size={'xl'} /> | ||
</h1> | ||
<h1 className={styles.title}> | ||
Welcome to use <a href="https://nextui.org/">NextUI!</a> | ||
</h1> | ||
{/* checkout */} | ||
<h2>Checkbox:</h2> | ||
<CustomCheckbox></CustomCheckbox> | ||
{/* table */} | ||
<h2>Table:</h2> | ||
<CustomTable></CustomTable> | ||
{/* pagination */} | ||
<h2>Pagination</h2> | ||
<Pagination total={20} initialPage={1} /> | ||
{/* collapse */} | ||
<h2>Collapse</h2> | ||
<CustomCollapse></CustomCollapse> | ||
</main> | ||
<footer className={styles.footer}> | ||
<a | ||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
Powered by{' '} | ||
<span className={styles.logo}> | ||
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> | ||
</span> | ||
</a> | ||
</footer> | ||
</div> | ||
) | ||
} |
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.