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

feat(docs): customization section done

Browse Source
This commit is contained in:
Junior García 2022-01-11 23:37:17 -03:00
parent eaf313022e
commit 80195d7066
10 changed files with 154 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
apps/docs/content/landing/index.tsx
View File

@ -120,5 +120,55 @@ const App = () => {
}
export default App;
`,
customizationCode: `import React from 'react';
import { Button } from '@nextui-org/react';
const CustomButton = () => {
return (
<Button
auto
rounded
ripple={false}
size="xl"
css={{
background: 'linear-gradient(180deg, $green200 25%, $green500 100%)',
textTransform: 'uppercase',
fontWeight: '$semibold',
textShadow: '1px 1px 4px $colors$green700',
boxShadow: '$md',
position: 'relative',
overflow: 'visible',
color: '$background',
px: '$18',
'&:after': {
content: '""',
position: 'absolute',
width: '100%',
height: '100%',
background: 'rgb139, 243, 156, 0,1)',
opacity: 1,
borderRadius: '$pill',
transition: 'all 0.5s ease'
},
'&:hover': {
transform: 'translateY(-5px)',
'&:after': {
background: 'rgb(139, 243, 156, 1)',
transform: 'scaleX(1.5) scaleY(1.6)',
opacity: 0
}
},
'&:active': {
transform: 'translateY(-2px)'
}
}}
>
Click me
</Button>
);
};
export default CustomButton;
`
};

4
apps/docs/next-redirect.js
View File

@ -65,12 +65,12 @@ async function redirect() {
},
{
source: '/docs/components',
destination: '/docs/components/text',
destination: '/docs/components/button',
permanent: true
},
{
source: '/components',
destination: '/docs/components/text',
destination: '/docs/components/button',
permanent: true
}
];

2
apps/docs/package.json
View File

@ -17,6 +17,7 @@
"@nextui-org/react": "^1.0.2-alpha.2",
"@types/lodash": "^4.14.170",
"algoliasearch": "^4.10.3",
"canvas-confetti": "^1.4.0",
"classnames": "^2.3.1",
"gray-matter": "^4.0.3",
"hast-util-to-html": "7.1.2",
@ -49,6 +50,7 @@
"util.promisify": "^1.1.1"
},
"devDependencies": {
"@types/canvas-confetti": "^1.4.2",
"@types/parse-numeric-range": "^0.0.1",
"@types/react": "^17.0.11",
"@types/react-autosuggest": "^10.1.5",

18
apps/docs/src/components/primitives/index.ts
View File

@ -1,4 +1,5 @@
import { styled, Link } from '@nextui-org/react';
import { lightTheme } from '@theme/shared';
export const Title = styled('h1', {
display: 'inline',
@ -73,12 +74,25 @@ export const BlockLink = styled(Link, {
},
variants: {
color: {
defualt: {
default: {
color: '$blockLinkColor'
},
green: {
color: '$green300',
bg: '$accents1',
'&:hover': {
bg: '$green800'
},
[`.${lightTheme} &`]: {
color: '$green500',
'&:hover': {
bg: '$green100'
}
}
}
}
},
defaultVariants: {
color: 'defualt'
color: 'default'
}
});

58
apps/docs/src/components/templates/custom-button/index.tsx Normal file
View File

@ -0,0 +1,58 @@
import React from 'react';
import { Button } from '@nextui-org/react';
import confetti from 'canvas-confetti';
const CustomButton = () => {
const handleConfetti = () => {
confetti({
particleCount: 100,
spread: 70,
origin: { x: 0.75, y: 0.8 }
});
};
return (
<Button
auto
rounded
ripple={false}
size="xl"
onClick={handleConfetti}
css={{
background: 'linear-gradient(180deg, $green200 25%, $green500 100%)',
textTransform: 'uppercase',
fontWeight: '$semibold',
textShadow: '1px 1px 4px $colors$green700',
boxShadow: '$md',
position: 'relative',
overflow: 'visible',
color: '$background',
px: '$18',
'&:after': {
content: '""',
position: 'absolute',
width: '100%',
height: '100%',
background: 'rgb139, 243, 156, 0,1)',
opacity: 1,
borderRadius: '$pill',
transition: 'all 0.5s ease'
},
'&:hover': {
transform: 'translateY(-5px)',
'&:after': {
background: 'rgb(139, 243, 156, 1)',
transform: 'scaleX(1.5) scaleY(1.6)',
opacity: 0
}
},
'&:active': {
transform: 'translateY(-2px)'
}
}}
>
Click me
</Button>
);
};
export default CustomButton;

35
apps/docs/src/components/templates/custom-pagination/index.tsx
View File

@ -1,35 +0,0 @@
import React from 'react';
import {
Pagination,
StyledPaginationHighlight,
StyledPaginationItemContent,
styled
} from '@nextui-org/react';
const StyledPagination = styled(Pagination, {
$$paginationItemSize: '60px',
$$paginationSize: '60px',
height: '$$paginationItemSize',
borderRadius: '2px',
'& .nextui-pagination-item': {
bg: 'linear-gradient(180deg, #6FEE8D 25%, #17c964 100%)',
width: '$$paginationItemSize',
height: '$$paginationItemSize'
},
[`& ${StyledPaginationHighlight}`]: {
display: 'none'
},
'.nextui-pagination-item-content': {
color: '$green900',
fontWeight: '$medium'
},
'.nextui-pagination-item-active span': {
color: '$green100'
}
});
const CustomPagination = () => {
return <StyledPagination noMargin total={20} size="xl" initialPage={10} />;
};
export default CustomPagination;

2
apps/docs/src/components/templates/index.ts
View File

@ -3,4 +3,4 @@ export { default as ExampleBlock } from './example-block';
export { default as UserTwitterCard } from './user-twitter-card';
export { default as SendButton } from './send-button';
export { default as Player } from './player';
export { default as CustomPagination } from './custom-pagination';
export { default as CustomButton } from './custom-button';

9
apps/docs/src/layouts/navbar.tsx
View File

@ -132,17 +132,16 @@ const Navbar: React.FC<Props> = ({ isHome, routes }) => {
</Link>
</NextLink>
<Spacer x={1} y={0} />
<NextLink href="#">
<NextLink href="/docs/components/button">
<Link
aria-disabled
className="navbar__disabled-link"
href="#"
title="Coming soon.."
className="navbar__link"
title="Components"
css={{
color: '$text'
}}
>
Contributors
Components
</Link>
</NextLink>
<Spacer x={1} y={0} />

23
apps/docs/src/pages/index.tsx
View File

@ -11,7 +11,7 @@ import {
Player,
BlockLink,
ThemeSwitch,
CustomPagination
CustomButton
} from '@components';
import NextLink from 'next/link';
import landingContent from '@content/landing';
@ -61,7 +61,7 @@ const IndexPage: React.FC<Props> = ({ routes, currentRoute }) => {
</Section>
{/* Comparation */}
<Spacer y={4} />
<Spacer y={8} />
<Section>
<Row justify="flex-start">
<Title>Do</Title>
@ -128,7 +128,7 @@ const IndexPage: React.FC<Props> = ({ routes, currentRoute }) => {
</Section>
{/* Dark mode */}
<Spacer y={4} />
<Spacer y={8} />
<Section>
<Row justify="flex-start">
<Title>Dark mode</Title>
@ -200,7 +200,7 @@ const IndexPage: React.FC<Props> = ({ routes, currentRoute }) => {
</Section>
{/* Customization */}
<Spacer y={4} />
<Spacer y={8} />
<Section>
<Row justify="flex-start">
<Title>Customization made</Title>
@ -244,14 +244,11 @@ const IndexPage: React.FC<Props> = ({ routes, currentRoute }) => {
<CodeDemo
showWindowIcons
language="jsx"
value={landingContent.darkModeCode}
value={landingContent.customizationCode}
css={{
minHeight: 300
maxHeight: 320
}}
/>
<NextLink href="/docs/theme/override-styles">
<BlockLink>Learn more</BlockLink>
</NextLink>
</Col>
</Grid>
<Grid
@ -267,11 +264,13 @@ const IndexPage: React.FC<Props> = ({ routes, currentRoute }) => {
<Col
css={{
dflex: 'center',
fd: 'column',
justifyContent: 'center'
fd: 'column'
}}
>
<CustomPagination />
<CustomButton />
<NextLink href="/docs/theme/override-styles">
<BlockLink color="green">Learn more</BlockLink>
</NextLink>
</Col>
</Grid>
</Grid.Container>

10
yarn.lock
View File

@ -3825,6 +3825,11 @@
dependencies:
magic-string "^0.25.0"
"@types/canvas-confetti@^1.4.2":
version "1.4.2"
resolved "https://registry.yarnpkg.com/@types/canvas-confetti/-/canvas-confetti-1.4.2.tgz#35c99fc904492fdcc6515c742509e04f3527211c"
integrity sha512-t45KUDHlwrD9PJVRHc5z1SlXhO82BQEgMKUXGEV1KnWLFMPA6Y5LfUsLTHHzH9KcKDHZLEiYYH5nIDcjRKWNTg==
"@types/cheerio@*":
version "0.22.30"
resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.30.tgz#6c1ded70d20d890337f0f5144be2c5e9ce0936e6"
@ -6030,6 +6035,11 @@ caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.300012
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001294.tgz#4849f27b101fd59ddee3751598c663801032533d"
integrity sha512-LiMlrs1nSKZ8qkNhpUf5KD0Al1KCBE3zaT7OLOwEkagXMEDij98SiOovn9wxVGQpklk9vVC/pUSqgYmkmKOS8g==
canvas-confetti@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/canvas-confetti/-/canvas-confetti-1.4.0.tgz#840f6db4a566f8f32abe28c00dcd82acf39c92bd"
integrity sha512-S18o4Y9PqI/uabdlT/jI3MY7XBJjNxnfapFIkjkMwpz6qNxLFZOm2b22OMf4ZYDL9lpNWI+Ih4fEMVPwO1KHFQ==
capture-exit@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"