archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

chore(examples): vite example modified

Browse Source
This commit is contained in:
Junior García 2022-03-01 10:58:34 -03:00
parent 5c2966d59d
commit e2c0ff57ff
8 changed files with 60 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/vite-react-typescript/index.html
View File

@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/logo.png" /> <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>NextUI | Vite App</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

BIN
examples/vite-react-typescript/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

0
examples/vite-react-typescript/src/logo.png → examples/vite-react-typescript/public/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

42
examples/vite-react-typescript/src/App.css
View File

@ -1,42 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 100s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
button {
font-size: calc(10px + 2vmin);
}

77
examples/vite-react-typescript/src/App.tsx
View File

@ -1,36 +1,61 @@
import { useState } from 'react' import { useState } from 'react';
import logo from './logo.png' import {
import './App.css' Button,
import {Button,Text,Link } from "@nextui-org/react"; Text,
Link,
NextUIProvider,
createTheme,
Container,
Spacer
} from '@nextui-org/react';
const theme = createTheme({
type: 'light'
});
function App() { function App() {
const [count, setCount] = useState(0) const [count, setCount] = useState(0);
return ( return (
<div className="App"> <NextUIProvider theme={theme}>
<header className="App-header"> <Container
<img src={logo} className="App-logo" alt="logo" /> className="App"
<Text color="secondary"><p>Hello Vite + NextUI!</p></Text> css={{
<p> dflex: 'center',
<Button type="button" onClick={() => setCount((count) => count + 1)}> flexDirection: 'column',
count is: {count} minHeight: '100vh'
</Button> }}
</p> >
<Text color="warning"> <img src="/logo.png" className="App-logo" alt="NextUI logo" />
<p> <Spacer y={0.5} />
<Text h1>Hello Vite + NextUI!</Text>
<Spacer y={0.5} />
<Button type="button" onClick={() => setCount((count) => count + 1)}>
Count is: {count}
</Button>
<Text css={{ my: '$8' }}>
Edit <code>App.tsx</code> and save to test HMR updates. Edit <code>App.tsx</code> and save to test HMR updates.
</p>
</Text> </Text>
<p> <Text>
<Link block color="warning" href="https://reactjs.org">Learn React</Link> <Link block href="https://reactjs.org">
Learn React
</Link>
{' | '} {' | '}
<Link block color="primary" href="https://vitejs.dev/guide/features.html">Vite Docs</Link> <Link
block
color="primary"
href="https://vitejs.dev/guide/features.html"
>
Vite Docs
</Link>
{' | '} {' | '}
<Link block color="error" href="https://nextui.org/">NextUI Docs</Link> <Link block href="https://nextui.org/">
</p> NextUI Docs
</header> </Link>
</div> </Text>
) </Container>
</NextUIProvider>
);
} }
export default App export default App;

13
examples/vite-react-typescript/src/index.css
View File

@ -1,13 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

9
examples/vite-react-typescript/src/main.tsx
View File

@ -1,11 +1,10 @@
import React from 'react' import React from 'react';
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom';
import './index.css' import App from './App';
import App from './App'
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>,
document.getElementById('root') document.getElementById('root')
) );

6
examples/vite-react-typescript/vite.config.ts
View File

@ -1,7 +1,7 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()] plugins: [react()]
}) });