mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(root): divider and kbd components added, docs in progress
This commit is contained in:
Junior Garcia
parent
535ac18ec7
commit
7c0c85b2e5
3
.npmrc
3
.npmrc
@ -1,4 +1,5 @@
|
||||
strict-peer-dependencies=false
|
||||
enable-pre-post-scripts=true
|
||||
public-hoist-pattern[]=*tailwind-variants*
|
||||
public-hoist-pattern[]=*@react-aria/interactions*
|
||||
public-hoist-pattern[]=*@react-aria/interactions*
|
||||
public-hoist-pattern[]=*@nextui-org/theme*
|
||||
38
apps/docs/.gitignore
vendored
38
apps/docs/.gitignore
vendored
@ -1 +1,37 @@
|
||||
sitemap.xml
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
sitemap.xml
|
||||
|
||||
# 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*
|
||||
|
||||
# local env files
|
||||
.env
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
36
apps/docs/README.md
Normal file
36
apps/docs/README.md
Normal file
@ -0,0 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
[http://localhost:3000/api/hello](http://localhost:3000/api/hello) is an endpoint that uses [Route Handlers](https://beta.nextjs.org/docs/routing/route-handlers). This endpoint can be edited in `app/api/hello/route.ts`.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
114
apps/docs/components/docs-navbar.tsx
Normal file
114
apps/docs/components/docs-navbar.tsx
Normal file
@ -0,0 +1,114 @@
|
||||
import {useState} from "react";
|
||||
import {
|
||||
Navbar,
|
||||
NavbarContent,
|
||||
NavbarMenu,
|
||||
NavbarMenuItem,
|
||||
NavbarMenuToggle,
|
||||
NavbarBrand,
|
||||
NavbarItem,
|
||||
Input,
|
||||
Link,
|
||||
Button,
|
||||
} from "@nextui-org/react";
|
||||
|
||||
import {NextUILogo, ThemeSwitch} from "@/components";
|
||||
import {TwitterIcon, GithubIcon, DiscordIcon, HeartFilledIcon} from "@/components/icons";
|
||||
|
||||
export const DocsNavbar = () => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState<boolean | undefined>(false);
|
||||
|
||||
const menuItems = [
|
||||
"Profile",
|
||||
"Dashboard",
|
||||
"Activity",
|
||||
"Analytics",
|
||||
"System",
|
||||
"Deployments",
|
||||
"My Settings",
|
||||
"Team Settings",
|
||||
"Help & Feedback",
|
||||
"Log Out",
|
||||
];
|
||||
|
||||
return (
|
||||
<Navbar maxWidth="xl" position="sticky" onMenuOpenChange={setIsMenuOpen}>
|
||||
<NavbarContent justify="start">
|
||||
<NavbarMenuToggle
|
||||
aria-label={isMenuOpen ? "Close menu" : "Open menu"}
|
||||
className="sm:hidden"
|
||||
/>
|
||||
<NavbarBrand>
|
||||
<NextUILogo />
|
||||
</NavbarBrand>
|
||||
</NavbarContent>
|
||||
<NavbarContent className="hidden sm:flex" justify="center">
|
||||
<NavbarItem as={Link} color="foreground" href="#">
|
||||
Docs
|
||||
</NavbarItem>
|
||||
<NavbarItem isActive as={Link} href="#">
|
||||
Components
|
||||
</NavbarItem>
|
||||
<NavbarItem as={Link} color="foreground" href="#">
|
||||
Showcase
|
||||
</NavbarItem>
|
||||
<NavbarItem as={Link} color="foreground" href="#">
|
||||
Figma
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
<NavbarContent justify="end">
|
||||
<NavbarItem className="flex gap-2">
|
||||
<Link isExternal href="https://twitter.com/getnextui">
|
||||
<TwitterIcon className="text-neutral-400" />
|
||||
</Link>
|
||||
<Link isExternal href="https://discord.gg/9b6yyZKmH4">
|
||||
<DiscordIcon className="text-neutral-400" />
|
||||
</Link>
|
||||
<Link isExternal href="https://github.com/nextui-org/nextui">
|
||||
<GithubIcon className="text-neutral-400" />
|
||||
</Link>
|
||||
<ThemeSwitch />
|
||||
</NavbarItem>
|
||||
<NavbarItem>
|
||||
<Input
|
||||
classNames={{
|
||||
input: "text-sm",
|
||||
}}
|
||||
labelPosition="outside"
|
||||
placeholder="Search..."
|
||||
onClear={() => {}}
|
||||
/>
|
||||
</NavbarItem>
|
||||
<NavbarItem>
|
||||
<Button
|
||||
isExternal
|
||||
as={Link}
|
||||
className="group text-sm font-normal text-neutral-600"
|
||||
href="https://patreon.com/jrgarciadev"
|
||||
startIcon={
|
||||
<HeartFilledIcon className="text-danger group-data-[hover=true]:animate-heartbeat" />
|
||||
}
|
||||
variant="flat"
|
||||
>
|
||||
Sponsor
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
<NavbarMenu>
|
||||
{menuItems.map((item, index) => (
|
||||
<NavbarMenuItem key={`${item}-${index}`}>
|
||||
<Link
|
||||
color={
|
||||
index === 2 ? "primary" : index === menuItems.length - 1 ? "danger" : "foreground"
|
||||
}
|
||||
href="#"
|
||||
size="lg"
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
</NavbarMenuItem>
|
||||
))}
|
||||
</NavbarMenu>
|
||||
</Navbar>
|
||||
);
|
||||
};
|
||||
21
apps/docs/components/icons/heart.tsx
Normal file
21
apps/docs/components/icons/heart.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import {IconSvgProps} from "@/types";
|
||||
|
||||
export const HeartFilledIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
height={size || height}
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width}
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
4
apps/docs/components/icons/index.ts
Normal file
4
apps/docs/components/icons/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export * from "./social";
|
||||
export * from "./moon";
|
||||
export * from "./sun";
|
||||
export * from "./heart";
|
||||
18
apps/docs/components/icons/moon.tsx
Normal file
18
apps/docs/components/icons/moon.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import {IconSvgProps} from "@/types";
|
||||
|
||||
export const MoonFilledIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
height={size || height}
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width}
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
40
apps/docs/components/icons/social.tsx
Normal file
40
apps/docs/components/icons/social.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import React from "react";
|
||||
|
||||
import {IconSvgProps} from "@/types";
|
||||
|
||||
const DiscordIcon: React.FC<IconSvgProps> = ({size = 24, width, height, ...props}) => {
|
||||
return (
|
||||
<svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
|
||||
<path
|
||||
d="M14.82 4.26a10.14 10.14 0 0 0-.53 1.1 14.66 14.66 0 0 0-4.58 0 10.14 10.14 0 0 0-.53-1.1 16 16 0 0 0-4.13 1.3 17.33 17.33 0 0 0-3 11.59 16.6 16.6 0 0 0 5.07 2.59A12.89 12.89 0 0 0 8.23 18a9.65 9.65 0 0 1-1.71-.83 3.39 3.39 0 0 0 .42-.33 11.66 11.66 0 0 0 10.12 0q.21.18.42.33a10.84 10.84 0 0 1-1.71.84 12.41 12.41 0 0 0 1.08 1.78 16.44 16.44 0 0 0 5.06-2.59 17.22 17.22 0 0 0-3-11.59 16.09 16.09 0 0 0-4.09-1.35zM8.68 14.81a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.93 1.93 0 0 1 1.8 2 1.93 1.93 0 0 1-1.8 2zm6.64 0a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.92 1.92 0 0 1 1.8 2 1.92 1.92 0 0 1-1.8 2z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const TwitterIcon: React.FC<IconSvgProps> = ({size = 24, width, height, ...props}) => {
|
||||
return (
|
||||
<svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
|
||||
<path
|
||||
d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const GithubIcon: React.FC<IconSvgProps> = ({size = 24, width, height, ...props}) => {
|
||||
return (
|
||||
<svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export {TwitterIcon, DiscordIcon, GithubIcon};
|
||||
18
apps/docs/components/icons/sun.tsx
Normal file
18
apps/docs/components/icons/sun.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import {IconSvgProps} from "@/types";
|
||||
|
||||
export const SunFilledIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
height={size || height}
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width}
|
||||
{...props}
|
||||
>
|
||||
<g fill="currentColor">
|
||||
<path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
|
||||
<path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
3
apps/docs/components/index.ts
Normal file
3
apps/docs/components/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export * from "./nextui-logo";
|
||||
export * from "./docs-navbar";
|
||||
export * from "./theme-switch";
|
||||
@ -1,72 +1,50 @@
|
||||
import React from "react";
|
||||
import {CSS, styled} from "@nextui-org/react";
|
||||
|
||||
export interface LogoProps {
|
||||
import {IconSvgProps} from "@/types";
|
||||
import {dataAttr} from "@/utils";
|
||||
|
||||
export interface LogoProps extends IconSvgProps {
|
||||
auto?: boolean;
|
||||
size?: number;
|
||||
width?: number;
|
||||
height?: number;
|
||||
small?: boolean;
|
||||
fill?: string;
|
||||
dark?: boolean;
|
||||
className?: string;
|
||||
css?: CSS;
|
||||
}
|
||||
|
||||
const StyledSmallLogo = styled("svg", {
|
||||
"& path": {fill: "$foreground"},
|
||||
variants: {
|
||||
auto: {
|
||||
true: {
|
||||
display: "none",
|
||||
"@mdMax": {
|
||||
display: "block",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const StyledLargeLogo = styled("svg", {
|
||||
display: "block",
|
||||
"& path": {fill: "$foreground"},
|
||||
variants: {
|
||||
auto: {
|
||||
true: {
|
||||
"@mdMax": {
|
||||
display: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const Logo: React.FC<LogoProps> = ({auto, size, width, height, small, css, ...props}) => {
|
||||
export const NextUILogo: React.FC<LogoProps> = ({
|
||||
auto = true,
|
||||
size,
|
||||
width,
|
||||
height,
|
||||
small,
|
||||
...props
|
||||
}) => {
|
||||
const Small = () => (
|
||||
<StyledSmallLogo
|
||||
auto={auto}
|
||||
className="logo__small"
|
||||
css={css}
|
||||
<svg
|
||||
className="data-[auto=true]:sm:hidden block text-foreground"
|
||||
data-auto={dataAttr(auto)}
|
||||
fill="currentColor"
|
||||
height={height || size || 25}
|
||||
viewBox="0 0 43 43"
|
||||
width={width || size || 25}
|
||||
{...props}
|
||||
>
|
||||
<path d="M32 43H11a10.928 10.928 0 01-7.778-3.222A10.928 10.928 0 010 32V11a10.928 10.928 0 013.222-7.778A10.928 10.928 0 0111 0h21a10.929 10.929 0 017.779 3.222A10.927 10.927 0 0143 11v21a10.927 10.927 0 01-3.222 7.778A10.929 10.929 0 0132 43zM11.314 12.293v12.033a6.35 6.35 0 00.87 3.31 6.243 6.243 0 002.422 2.3 7.458 7.458 0 003.595.843 7.474 7.474 0 003.6-.839 6.2 6.2 0 002.418-2.3 6.381 6.381 0 00.869-3.315V12.292h-1.659V24.21a5.149 5.149 0 01-.643 2.578 4.6 4.6 0 01-1.824 1.779 5.668 5.668 0 01-2.759.648 5.646 5.646 0 01-2.756-.648 4.64 4.64 0 01-1.823-1.779 5.116 5.116 0 01-.648-2.578V12.292zm18.6 0v18.175h1.66V12.293z" />
|
||||
</StyledSmallLogo>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const Large = () => (
|
||||
<StyledLargeLogo
|
||||
auto={auto}
|
||||
className="logo__large"
|
||||
<svg
|
||||
className="data-[auto=true]:hidden data-[auto=true]:sm:block block text-foreground"
|
||||
data-auto={dataAttr(auto)}
|
||||
fill="currentColor"
|
||||
height={24.48}
|
||||
viewBox="0 0 100 24.48"
|
||||
width={100}
|
||||
{...props}
|
||||
>
|
||||
<path d="M18.745 0v24.069h-2.139L2.386 3.914h-.188v20.155H0V0h2.127l14.267 20.179h.188V0zm13.256 24.445a7.934 7.934 0 01-4.371-1.181 7.79 7.79 0 01-2.85-3.279 11.069 11.069 0 01-1-4.836 11.2 11.2 0 011-4.848 8.1 8.1 0 012.785-3.326 7.175 7.175 0 014.119-1.2 7.689 7.689 0 012.832.535 7.042 7.042 0 012.45 1.634 7.836 7.836 0 011.722 2.756 11.015 11.015 0 01.635 3.931v1.034h-12.1V13.82h9.963a6.882 6.882 0 00-.7-3.132 5.55 5.55 0 00-1.939-2.2 5.11 5.11 0 00-2.862-.811 5.121 5.121 0 00-3.02.917 6.251 6.251 0 00-2.039 2.421 7.513 7.513 0 00-.746 3.291v1.1a8.822 8.822 0 00.746 3.755 5.751 5.751 0 002.124 2.487 5.9 5.9 0 003.255.881 5.873 5.873 0 002.251-.4 4.843 4.843 0 001.634-1.075 4.729 4.729 0 001-1.487l1.986.646a5.885 5.885 0 01-1.346 2.1 6.889 6.889 0 01-2.327 1.545 8.251 8.251 0 01-3.202.587zm12.74-18.428l4.654 7.7 4.654-7.7h2.433l-5.806 9.026 5.806 9.026H54.05l-4.654-7.451-4.655 7.451H42.32l5.735-9.026-5.735-9.026zm23.246 0v1.822h-8.615V6.017zm-5.923-4.325h2.1v17.664a3.414 3.414 0 00.388 1.769 2.159 2.159 0 001.011.9 3.363 3.363 0 001.328.264 4.045 4.045 0 00.705-.053q.294-.053.517-.112l.447 1.892a5.433 5.433 0 01-.752.217 5.162 5.162 0 01-1.1.1 5.1 5.1 0 01-2.215-.505 4.337 4.337 0 01-1.743-1.499 4.3 4.3 0 01-.682-2.48zM89.211 0h2.2v15.936a8.411 8.411 0 01-1.152 4.389 8.18 8.18 0 01-3.2 3.044 9.854 9.854 0 01-4.77 1.111 9.82 9.82 0 01-4.76-1.116 8.225 8.225 0 01-3.208-3.044 8.379 8.379 0 01-1.152-4.384V0h2.2v15.783a6.747 6.747 0 00.858 3.414 6.13 6.13 0 002.415 2.356 7.444 7.444 0 003.649.858 7.478 7.478 0 003.655-.858 6.08 6.08 0 002.413-2.353 6.784 6.784 0 00.852-3.414zM100 0v24.069h-2.2V0z" />
|
||||
</StyledLargeLogo>
|
||||
</svg>
|
||||
);
|
||||
|
||||
if (auto) {
|
||||
@ -84,5 +62,3 @@ const Logo: React.FC<LogoProps> = ({auto, size, width, height, small, css, ...pr
|
||||
|
||||
return <Large />;
|
||||
};
|
||||
|
||||
export default Logo;
|
||||
57
apps/docs/components/theme-switch.tsx
Normal file
57
apps/docs/components/theme-switch.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import {FC, useState, useEffect} from "react";
|
||||
import {VisuallyHidden} from "@react-aria/visually-hidden";
|
||||
import {useSwitch} from "@nextui-org/react";
|
||||
import {useTheme} from "next-themes";
|
||||
|
||||
import {SunFilledIcon, MoonFilledIcon} from "@/components/icons";
|
||||
|
||||
export const ThemeSwitch: FC<{}> = () => {
|
||||
const {theme, setTheme} = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
const onChange = () => {
|
||||
theme === "light" ? setTheme("dark") : setTheme("light");
|
||||
};
|
||||
|
||||
const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} = useSwitch({
|
||||
onChange,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return <div className="w-6 h-6" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Component
|
||||
{...getBaseProps({
|
||||
className: "px-px transition-opacity hover:opacity-80 cursor-pointer",
|
||||
})}
|
||||
>
|
||||
<VisuallyHidden>
|
||||
<input {...getInputProps()} />
|
||||
</VisuallyHidden>
|
||||
<div
|
||||
{...getWrapperProps()}
|
||||
className={slots.wrapper({
|
||||
class: [
|
||||
"w-auto h-auto",
|
||||
"bg-transparent",
|
||||
"rounded-lg",
|
||||
"flex items-center justify-center",
|
||||
"group-data-[checked=true]:bg-transparent",
|
||||
"!text-neutral-400",
|
||||
"pt-px",
|
||||
"px-0",
|
||||
"mx-0",
|
||||
],
|
||||
})}
|
||||
>
|
||||
{isSelected ? <MoonFilledIcon size={22} /> : <SunFilledIcon size={22} />}
|
||||
</div>
|
||||
</Component>
|
||||
);
|
||||
};
|
||||
@ -1,64 +0,0 @@
|
||||
const App = `import { Avatar, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
|
||||
color="primary"
|
||||
bordered
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
|
||||
color="secondary"
|
||||
bordered
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026702d"
|
||||
color="success"
|
||||
bordered
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a048581f4e29026701d"
|
||||
color="warning"
|
||||
bordered
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a092581d4ef9026700d"
|
||||
color="error"
|
||||
bordered
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e25056704b"
|
||||
color="gradient"
|
||||
bordered
|
||||
/>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,52 +0,0 @@
|
||||
const App = `import { Avatar, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Avatar
|
||||
text="Primary"
|
||||
color="primary"
|
||||
textColor="white" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
text="Secondary"
|
||||
color="secondary"
|
||||
textColor="white" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
text="S"
|
||||
color="success"
|
||||
textColor="white" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
text="Warn"
|
||||
color="warning"
|
||||
textColor="white" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
text="Err"
|
||||
color="error"
|
||||
textColor="white" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
text="Grad"
|
||||
color="gradient"
|
||||
textColor="white" />
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,46 +0,0 @@
|
||||
const App = `import { Avatar, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Avatar
|
||||
squared
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
squared
|
||||
text="Junior" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
squared
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
squared
|
||||
text="Jane" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
squared
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
squared
|
||||
text="Joe" />
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,46 +0,0 @@
|
||||
const App = `import { Avatar, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const nameUsers = ["Junior", "Jane", "W", "John", "JR"];
|
||||
const pictureUsers = [
|
||||
"https://i.pravatar.cc/150?u=a042581f4e29026024d",
|
||||
"https://i.pravatar.cc/150?u=a042581f4e29026704d",
|
||||
"https://i.pravatar.cc/150?u=a04258114e29026702d",
|
||||
"https://i.pravatar.cc/150?u=a048581f4e29026701d",
|
||||
"https://i.pravatar.cc/150?u=a092581d4ef9026700d",
|
||||
];
|
||||
return (
|
||||
<Grid.Container gap={1}>
|
||||
<Grid xs={12}>
|
||||
<Avatar.Group count={12}>
|
||||
{nameUsers.map((name, index) => (
|
||||
<Avatar key={index} size="lg" pointer text={name} stacked />
|
||||
))}
|
||||
</Avatar.Group>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Avatar.Group count={12}>
|
||||
{pictureUsers.map((url, index) => (
|
||||
<Avatar
|
||||
key={index}
|
||||
size="lg"
|
||||
pointer
|
||||
src={url}
|
||||
bordered
|
||||
color="gradient"
|
||||
stacked
|
||||
/>
|
||||
))}
|
||||
</Avatar.Group>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,263 +0,0 @@
|
||||
const SunIcon = `export const SunIcon = ({
|
||||
fill = "currentColor",
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
if (filled) {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<g fill={fill}>
|
||||
<path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
|
||||
<path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19H12.998V22H10.998zM10.998 2H12.998V5H10.998zM1.998 11H4.998V13H1.998zM18.998 11H21.998V13H18.998z"
|
||||
></path>
|
||||
<path
|
||||
fill={fill}
|
||||
transform="rotate(-45.017 5.986 18.01)"
|
||||
d="M4.487 17.01H7.487V19.01H4.487z"
|
||||
></path>
|
||||
<path
|
||||
fill={fill}
|
||||
transform="rotate(-45.001 18.008 5.99)"
|
||||
d="M16.508 4.99H19.509V6.99H16.508z"
|
||||
></path>
|
||||
<path
|
||||
fill={fill}
|
||||
transform="rotate(-134.983 5.988 5.99)"
|
||||
d="M4.487 4.99H7.487V6.99H4.487z"
|
||||
></path>
|
||||
<path
|
||||
fill={fill}
|
||||
transform="rotate(134.999 18.008 18.01)"
|
||||
d="M17.008 16.51H19.008V19.511000000000003H17.008z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const MoonIcon = `export const MoonIcon = ({
|
||||
fill = "currentColor",
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
if (filled) {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M20.742,13.045c-0.677,0.18-1.376,0.271-2.077,0.271c-2.135,0-4.14-0.83-5.646-2.336c-2.008-2.008-2.799-4.967-2.064-7.723 c0.092-0.345-0.007-0.713-0.259-0.965C10.444,2.04,10.077,1.938,9.73,2.034C8.028,2.489,6.476,3.382,5.241,4.616 c-3.898,3.898-3.898,10.243,0,14.143c1.889,1.889,4.401,2.93,7.072,2.93c2.671,0,5.182-1.04,7.07-2.929 c1.236-1.237,2.13-2.791,2.583-4.491c0.092-0.345-0.008-0.713-0.26-0.965C21.454,13.051,21.085,12.951,20.742,13.045z M17.97,17.346c-1.511,1.511-3.52,2.343-5.656,2.343c-2.137,0-4.146-0.833-5.658-2.344c-3.118-3.119-3.118-8.195,0-11.314 c0.602-0.602,1.298-1.102,2.06-1.483c-0.222,2.885,0.814,5.772,2.89,7.848c2.068,2.069,4.927,3.12,7.848,2.891 C19.072,16.046,18.571,16.743,17.97,17.346z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const VideoIcon = `export const VideoIcon = ({
|
||||
fill = "currentColor",
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
if (filled) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M18,7c0-1.103-0.897-2-2-2H4C2.897,5,2,5.897,2,7v10c0,1.103,0.897,2,2,2h12c1.103,0,2-0.897,2-2v-3.333L22,17V7l-4,3.333 V7z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M18,7c0-1.103-0.897-2-2-2H4C2.897,5,2,5.897,2,7v10c0,1.103,0.897,2,2,2h12c1.103,0,2-0.897,2-2v-3.333L22,17V7l-4,3.333 V7z M16.002,17H4V7h12l0.001,4.999L16,12l0.001,0.001L16.002,17z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const VolumeUpIcon = `export const VolumeUpIcon = ({
|
||||
fill = "currentColor",
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M16,21c3.527-1.547,5.999-4.909,5.999-9S19.527,4.547,16,3v2c2.387,1.386,3.999,4.047,3.999,7S18.387,17.614,16,19V21z"
|
||||
></path>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M16 7v10c1.225-1.1 2-3.229 2-5S17.225 8.1 16 7zM4 17h2.697L14 21.868V2.132L6.697 7H4C2.897 7 2 7.897 2 9v6C2 16.103 2.897 17 4 17z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const MicrophoneIcon = `export const MicrophoneIcon = ({
|
||||
fill = "currentColor",
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
if (filled) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M12,16c2.206,0,4-1.794,4-4V6c0-2.217-1.785-4.021-3.979-4.021c-0.069,0-0.14,0.009-0.209,0.025C9.693,2.104,8,3.857,8,6v6 C8,14.206,9.794,16,12,16z"
|
||||
/>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M11,19.931V22h2v-2.069c3.939-0.495,7-3.858,7-7.931h-2c0,3.309-2.691,6-6,6s-6-2.691-6-6H4 C4,16.072,7.061,19.436,11,19.931z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M16,12V6c0-2.217-1.785-4.021-3.979-4.021c-0.069,0-0.14,0.009-0.209,0.025C9.693,2.104,8,3.857,8,6v6c0,2.206,1.794,4,4,4 S16,14.206,16,12z M10,12V6c0-1.103,0.897-2,2-2c0.055,0,0.109-0.005,0.163-0.015C13.188,4.06,14,4.935,14,6v6c0,1.103-0.897,2-2,2 S10,13.103,10,12z"
|
||||
></path>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M6,12H4c0,4.072,3.061,7.436,7,7.931V22h2v-2.069c3.939-0.495,7-3.858,7-7.931h-2c0,3.309-2.691,6-6,6S6,15.309,6,12z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const AppJs = `import { Grid, Avatar } from "@nextui-org/react";
|
||||
import { SunIcon } from "./SunIcon";
|
||||
import { MoonIcon } from "./MoonIcon";
|
||||
import { VideoIcon } from "./VideoIcon";
|
||||
import { VolumeUpIcon } from "./VolumeUpIcon";
|
||||
import { MicrophoneIcon } from "./MicrophoneIcon";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2} css={{ color: "$text" }}>
|
||||
<Grid>
|
||||
<Avatar squared icon={<SunIcon size={20} fill="currentColor" />} />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar squared icon={<MoonIcon size={20} fill="currentColor" />} />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar squared icon={<VideoIcon size={20} fill="currentColor" />} />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar squared icon={<VolumeUpIcon size={20} fill="currentColor" />} />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
squared
|
||||
icon={<MicrophoneIcon size={20} fill="currentColor" />}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/SunIcon.js": SunIcon,
|
||||
"/MoonIcon.js": MoonIcon,
|
||||
"/VideoIcon.js": VideoIcon,
|
||||
"/VolumeUpIcon.js": VolumeUpIcon,
|
||||
"/MicrophoneIcon.js": MicrophoneIcon,
|
||||
"/App.js": AppJs,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,19 +0,0 @@
|
||||
import default_avatar from "./default";
|
||||
import size from "./size";
|
||||
import color from "./color";
|
||||
import bordered from "./bordered";
|
||||
import zoomed from "./zoomed";
|
||||
import squared from "./squared";
|
||||
import icon from "./icon";
|
||||
import group from "./group";
|
||||
|
||||
export default {
|
||||
default_avatar,
|
||||
size,
|
||||
color,
|
||||
bordered,
|
||||
zoomed,
|
||||
squared,
|
||||
icon,
|
||||
group,
|
||||
};
|
||||
@ -1,43 +0,0 @@
|
||||
const App = `import { Avatar, Grid } from '@nextui-org/react';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Avatar text="JR" size="xs" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
|
||||
size="sm"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar text="Joe" size="md" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
|
||||
size="lg"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar text="John" size="xl" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026702d"
|
||||
css={{ size: "$20" }}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,70 +0,0 @@
|
||||
const App = `import { Avatar, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
|
||||
color="primary"
|
||||
bordered
|
||||
squared
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
|
||||
color="secondary"
|
||||
bordered
|
||||
squared
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026702d"
|
||||
color="success"
|
||||
bordered
|
||||
squared
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a048581f4e29026701d"
|
||||
color="warning"
|
||||
bordered
|
||||
squared
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a092581d4ef9026700d"
|
||||
color="error"
|
||||
bordered
|
||||
squared
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e25056704b"
|
||||
color="gradient"
|
||||
bordered
|
||||
squared
|
||||
/>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,65 +0,0 @@
|
||||
const App = `import { Avatar, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
|
||||
zoomed
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
|
||||
zoomed
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026702d"
|
||||
zoomed
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a048581f4e29026701d"
|
||||
zoomed
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a092581d4ef9026700d"
|
||||
zoomed
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e25056704b"
|
||||
zoomed
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e290888704d"
|
||||
zoomed
|
||||
/>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,62 +0,0 @@
|
||||
const NotificationIcon = `export const NotificationIcon = ({
|
||||
fill = "currentColor",
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M19.3399 14.49L18.3399 12.83C18.1299 12.46 17.9399 11.76 17.9399 11.35V8.82C17.9399 6.47 16.5599 4.44 14.5699 3.49C14.0499 2.57 13.0899 2 11.9899 2C10.8999 2 9.91994 2.59 9.39994 3.52C7.44994 4.49 6.09994 6.5 6.09994 8.82V11.35C6.09994 11.76 5.90994 12.46 5.69994 12.82L4.68994 14.49C4.28994 15.16 4.19994 15.9 4.44994 16.58C4.68994 17.25 5.25994 17.77 5.99994 18.02C7.93994 18.68 9.97994 19 12.0199 19C14.0599 19 16.0999 18.68 18.0399 18.03C18.7399 17.8 19.2799 17.27 19.5399 16.58C19.7999 15.89 19.7299 15.13 19.3399 14.49Z"
|
||||
fill={fill}
|
||||
/>
|
||||
<path
|
||||
d="M14.8297 20.01C14.4097 21.17 13.2997 22 11.9997 22C11.2097 22 10.4297 21.68 9.87969 21.11C9.55969 20.81 9.31969 20.41 9.17969 20C9.30969 20.02 9.43969 20.03 9.57969 20.05C9.80969 20.08 10.0497 20.11 10.2897 20.13C10.8597 20.18 11.4397 20.21 12.0197 20.21C12.5897 20.21 13.1597 20.18 13.7197 20.13C13.9297 20.11 14.1397 20.1 14.3397 20.07C14.4997 20.05 14.6597 20.03 14.8297 20.01Z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const App = `import { Badge, Grid, styled } from "@nextui-org/react";
|
||||
import { NotificationIcon } from "./NotificationIcon";
|
||||
|
||||
const StyledButton = styled("button", {
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
'&:active': {
|
||||
opacity: 0.8,
|
||||
}
|
||||
});
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container alignItems="center" gap={2}>
|
||||
<Grid>
|
||||
<StyledButton aria-label="more than 99 notifications">
|
||||
<Badge color="error" content="99+" shape="circle">
|
||||
<NotificationIcon fill="currentColor" size={30} />
|
||||
</Badge>
|
||||
</StyledButton>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
"/NotificationIcon.js": NotificationIcon,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,44 +0,0 @@
|
||||
const App = `import { Badge, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Badge variant="bordered">Neutral</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="primary" variant="bordered">
|
||||
Primary
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="secondary" variant="bordered">
|
||||
Secondary
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="success" variant="bordered">
|
||||
Success
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="warning" variant="bordered">
|
||||
Warning
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" variant="bordered">
|
||||
Error
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,34 +0,0 @@
|
||||
const App = `import { Badge, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Badge>Neutral</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="primary">Primary</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="secondary">Secondary</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="success">Success</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="warning">Warning</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error">Error</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,79 +0,0 @@
|
||||
const CheckIcon = `export const CheckIcon = ({
|
||||
fill = "currentColor",
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 18}
|
||||
height={size || height || 18}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M7.75 11.9999L10.58 14.8299L16.25 9.16992"
|
||||
stroke={fill}
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const App = `import { Badge, Avatar, Grid } from "@nextui-org/react";
|
||||
import { CheckIcon } from "./CheckIcon";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Badge
|
||||
color="success"
|
||||
shape="rectangle"
|
||||
content={<CheckIcon width={24} height={24} />}
|
||||
css={{ p: "0" }}
|
||||
horizontalOffset="45%"
|
||||
verticalOffset="45%"
|
||||
>
|
||||
<Avatar
|
||||
squared
|
||||
bordered
|
||||
size="lg"
|
||||
color="success"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge
|
||||
content={<CheckIcon />}
|
||||
css={{ p: 0 }}
|
||||
shape="circle"
|
||||
placement="bottom-right"
|
||||
horizontalOffset="35%"
|
||||
verticalOffset="-10%"
|
||||
size="xs"
|
||||
>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
"/CheckIcon.js": CheckIcon,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,60 +0,0 @@
|
||||
const App = `import { Badge, Avatar, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Badge color="error" content={5}>
|
||||
<Avatar
|
||||
bordered
|
||||
squared
|
||||
color="primary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-right">
|
||||
<Avatar
|
||||
bordered
|
||||
squared
|
||||
color="primary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="top-left">
|
||||
<Avatar
|
||||
bordered
|
||||
squared
|
||||
color="primary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-left">
|
||||
<Avatar
|
||||
bordered
|
||||
squared
|
||||
color="primary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,33 +0,0 @@
|
||||
const App = `import { Badge, Avatar, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} shape="rectangle">
|
||||
<Avatar
|
||||
squared
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} shape="circle">
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,116 +0,0 @@
|
||||
const NotificationIcon = `export const NotificationIcon = ({
|
||||
fill = "currentColor",
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M19.3399 14.49L18.3399 12.83C18.1299 12.46 17.9399 11.76 17.9399 11.35V8.82C17.9399 6.47 16.5599 4.44 14.5699 3.49C14.0499 2.57 13.0899 2 11.9899 2C10.8999 2 9.91994 2.59 9.39994 3.52C7.44994 4.49 6.09994 6.5 6.09994 8.82V11.35C6.09994 11.76 5.90994 12.46 5.69994 12.82L4.68994 14.49C4.28994 15.16 4.19994 15.9 4.44994 16.58C4.68994 17.25 5.25994 17.77 5.99994 18.02C7.93994 18.68 9.97994 19 12.0199 19C14.0599 19 16.0999 18.68 18.0399 18.03C18.7399 17.8 19.2799 17.27 19.5399 16.58C19.7999 15.89 19.7299 15.13 19.3399 14.49Z"
|
||||
fill={fill}
|
||||
/>
|
||||
<path
|
||||
d="M14.8297 20.01C14.4097 21.17 13.2997 22 11.9997 22C11.2097 22 10.4297 21.68 9.87969 21.11C9.55969 20.81 9.31969 20.41 9.17969 20C9.30969 20.02 9.43969 20.03 9.57969 20.05C9.80969 20.08 10.0497 20.11 10.2897 20.13C10.8597 20.18 11.4397 20.21 12.0197 20.21C12.5897 20.21 13.1597 20.18 13.7197 20.13C13.9297 20.11 14.1397 20.1 14.3397 20.07C14.4997 20.05 14.6597 20.03 14.8297 20.01Z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const CartIcon = `export const CartIcon = ({
|
||||
fill = "currentColor",
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M16.25 22.5C17.2165 22.5 18 21.7165 18 20.75C18 19.7835 17.2165 19 16.25 19C15.2835 19 14.5 19.7835 14.5 20.75C14.5 21.7165 15.2835 22.5 16.25 22.5Z"
|
||||
fill={fill}
|
||||
/>
|
||||
<path
|
||||
d="M8.25 22.5C9.2165 22.5 10 21.7165 10 20.75C10 19.7835 9.2165 19 8.25 19C7.2835 19 6.5 19.7835 6.5 20.75C6.5 21.7165 7.2835 22.5 8.25 22.5Z"
|
||||
fill={fill}
|
||||
/>
|
||||
<path
|
||||
d="M4.84 3.94L4.64 6.39C4.6 6.86 4.97 7.25 5.44 7.25H20.75C21.17 7.25 21.52 6.93 21.55 6.51C21.68 4.74 20.33 3.3 18.56 3.3H6.27C6.17 2.86 5.97 2.44 5.66 2.09C5.16 1.56 4.46 1.25 3.74 1.25H2C1.59 1.25 1.25 1.59 1.25 2C1.25 2.41 1.59 2.75 2 2.75H3.74C4.05 2.75 4.34 2.88 4.55 3.1C4.76 3.33 4.86 3.63 4.84 3.94Z"
|
||||
fill={fill}
|
||||
/>
|
||||
<path
|
||||
d="M20.5101 8.75H5.17005C4.75005 8.75 4.41005 9.07 4.37005 9.48L4.01005 13.83C3.87005 15.54 5.21005 17 6.92005 17H18.0401C19.5401 17 20.8601 15.77 20.9701 14.27L21.3001 9.6C21.3401 9.14 20.9801 8.75 20.5101 8.75Z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const App = `import React from "react";
|
||||
import { Badge, Grid, Row, Switch, Text } from "@nextui-org/react";
|
||||
import { NotificationIcon } from './NotificationIcon';
|
||||
import { CartIcon } from './CartIcon';
|
||||
|
||||
export default function App() {
|
||||
const [isInvisible, setIsInvisible] = React.useState(false);
|
||||
|
||||
return (
|
||||
<Grid.Container alignItems="center" gap={2}>
|
||||
<Grid>
|
||||
<Badge
|
||||
color="error"
|
||||
content={5}
|
||||
isInvisible={isInvisible}
|
||||
shape="circle"
|
||||
>
|
||||
<NotificationIcon fill="currentColor" size={30} />
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge
|
||||
color="error"
|
||||
content="9+"
|
||||
isInvisible={isInvisible}
|
||||
shape="circle"
|
||||
>
|
||||
<CartIcon fill="currentColor" size={30} />
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Row align="center">
|
||||
<Switch
|
||||
initialChecked
|
||||
onChange={(ev) => setIsInvisible(!ev.target.checked)}
|
||||
/>
|
||||
<Text css={{ ml: "$3" }}>Show badge</Text>
|
||||
</Row>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
"/NotificationIcon.js": NotificationIcon,
|
||||
"/CartIcon.js": CartIcon,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,160 +0,0 @@
|
||||
const CheckIcon = `export const CheckIcon = ({
|
||||
fill = "currentColor",
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 18}
|
||||
height={size || height || 18}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M7.75 11.9999L10.58 14.8299L16.25 9.16992"
|
||||
stroke={fill}
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const NotificationIcon = `export const NotificationIcon = ({
|
||||
fill = "currentColor",
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M19.3399 14.49L18.3399 12.83C18.1299 12.46 17.9399 11.76 17.9399 11.35V8.82C17.9399 6.47 16.5599 4.44 14.5699 3.49C14.0499 2.57 13.0899 2 11.9899 2C10.8999 2 9.91994 2.59 9.39994 3.52C7.44994 4.49 6.09994 6.5 6.09994 8.82V11.35C6.09994 11.76 5.90994 12.46 5.69994 12.82L4.68994 14.49C4.28994 15.16 4.19994 15.9 4.44994 16.58C4.68994 17.25 5.25994 17.77 5.99994 18.02C7.93994 18.68 9.97994 19 12.0199 19C14.0599 19 16.0999 18.68 18.0399 18.03C18.7399 17.8 19.2799 17.27 19.5399 16.58C19.7999 15.89 19.7299 15.13 19.3399 14.49Z"
|
||||
fill={fill}
|
||||
/>
|
||||
<path
|
||||
d="M14.8297 20.01C14.4097 21.17 13.2997 22 11.9997 22C11.2097 22 10.4297 21.68 9.87969 21.11C9.55969 20.81 9.31969 20.41 9.17969 20C9.30969 20.02 9.43969 20.03 9.57969 20.05C9.80969 20.08 10.0497 20.11 10.2897 20.13C10.8597 20.18 11.4397 20.21 12.0197 20.21C12.5897 20.21 13.1597 20.18 13.7197 20.13C13.9297 20.11 14.1397 20.1 14.3397 20.07C14.4997 20.05 14.6597 20.03 14.8297 20.01Z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const App = `import { Badge, Avatar, Grid } from "@nextui-org/react";
|
||||
import { NotificationIcon } from "./NotificationIcon"
|
||||
import { CheckIcon } from "./CheckIcon";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Badge color="error" content={5}>
|
||||
<Avatar
|
||||
bordered
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge
|
||||
content=""
|
||||
color="success"
|
||||
placement="bottom-right"
|
||||
shape="circle"
|
||||
variant="dot"
|
||||
size="md"
|
||||
>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge
|
||||
content=""
|
||||
isSquared
|
||||
color="primary"
|
||||
placement="bottom-right"
|
||||
variant="points"
|
||||
size="md"
|
||||
>
|
||||
<Avatar
|
||||
squared
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026702d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge content="new" color="error" placement="top-right" size="xs">
|
||||
<Avatar
|
||||
bordered
|
||||
squared
|
||||
size="lg"
|
||||
color="error"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge
|
||||
content={<CheckIcon />}
|
||||
color="success"
|
||||
css={{ p: 0 }}
|
||||
placement="bottom-right"
|
||||
size="xs"
|
||||
>
|
||||
<Avatar
|
||||
bordered
|
||||
squared
|
||||
size="lg"
|
||||
color="success"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge
|
||||
content={<NotificationIcon fill="currentColor" size={12} />}
|
||||
css={{p: "$2"}}
|
||||
color="error"
|
||||
placement="top-right"
|
||||
shape="circle"
|
||||
size="md"
|
||||
>
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026704f"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
"/CheckIcon.js": CheckIcon,
|
||||
"/NotificationIcon.js": NotificationIcon,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,13 +0,0 @@
|
||||
const App = `import { Badge } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return <Badge>DEFAULT</Badge>;
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,33 +0,0 @@
|
||||
const App = `import { Badge, Avatar, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} shape="rectangle" size="md">
|
||||
<Avatar
|
||||
squared
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge disableOutline color="error" content={5} shape="circle" size="md">
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,40 +0,0 @@
|
||||
const App = `import { Badge, Text, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={0.5}>
|
||||
<Grid xs={12} alignItems="center">
|
||||
<Badge variant="dot" />
|
||||
<Text css={{ ml: "$2" }}>Default</Text>
|
||||
</Grid>
|
||||
<Grid xs={12} alignItems="center">
|
||||
<Badge color="primary" variant="dot" />
|
||||
<Text css={{ ml: "$2" }}>Primary</Text>
|
||||
</Grid>
|
||||
<Grid xs={12} alignItems="center">
|
||||
<Badge color="secondary" variant="dot" />
|
||||
<Text css={{ ml: "$2" }}>Secondary</Text>
|
||||
</Grid>
|
||||
<Grid xs={12} alignItems="center">
|
||||
<Badge color="success" variant="dot" />
|
||||
<Text css={{ ml: "$2" }}>Success</Text>
|
||||
</Grid>
|
||||
<Grid xs={12} alignItems="center">
|
||||
<Badge color="warning" variant="dot" />
|
||||
<Text css={{ ml: "$2" }}>Warning</Text>
|
||||
</Grid>
|
||||
<Grid xs={12} alignItems="center">
|
||||
<Badge color="error" variant="dot" />
|
||||
<Text css={{ ml: "$2" }}>Error</Text>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,44 +0,0 @@
|
||||
const App = `import { Badge, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Badge variant="flat">Neutral</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="primary" variant="flat">
|
||||
Primary
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="secondary" variant="flat">
|
||||
Secondary
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="success" variant="flat">
|
||||
Success
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="warning" variant="flat">
|
||||
Warning
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" variant="flat">
|
||||
Error
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,35 +0,0 @@
|
||||
import defaultBadge from "./default";
|
||||
import sizesBadge from "./sizes";
|
||||
import colorsBadge from "./colors";
|
||||
import shadowBadge from "./shadow";
|
||||
import dotBadge from "./dot";
|
||||
import pointsBadge from "./points";
|
||||
import borderedBadge from "./bordered";
|
||||
import flatBadge from "./flat";
|
||||
import squaredBadge from "./squared";
|
||||
import contentBadge from "./content";
|
||||
import contentPlacementsBadge from "./content-placements";
|
||||
import contentShapeBadge from "./content-shape";
|
||||
import contentVisibilityBadge from "./content-visibility";
|
||||
import contentOffset from "./content-offset";
|
||||
import disableOutline from "./disable-outline";
|
||||
import a11y from "./a11y";
|
||||
|
||||
export default {
|
||||
defaultBadge,
|
||||
sizesBadge,
|
||||
colorsBadge,
|
||||
shadowBadge,
|
||||
dotBadge,
|
||||
pointsBadge,
|
||||
borderedBadge,
|
||||
flatBadge,
|
||||
squaredBadge,
|
||||
contentBadge,
|
||||
contentPlacementsBadge,
|
||||
contentShapeBadge,
|
||||
contentVisibilityBadge,
|
||||
contentOffset,
|
||||
disableOutline,
|
||||
a11y,
|
||||
};
|
||||
@ -1,34 +0,0 @@
|
||||
const App = `import { Badge, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Badge variant="points" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="primary" variant="points" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="secondary" variant="points" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="success" variant="points" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="warning" variant="points" />
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" variant="points" />
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,46 +0,0 @@
|
||||
const App = `import { Badge, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Badge enableShadow disableOutline>
|
||||
Neutral
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge enableShadow disableOutline color="primary">
|
||||
Primary
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge enableShadow disableOutline color="secondary">
|
||||
Secondary
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge enableShadow disableOutline color="success">
|
||||
Success
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge enableShadow disableOutline color="warning">
|
||||
Warning
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge enableShadow disableOutline color="error">
|
||||
Error
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,82 +0,0 @@
|
||||
const App = `import { Badge, Avatar, Spacer, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container>
|
||||
<Grid.Container alignItems="center" gap={1}>
|
||||
<Grid>
|
||||
<Badge size="xs">New (xs)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="sm">New (sm)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="md">New (md)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="lg">New (lg)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="xl">New (xl)</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<Spacer y={0.5} />
|
||||
<Grid.Container gap={1}>
|
||||
<Grid>
|
||||
<Badge disableOutline content="xs" size="xs">
|
||||
<Avatar
|
||||
squared
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge disableOutline content="sm" size="sm">
|
||||
<Avatar
|
||||
squared
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge disableOutline content="md" size="md">
|
||||
<Avatar
|
||||
squared
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge disableOutline content="lg" size="lg">
|
||||
<Avatar
|
||||
squared
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge disableOutline content="xl" size="xl">
|
||||
<Avatar
|
||||
squared
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267071"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
</Grid.Container>
|
||||
);
|
||||
}
|
||||
`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,44 +0,0 @@
|
||||
const App = `import { Badge, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Badge isSquared>Neutral</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge isSquared color="primary" variant="bordered">
|
||||
Primary
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge isSquared color="secondary" variant="flat">
|
||||
Secondary
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge isSquared color="success">
|
||||
Success
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge isSquared color="warning" variant="bordered">
|
||||
Warning
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge isSquared color="error" variant="flat">
|
||||
Error
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,19 +0,0 @@
|
||||
const App = `import { Button } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Button.Group>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,19 +0,0 @@
|
||||
const App = `import { Button } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Button.Group size="sm" disabled>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,15 +0,0 @@
|
||||
import defaultButtonGroup from "./default";
|
||||
import disabledButtonGroup from "./disabled";
|
||||
import loading from "./loading";
|
||||
import sizes from "./sizes";
|
||||
import vertical from "./vertical";
|
||||
import variants from "./variants";
|
||||
|
||||
export default {
|
||||
defaultButtonGroup,
|
||||
disabledButtonGroup,
|
||||
loading,
|
||||
sizes,
|
||||
vertical,
|
||||
variants,
|
||||
};
|
||||
@ -1,27 +0,0 @@
|
||||
const App = `import { Button, Loading } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Button.Group>
|
||||
<Button clickable={false}>
|
||||
<Loading color="white" size="sm" />
|
||||
</Button>
|
||||
<Button clickable={false}>
|
||||
<Loading type="spinner" color="white" size="sm" />
|
||||
</Button>
|
||||
<Button clickable={false}>
|
||||
<Loading type="points" color="white" size="sm" />
|
||||
</Button>
|
||||
</Button.Group>
|
||||
);
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,52 +0,0 @@
|
||||
const App = `import { Button, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container direction="vertical">
|
||||
<Grid xs={12}>
|
||||
<Button.Group size="xs">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button.Group size="sm">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Button.Group size="md">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Button.Group size="lg">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Button.Group size="xl">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}
|
||||
`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,52 +0,0 @@
|
||||
const App = `import { Button } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<Button.Group color="success">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
<Button.Group color="gradient" ghost>
|
||||
<Button>Action1</Button>
|
||||
<Button>Action2</Button>
|
||||
<Button>Action3</Button>
|
||||
</Button.Group>
|
||||
<Button.Group color="error" rounded>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
<Button.Group color="primary" bordered>
|
||||
<Button>Action1</Button>
|
||||
<Button>Action2</Button>
|
||||
<Button>Action3</Button>
|
||||
</Button.Group>
|
||||
<Button.Group color="warning" flat>
|
||||
<Button>Action1</Button>
|
||||
<Button>Action2</Button>
|
||||
<Button>Action2</Button>
|
||||
</Button.Group>
|
||||
<Button.Group color="secondary" size="sm">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
<Button.Group color="secondary" light>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
</>
|
||||
);
|
||||
}
|
||||
`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,47 +0,0 @@
|
||||
const App = `import { Button } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<Button.Group size="xs" vertical>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
<Button>Four</Button>
|
||||
</Button.Group>
|
||||
<Button.Group size="sm" vertical flat>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
<Button>Four</Button>
|
||||
</Button.Group>
|
||||
<Button.Group size="md" vertical bordered>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
<Button>Four</Button>
|
||||
</Button.Group>
|
||||
<Button.Group size="lg" vertical flat>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
<Button>Four</Button>
|
||||
</Button.Group>
|
||||
<Button.Group size="xl" vertical color="gradient" bordered>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
<Button>Four</Button>
|
||||
</Button.Group>
|
||||
</>
|
||||
);
|
||||
}
|
||||
`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,46 +0,0 @@
|
||||
const App = `import { Button, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Button bordered color="primary" auto>
|
||||
Primary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button bordered color="secondary" auto>
|
||||
Secondary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button bordered color="success" auto>
|
||||
Success
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button bordered color="warning" auto>
|
||||
Warning
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button bordered color="error" auto>
|
||||
Error
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button bordered color="gradient" auto>
|
||||
Gradient
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,46 +0,0 @@
|
||||
const App = `import { Button, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Button color="primary" auto>
|
||||
Primary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button color="secondary" auto>
|
||||
Secondary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button color="success" auto>
|
||||
Success
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button color="warning" auto>
|
||||
Warning
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button color="error" auto>
|
||||
Error
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button color="gradient" auto>
|
||||
Gradient
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,13 +0,0 @@
|
||||
const App = `import { Button } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return <Button>Default</Button>;
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,13 +0,0 @@
|
||||
const App = `import { Button } from '@nextui-org/react';
|
||||
|
||||
export default function App() {
|
||||
return <Button disabled>Disabled</Button>;
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,41 +0,0 @@
|
||||
const App = `import { Button, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Button flat color="primary" auto>
|
||||
Primary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button flat color="secondary" auto>
|
||||
Secondary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button flat color="success" auto>
|
||||
Success
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button flat color="warning" auto>
|
||||
Warning
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button flat color="error" auto>
|
||||
Error
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,46 +0,0 @@
|
||||
const App = `import { Button, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Button color="primary" auto ghost>
|
||||
Primary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button color="secondary" auto ghost>
|
||||
Secondary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button color="success" auto ghost>
|
||||
Success
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button color="warning" auto ghost>
|
||||
Warning
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button color="error" auto ghost>
|
||||
Error
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button color="gradient" auto ghost>
|
||||
Gradient
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,215 +0,0 @@
|
||||
const HeartIcon = `export const HeartIcon = ({
|
||||
fill = 'currentColor',
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
fill={filled ? fill : 'none'}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
|
||||
stroke={fill}
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const CameraIcon = `export const CameraIcon = ({
|
||||
fill = 'currentColor',
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const LockIcon = `export const LockIcon = ({
|
||||
fill = 'currentColor',
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
data-name="Iconly/Curved/Lock"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke={fill}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit={10}
|
||||
strokeWidth={1.5}
|
||||
>
|
||||
<path
|
||||
data-name="Stroke 1"
|
||||
d="M16.471 9.403V7.25a4.561 4.561 0 00-9.121-.016v2.169"
|
||||
/>
|
||||
<path data-name="Stroke 3" d="M11.91 14.156v2.221" />
|
||||
<path
|
||||
data-name="Stroke 5"
|
||||
d="M11.91 8.824c-5.745 0-7.66 1.568-7.66 6.271s1.915 6.272 7.66 6.272 7.661-1.568 7.661-6.272-1.921-6.271-7.661-6.271z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const NotificationIcon = `export const NotificationIcon = ({
|
||||
fill = 'currentColor',
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const UserIcon = `export const UserIcon = ({
|
||||
fill = 'currentColor',
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
data-name="Iconly/Curved/Profile"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
{...props}
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke={fill}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit={10}
|
||||
strokeWidth={1.5}
|
||||
>
|
||||
<path
|
||||
data-name="Stroke 1"
|
||||
d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
|
||||
/>
|
||||
<path
|
||||
data-name="Stroke 3"
|
||||
d="M11.837 11.174a4.372 4.372 0 10-.031 0z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}`;
|
||||
|
||||
const AppJs = `import { Button, Spacer } from '@nextui-org/react';
|
||||
import { HeartIcon } from './HeartIcon';
|
||||
import { CameraIcon } from './CameraIcon';
|
||||
import { LockIcon } from './LockIcon';
|
||||
import { NotificationIcon } from './NotificationIcon';
|
||||
import { UserIcon } from './UserIcon';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
auto
|
||||
color="error"
|
||||
icon={<HeartIcon fill="currentColor" filled />}
|
||||
/>
|
||||
<Spacer y={1} />
|
||||
<Button iconRight={<CameraIcon fill="currentColor" />}>
|
||||
Take a photo
|
||||
</Button>
|
||||
<Spacer y={1} />
|
||||
<Button icon={<LockIcon fill="currentColor" />} color="success">
|
||||
Lock
|
||||
</Button>
|
||||
<Spacer y={1} />
|
||||
<Button icon={<NotificationIcon fill="currentColor" />} color="secondary">
|
||||
Notifications
|
||||
</Button>
|
||||
<Spacer y={1} />
|
||||
<Button icon={<UserIcon fill="currentColor" />} color="error" flat>
|
||||
Delete User
|
||||
</Button>
|
||||
<Spacer y={1} />
|
||||
<Button icon={<UserIcon />} disabled>
|
||||
Delete User
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": AppJs,
|
||||
"/HeartIcon.js": HeartIcon,
|
||||
"/CameraIcon.js": CameraIcon,
|
||||
"/LockIcon.js": LockIcon,
|
||||
"/NotificationIcon.js": NotificationIcon,
|
||||
"/UserIcon.js": UserIcon,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,27 +0,0 @@
|
||||
import default_button from "./default";
|
||||
import disabled_button from "./disabled";
|
||||
import sizes from "./sizes";
|
||||
import color from "./color";
|
||||
import shadow from "./shadow";
|
||||
import loading from "./loading";
|
||||
import bordered from "./bordered";
|
||||
import rounded from "./rounded";
|
||||
import ghost from "./ghost";
|
||||
import flat from "./flat";
|
||||
import light from "./light";
|
||||
import icon from "./icon";
|
||||
|
||||
export default {
|
||||
default_button,
|
||||
disabled_button,
|
||||
sizes,
|
||||
color,
|
||||
shadow,
|
||||
loading,
|
||||
bordered,
|
||||
rounded,
|
||||
ghost,
|
||||
flat,
|
||||
light,
|
||||
icon,
|
||||
};
|
||||
@ -1,41 +0,0 @@
|
||||
const App = `import { Button, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Button light color="primary" auto>
|
||||
Primary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button light color="secondary" auto>
|
||||
Secondary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button light color="success" auto>
|
||||
Success
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button light color="warning" auto>
|
||||
Warning
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button light color="error" auto>
|
||||
Error
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,35 +0,0 @@
|
||||
const App = `import { Button, Grid, Loading } from "@nextui-org/react";
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Button disabled auto bordered color="primary" css={{ px: "$13" }}>
|
||||
<Loading color="currentColor" size="sm" />
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button disabled auto bordered color="secondary" css={{ px: "$13" }}>
|
||||
<Loading type="spinner" color="currentColor" size="sm" />
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button disabled auto bordered color="success" css={{ px: "$13" }}>
|
||||
<Loading type="points" color="currentColor" size="sm" />
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button disabled auto bordered color="warning" css={{ px: "$13" }}>
|
||||
<Loading type="points-opacity" color="currentColor" size="sm" />
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,46 +0,0 @@
|
||||
const App = `import { Button, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Button auto color="primary" rounded>
|
||||
Primary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button auto color="secondary" rounded flat>
|
||||
Secondary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button auto color="success" rounded bordered>
|
||||
Success
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button auto color="warning" rounded flat>
|
||||
Warning
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button auto color="error" rounded bordered>
|
||||
Error
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button auto color="gradient" rounded bordered>
|
||||
Gradient
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,46 +0,0 @@
|
||||
const App = `import { Button, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Button shadow color="primary" auto>
|
||||
Primary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button shadow color="secondary" auto>
|
||||
Secondary
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button shadow color="success" auto>
|
||||
Success
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button shadow color="warning" auto>
|
||||
Warning
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button shadow color="error" auto>
|
||||
Error
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button shadow color="gradient" auto>
|
||||
Gradient
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,27 +0,0 @@
|
||||
const App = `import { Button, Spacer } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<Button size="xs">Mini</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button size="sm">Small</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button>Medium</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button size="lg">Large</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button size="xl">Xlarge</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button auto>Auto Width</Button>
|
||||
</>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,82 +0,0 @@
|
||||
const App = `import { Card, Grid, Row, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const list = [
|
||||
{
|
||||
title: "Orange",
|
||||
img: "/images/fruit-1.jpeg",
|
||||
price: "$5.50",
|
||||
},
|
||||
{
|
||||
title: "Tangerine",
|
||||
img: "/images/fruit-2.jpeg",
|
||||
price: "$3.00",
|
||||
},
|
||||
{
|
||||
title: "Cherry",
|
||||
img: "/images/fruit-3.jpeg",
|
||||
price: "$10.00",
|
||||
},
|
||||
{
|
||||
title: "Lemon",
|
||||
img: "/images/fruit-4.jpeg",
|
||||
price: "$5.30",
|
||||
},
|
||||
{
|
||||
title: "Avocado",
|
||||
img: "/images/fruit-5.jpeg",
|
||||
price: "$15.70",
|
||||
},
|
||||
{
|
||||
title: "Lemon 2",
|
||||
img: "/images/fruit-6.jpeg",
|
||||
price: "$8.00",
|
||||
},
|
||||
{
|
||||
title: "Banana",
|
||||
img: "/images/fruit-7.jpeg",
|
||||
price: "$7.50",
|
||||
},
|
||||
{
|
||||
title: "Watermelon",
|
||||
img: "/images/fruit-8.jpeg",
|
||||
price: "$12.20",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Grid.Container gap={2} justify="flex-start">
|
||||
{list.map((item, index) => (
|
||||
<Grid xs={6} sm={3} key={index}>
|
||||
<Card isPressable>
|
||||
<Card.Body css={{ p: 0 }}>
|
||||
<Card.Image
|
||||
src={"https://nextui.org" + item.img}
|
||||
objectFit="cover"
|
||||
width="100%"
|
||||
height={140}
|
||||
alt={item.title}
|
||||
/>
|
||||
</Card.Body>
|
||||
<Card.Footer css={{ justifyItems: "flex-start" }}>
|
||||
<Row wrap="wrap" justify="space-between" align="center">
|
||||
<Text b>{item.title}</Text>
|
||||
<Text css={{ color: "$accents7", fontWeight: "$semibold", fontSize: "$sm" }}>
|
||||
{item.price}
|
||||
</Text>
|
||||
</Row>
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,253 +0,0 @@
|
||||
const Card1 = `import { Card, Col, Text } from "@nextui-org/react";
|
||||
|
||||
export const Card1 = () => (
|
||||
<Card>
|
||||
<Card.Header css={{ position: "absolute", zIndex: 1, top: 5 }}>
|
||||
<Col>
|
||||
<Text size={12} weight="bold" transform="uppercase" color="#ffffffAA">
|
||||
What to watch
|
||||
</Text>
|
||||
<Text h4 color="white">
|
||||
Stream the Acme event
|
||||
</Text>
|
||||
</Col>
|
||||
</Card.Header>
|
||||
<Card.Image
|
||||
src="https://nextui.org/images/card-example-4.jpeg"
|
||||
objectFit="cover"
|
||||
width="100%"
|
||||
height={340}
|
||||
alt="Card image background"
|
||||
/>
|
||||
</Card>
|
||||
);`;
|
||||
|
||||
const Card2 = `import { Card, Col, Text } from "@nextui-org/react";
|
||||
|
||||
export const Card2 = () => (
|
||||
<Card css={{ w: "100%" }}>
|
||||
<Card.Header css={{ position: "absolute", zIndex: 1, top: 5 }}>
|
||||
<Col>
|
||||
<Text size={12} weight="bold" transform="uppercase" color="#ffffffAA">
|
||||
Plant a tree
|
||||
</Text>
|
||||
<Text h4 color="white">
|
||||
Contribute to the planet
|
||||
</Text>
|
||||
</Col>
|
||||
</Card.Header>
|
||||
<Card.Image
|
||||
src="https://nextui.org/images/card-example-3.jpeg"
|
||||
width="100%"
|
||||
height={340}
|
||||
objectFit="cover"
|
||||
alt="Card image background"
|
||||
/>
|
||||
</Card>
|
||||
);`;
|
||||
|
||||
const Card3 = `import { Card, Col, Text } from "@nextui-org/react";
|
||||
|
||||
export const Card3 = () => (
|
||||
<Card css={{ bg: "$black", w: "100%" }}>
|
||||
<Card.Header css={{ position: "absolute", zIndex: 1, top: 5 }}>
|
||||
<Col>
|
||||
<Text size={12} weight="bold" transform="uppercase" color="#ffffffAA">
|
||||
Supercharged
|
||||
</Text>
|
||||
<Text h4 color="white">
|
||||
Creates beauty like a beast
|
||||
</Text>
|
||||
</Col>
|
||||
</Card.Header>
|
||||
<Card.Image
|
||||
src="https://nextui.org/images/card-example-2.jpeg"
|
||||
width="100%"
|
||||
height={340}
|
||||
objectFit="cover"
|
||||
alt="Card image background"
|
||||
/>
|
||||
</Card>
|
||||
);`;
|
||||
|
||||
const Card4 = `import { Card, Col, Row, Button, Text } from "@nextui-org/react";
|
||||
|
||||
export const Card4 = () => (
|
||||
<Card css={{ w: "100%", h: "400px" }}>
|
||||
<Card.Header css={{ position: "absolute", zIndex: 1, top: 5 }}>
|
||||
<Col>
|
||||
<Text size={12} weight="bold" transform="uppercase" color="#ffffffAA">
|
||||
New
|
||||
</Text>
|
||||
<Text h3 color="black">
|
||||
Acme camera
|
||||
</Text>
|
||||
</Col>
|
||||
</Card.Header>
|
||||
<Card.Body css={{ p: 0 }}>
|
||||
<Card.Image
|
||||
src="https://nextui.org/images/card-example-6.jpeg"
|
||||
width="100%"
|
||||
height="100%"
|
||||
objectFit="cover"
|
||||
alt="Card example background"
|
||||
/>
|
||||
</Card.Body>
|
||||
<Card.Footer
|
||||
isBlurred
|
||||
css={{
|
||||
position: "absolute",
|
||||
bgBlur: "#ffffff66",
|
||||
borderTop: "$borderWeights$light solid rgba(255, 255, 255, 0.2)",
|
||||
bottom: 0,
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<Row>
|
||||
<Col>
|
||||
<Text color="#000" size={12}>
|
||||
Available soon.
|
||||
</Text>
|
||||
<Text color="#000" size={12}>
|
||||
Get notified.
|
||||
</Text>
|
||||
</Col>
|
||||
<Col>
|
||||
<Row justify="flex-end">
|
||||
<Button flat auto rounded color="secondary">
|
||||
<Text
|
||||
css={{ color: "inherit" }}
|
||||
size={12}
|
||||
weight="bold"
|
||||
transform="uppercase"
|
||||
>
|
||||
Notify Me
|
||||
</Text>
|
||||
</Button>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
);`;
|
||||
|
||||
const Card5 = `import { Card, Col, Row, Button, Text } from "@nextui-org/react";
|
||||
|
||||
export const Card5 = () => (
|
||||
<Card css={{ w: "100%", h: "400px" }}>
|
||||
<Card.Header css={{ position: "absolute", zIndex: 1, top: 5 }}>
|
||||
<Col>
|
||||
<Text size={12} weight="bold" transform="uppercase" color="#9E9E9E">
|
||||
Your day your way
|
||||
</Text>
|
||||
<Text h3 color="white">
|
||||
Your checklist for better sleep
|
||||
</Text>
|
||||
</Col>
|
||||
</Card.Header>
|
||||
<Card.Body css={{ p: 0 }}>
|
||||
<Card.Image
|
||||
src="https://nextui.org/images/card-example-5.jpeg"
|
||||
objectFit="cover"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="Relaxing app background"
|
||||
/>
|
||||
</Card.Body>
|
||||
<Card.Footer
|
||||
isBlurred
|
||||
css={{
|
||||
position: "absolute",
|
||||
bgBlur: "#0f111466",
|
||||
borderTop: "$borderWeights$light solid $gray800",
|
||||
bottom: 0,
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<Row>
|
||||
<Col>
|
||||
<Row>
|
||||
<Col span={3}>
|
||||
<Card.Image
|
||||
src="https://nextui.org/images/breathing-app-icon.jpeg"
|
||||
css={{ bg: "black", br: "50%" }}
|
||||
height={40}
|
||||
width={40}
|
||||
alt="Breathing app icon"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Text color="#d1d1d1" size={12}>
|
||||
Breathing App
|
||||
</Text>
|
||||
<Text color="#d1d1d1" size={12}>
|
||||
Get a good night's sleep.
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col>
|
||||
<Row justify="flex-end">
|
||||
<Button
|
||||
flat
|
||||
auto
|
||||
rounded
|
||||
css={{ color: "#94f9f0", bg: "#94f9f026" }}
|
||||
>
|
||||
<Text
|
||||
css={{ color: "inherit" }}
|
||||
size={12}
|
||||
weight="bold"
|
||||
transform="uppercase"
|
||||
>
|
||||
Get App
|
||||
</Text>
|
||||
</Button>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
);`;
|
||||
|
||||
const App = `import { Grid } from "@nextui-org/react";
|
||||
import { Card1 } from './Card1';
|
||||
import { Card2 } from './Card2';
|
||||
import { Card3 } from './Card3';
|
||||
import { Card4 } from './Card4';
|
||||
import { Card5 } from './Card5';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2} justify="center">
|
||||
<Grid xs={12} sm={4}>
|
||||
<Card1 />
|
||||
</Grid>
|
||||
<Grid xs={12} sm={4}>
|
||||
<Card2 />
|
||||
</Grid>
|
||||
<Grid xs={12} sm={4}>
|
||||
<Card3 />
|
||||
</Grid>
|
||||
<Grid xs={12} sm={5}>
|
||||
<Card4 />
|
||||
</Grid>
|
||||
<Grid xs={12} sm={7}>
|
||||
<Card5 />
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/Card1.js": Card1,
|
||||
"/Card2.js": Card2,
|
||||
"/Card3.js": Card3,
|
||||
"/Card4.js": Card4,
|
||||
"/Card5.js": Card5,
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,19 +0,0 @@
|
||||
const App = `import { Card, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Card css={{ mw: "400px" }}>
|
||||
<Card.Body>
|
||||
<Text>A basic card</Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,64 +0,0 @@
|
||||
const App = `import { Card, Grid, Text, Button, Row } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid sm={12} md={5}>
|
||||
<Card css={{ mw: "330px" }}>
|
||||
<Card.Header>
|
||||
<Text b>Card Title</Text>
|
||||
</Card.Header>
|
||||
<Card.Divider />
|
||||
<Card.Body css={{ py: "$10" }}>
|
||||
<Text>
|
||||
Some quick example text to build on the card title and make up the
|
||||
bulk of the card's content.
|
||||
</Text>
|
||||
</Card.Body>
|
||||
<Card.Divider />
|
||||
<Card.Footer>
|
||||
<Row justify="flex-end">
|
||||
<Button size="sm" light>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Agree</Button>
|
||||
</Row>
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid sm={12} md={5}>
|
||||
<Card css={{ mw: "330px" }}>
|
||||
<Card.Header>
|
||||
<Text b>Card Title</Text>
|
||||
</Card.Header>
|
||||
<Card.Divider />
|
||||
<Card.Body css={{ py: "$10" }}>
|
||||
<Text>
|
||||
Some quick example text to build on the card title and make up the
|
||||
bulk of the card's content.
|
||||
</Text>
|
||||
</Card.Body>
|
||||
<Card.Divider />
|
||||
<Card.Footer>
|
||||
<Row justify="flex-end">
|
||||
<Button size="sm" light>
|
||||
Share
|
||||
</Button>
|
||||
<Button size="sm" color="secondary">
|
||||
Learn more
|
||||
</Button>
|
||||
</Row>
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,49 +0,0 @@
|
||||
const App = `import { Card, Grid, Text, Link } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Card css={{ p: "$6", mw: "400px" }}>
|
||||
<Card.Header>
|
||||
<img
|
||||
alt="nextui logo"
|
||||
src="https://avatars.githubusercontent.com/u/86160567?s=200&v=4"
|
||||
width="34px"
|
||||
height="34px"
|
||||
/>
|
||||
<Grid.Container css={{ pl: "$6" }}>
|
||||
<Grid xs={12}>
|
||||
<Text h4 css={{ lineHeight: "$xs" }}>
|
||||
Next UI
|
||||
</Text>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Text css={{ color: "$accents8" }}>nextui.org</Text>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
</Card.Header>
|
||||
<Card.Body css={{ py: "$2" }}>
|
||||
<Text>
|
||||
Make beautiful websites regardless of your design experience.
|
||||
</Text>
|
||||
</Card.Body>
|
||||
<Card.Footer>
|
||||
<Link
|
||||
icon
|
||||
color="primary"
|
||||
target="_blank"
|
||||
href="https://github.com/nextui-org/nextui"
|
||||
>
|
||||
Visit source code on GitHub.
|
||||
</Link>
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,19 +0,0 @@
|
||||
const App = `import { Card, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Card isHoverable variant="bordered" css={{ mw: "400px" }}>
|
||||
<Card.Body>
|
||||
<Text>A hoverable card.</Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,19 +0,0 @@
|
||||
import defaultCard from "./default";
|
||||
import variants from "./variants";
|
||||
import hoverable from "./hoverable";
|
||||
import pressable from "./pressable";
|
||||
import divider from "./divider";
|
||||
import cover from "./cover";
|
||||
import action from "./action";
|
||||
import footer from "./footer";
|
||||
|
||||
export default {
|
||||
defaultCard,
|
||||
variants,
|
||||
hoverable,
|
||||
pressable,
|
||||
divider,
|
||||
cover,
|
||||
action,
|
||||
footer,
|
||||
};
|
||||
@ -1,24 +0,0 @@
|
||||
const App = `import { Card, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Card
|
||||
isPressable
|
||||
isHoverable
|
||||
variant="bordered"
|
||||
css={{ mw: "400px" }}
|
||||
>
|
||||
<Card.Body>
|
||||
<Text>A pressable card.</Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,37 +0,0 @@
|
||||
const App = `import { Card, Grid, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid xs={4}>
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<Text>Default card. (shadow)</Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid xs={4}>
|
||||
<Card variant="flat">
|
||||
<Card.Body>
|
||||
<Text>Flat card.</Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid xs={4}>
|
||||
<Card variant="bordered">
|
||||
<Card.Body>
|
||||
<Text>Bordered card.</Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,24 +0,0 @@
|
||||
const App = `import { Checkbox } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Checkbox.Group
|
||||
color="secondary"
|
||||
defaultValue={["buenos-aires"]}
|
||||
label="Select cities"
|
||||
>
|
||||
<Checkbox value="buenos-aires">Buenos Aires</Checkbox>
|
||||
<Checkbox value="sydney">Sydney</Checkbox>
|
||||
<Checkbox value="london">London</Checkbox>
|
||||
<Checkbox value="tokyo">Tokyo</Checkbox>
|
||||
</Checkbox.Group>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,41 +0,0 @@
|
||||
const App = `import React from "react";
|
||||
import { Checkbox, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const [selected, setSelected] = React.useState(["buenos-aires", "sydney"]);
|
||||
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Checkbox.Group
|
||||
label="Select cities (controlled)"
|
||||
color="secondary"
|
||||
value={selected}
|
||||
onChange={setSelected}
|
||||
>
|
||||
<Checkbox value="buenos-aires">Buenos Aires</Checkbox>
|
||||
<Checkbox value="auckland">Auckland</Checkbox>
|
||||
<Checkbox value="sydney">Sydney</Checkbox>
|
||||
</Checkbox.Group>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Checkbox.Group
|
||||
label="Select cities (uncontrolled)"
|
||||
defaultValue={["buenos-aires", "auckland"]}
|
||||
>
|
||||
<Checkbox value="buenos-aires">Buenos Aires</Checkbox>
|
||||
<Checkbox value="auckland">Auckland</Checkbox>
|
||||
<Checkbox value="sydney">Sydney</Checkbox>
|
||||
</Checkbox.Group>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,30 +0,0 @@
|
||||
const App = `import React from 'react'
|
||||
import { Checkbox, Text, Spacer } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const [selected, setSelected] = React.useState([]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Checkbox.Group
|
||||
label="Select cities"
|
||||
value={selected}
|
||||
onChange={setSelected}
|
||||
>
|
||||
<Checkbox value="buenos-aires">Buenos Aires</Checkbox>
|
||||
<Checkbox value="auckland">Auckland</Checkbox>
|
||||
<Checkbox value="sydney">Sydney</Checkbox>
|
||||
</Checkbox.Group>
|
||||
<Spacer y={1} />
|
||||
<Text>You're going to visit: {selected.join(', ')}</Text>
|
||||
</>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,11 +0,0 @@
|
||||
import column from "./column";
|
||||
import row from "./row";
|
||||
import controlledVsUncontrolled from "./controlled-vs-uncontrolled";
|
||||
import events from "./events";
|
||||
|
||||
export default {
|
||||
column,
|
||||
row,
|
||||
events,
|
||||
controlledVsUncontrolled,
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
const App = `import { Checkbox } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
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>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,39 +0,0 @@
|
||||
const App = `import { Checkbox, Spacer } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<Checkbox color="primary" defaultSelected>
|
||||
Primary
|
||||
</Checkbox>
|
||||
<Spacer />
|
||||
<Checkbox color="secondary" defaultSelected>
|
||||
Secondary
|
||||
</Checkbox>
|
||||
<Spacer />
|
||||
<Checkbox color="success" defaultSelected>
|
||||
Success
|
||||
</Checkbox>
|
||||
<Spacer />
|
||||
<Checkbox color="warning" defaultSelected>
|
||||
Warning
|
||||
</Checkbox>
|
||||
<Spacer />
|
||||
<Checkbox color="error" defaultSelected>
|
||||
Error
|
||||
</Checkbox>
|
||||
<Spacer />
|
||||
<Checkbox color="gradient" defaultSelected>
|
||||
Gradient
|
||||
</Checkbox>
|
||||
</>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,26 +0,0 @@
|
||||
const App = `import React from "react";
|
||||
import { Checkbox, Spacer } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const [selected, setSelected] = React.useState(true);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Checkbox isSelected={selected} color="success" onChange={setSelected}>
|
||||
Subscribe (controlled)
|
||||
</Checkbox>
|
||||
<Spacer x={1} />
|
||||
<Checkbox defaultSelected color="success">
|
||||
Subscribe (uncontrolled)
|
||||
</Checkbox>
|
||||
</>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,13 +0,0 @@
|
||||
const App = `import { Checkbox } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return <Checkbox defaultSelected>Option</Checkbox>;
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
const App = `import { Checkbox } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Checkbox isDisabled defaultSelected>
|
||||
Default
|
||||
</Checkbox>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,23 +0,0 @@
|
||||
import default_checkbox from "./default";
|
||||
import disabled from "./disabled";
|
||||
import size from "./size";
|
||||
import color from "./color";
|
||||
import labelColor from "./label-color";
|
||||
import rounded from "./rounded";
|
||||
import interminate from "./interminate";
|
||||
import noAnimation from "./no-animated";
|
||||
import lineThrough from "./line-through";
|
||||
import controlledVsUncontrolled from "./controlled-vs-uncontrolled";
|
||||
|
||||
export default {
|
||||
default_checkbox,
|
||||
disabled,
|
||||
size,
|
||||
color,
|
||||
labelColor,
|
||||
rounded,
|
||||
interminate,
|
||||
noAnimation,
|
||||
lineThrough,
|
||||
controlledVsUncontrolled,
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
const App = `import { Checkbox } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Checkbox isIndeterminate defaultSelected>
|
||||
Option
|
||||
</Checkbox>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,35 +0,0 @@
|
||||
const App = `import { Checkbox, Spacer } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<Checkbox color="primary" labelColor="primary" defaultSelected>
|
||||
Primary
|
||||
</Checkbox>
|
||||
<Spacer />
|
||||
<Checkbox color="secondary" labelColor="secondary" defaultSelected>
|
||||
Secondary
|
||||
</Checkbox>
|
||||
<Spacer />
|
||||
<Checkbox color="success" labelColor="success" defaultSelected>
|
||||
Success
|
||||
</Checkbox>
|
||||
<Spacer />
|
||||
<Checkbox color="warning" labelColor="warning" defaultSelected>
|
||||
Warning
|
||||
</Checkbox>
|
||||
<Spacer />
|
||||
<Checkbox color="error" labelColor="error" defaultSelected>
|
||||
Error
|
||||
</Checkbox>
|
||||
</>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
const App = `import { Checkbox } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Checkbox lineThrough defaultSelected>
|
||||
Option
|
||||
</Checkbox>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
const App = `import { Checkbox } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Checkbox disableAnimation defaultSelected lineThrough>
|
||||
Option
|
||||
</Checkbox>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
const App = `import { Checkbox } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Checkbox isRounded defaultSelected color="primary">
|
||||
Rounded option
|
||||
</Checkbox>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,35 +0,0 @@
|
||||
const App = `import { Checkbox, Spacer } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<Checkbox defaultSelected size="xs">
|
||||
mini
|
||||
</Checkbox>
|
||||
<Spacer />
|
||||
<Checkbox defaultSelected size="sm">
|
||||
small
|
||||
</Checkbox>
|
||||
<Spacer />
|
||||
<Checkbox defaultSelected size="md">
|
||||
medium
|
||||
</Checkbox>
|
||||
<Spacer />
|
||||
<Checkbox defaultSelected size="lg">
|
||||
large
|
||||
</Checkbox>
|
||||
<Spacer />
|
||||
<Checkbox defaultSelected size="xl">
|
||||
xlarge
|
||||
</Checkbox>
|
||||
</>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,58 +0,0 @@
|
||||
const App = `import { Collapse, Grid, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Collapse
|
||||
bordered
|
||||
title="Option"
|
||||
subtitle="More description about Option"
|
||||
>
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Collapse.Group bordered>
|
||||
<Collapse title="Option A">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option B">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option C">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Collapse.Group>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,84 +0,0 @@
|
||||
const App = `import { Collapse, Text, Grid, Avatar, Link } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Collapse.Group shadow>
|
||||
<Collapse
|
||||
title={<Text h4>Chung Miller</Text>}
|
||||
subtitle="4 unread messages"
|
||||
contentLeft={
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
|
||||
color="secondary"
|
||||
bordered
|
||||
squared
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse
|
||||
title={<Text h4>Janelle Lenard</Text>}
|
||||
subtitle="3 incompleted steps"
|
||||
contentLeft={
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
|
||||
color="success"
|
||||
bordered
|
||||
squared
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse
|
||||
title={<Text h4>Zoey Lang</Text>}
|
||||
subtitle={
|
||||
<Text>
|
||||
2 issues to <Link color>fix now</Link>
|
||||
</Text>
|
||||
}
|
||||
contentLeft={
|
||||
<Avatar
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026702d"
|
||||
color="error"
|
||||
bordered
|
||||
squared
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Collapse.Group>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,179 +0,0 @@
|
||||
const SunIcon = `export const SunIcon = ({
|
||||
fill = 'currentColor',
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
if (filled) {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<g fill={fill}>
|
||||
<path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
|
||||
<path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19H12.998V22H10.998zM10.998 2H12.998V5H10.998zM1.998 11H4.998V13H1.998zM18.998 11H21.998V13H18.998z"
|
||||
></path>
|
||||
<path
|
||||
fill={fill}
|
||||
transform="rotate(-45.017 5.986 18.01)"
|
||||
d="M4.487 17.01H7.487V19.01H4.487z"
|
||||
></path>
|
||||
<path
|
||||
fill={fill}
|
||||
transform="rotate(-45.001 18.008 5.99)"
|
||||
d="M16.508 4.99H19.509V6.99H16.508z"
|
||||
></path>
|
||||
<path
|
||||
fill={fill}
|
||||
transform="rotate(-134.983 5.988 5.99)"
|
||||
d="M4.487 4.99H7.487V6.99H4.487z"
|
||||
></path>
|
||||
<path
|
||||
fill={fill}
|
||||
transform="rotate(134.999 18.008 18.01)"
|
||||
d="M17.008 16.51H19.008V19.511000000000003H17.008z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const MoonIcon = `export const MoonIcon = ({
|
||||
fill = 'currentColor',
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
if (filled) {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M20.742,13.045c-0.677,0.18-1.376,0.271-2.077,0.271c-2.135,0-4.14-0.83-5.646-2.336c-2.008-2.008-2.799-4.967-2.064-7.723 c0.092-0.345-0.007-0.713-0.259-0.965C10.444,2.04,10.077,1.938,9.73,2.034C8.028,2.489,6.476,3.382,5.241,4.616 c-3.898,3.898-3.898,10.243,0,14.143c1.889,1.889,4.401,2.93,7.072,2.93c2.671,0,5.182-1.04,7.07-2.929 c1.236-1.237,2.13-2.791,2.583-4.491c0.092-0.345-0.008-0.713-0.26-0.965C21.454,13.051,21.085,12.951,20.742,13.045z M17.97,17.346c-1.511,1.511-3.52,2.343-5.656,2.343c-2.137,0-4.146-0.833-5.658-2.344c-3.118-3.119-3.118-8.195,0-11.314 c0.602-0.602,1.298-1.102,2.06-1.483c-0.222,2.885,0.814,5.772,2.89,7.848c2.068,2.069,4.927,3.12,7.848,2.891 C19.072,16.046,18.571,16.743,17.97,17.346z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const AnchorIcon = `export const AnchorIcon = ({
|
||||
fill = 'currentColor',
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width || 24}
|
||||
height={size || height || 24}
|
||||
fill={fill}
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
|
||||
></path>
|
||||
<path
|
||||
fill={fill}
|
||||
d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const AppJs = `import { Collapse,Text,Grid } from '@nextui-org/react';
|
||||
import { SunIcon } from './SunIcon';
|
||||
import { MoonIcon } from './MoonIcon';
|
||||
import { AnchorIcon } from './AnchorIcon';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Collapse.Group shadow>
|
||||
<Collapse title="Anchor" arrowIcon={<AnchorIcon />}>
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Moon" arrowIcon={<MoonIcon />}>
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Sun" arrowIcon={<SunIcon />}>
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Collapse.Group>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/SunIcon.js": SunIcon,
|
||||
"/MoonIcon.js": MoonIcon,
|
||||
"/AnchorIcon.js": AnchorIcon,
|
||||
"/App.js": AppJs,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,40 +0,0 @@
|
||||
const App = `import { Collapse, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Collapse.Group>
|
||||
<Collapse title="Option A">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option B">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option C">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Collapse.Group>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,44 +0,0 @@
|
||||
const App = `import { Collapse,Text,Grid } from '@nextui-org/react';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Collapse.Group shadow>
|
||||
<Collapse title="Option A">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse disabled title="Option B" subtitle="Disabled option">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option C">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Collapse.Group>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,27 +0,0 @@
|
||||
import defaultCollapse from "./default";
|
||||
import noAccordion from "./no-accordion";
|
||||
import initialExpanded from "./initial-expanded";
|
||||
import withSubtitle from "./with-subtitle";
|
||||
import shadow from "./shadow";
|
||||
import bordered from "./bordered";
|
||||
import splitted from "./splitted";
|
||||
import customArrow from "./custom-arrow";
|
||||
import contentLeft from "./content-left";
|
||||
import noDivider from "./no-divider";
|
||||
import disabled from "./disabled";
|
||||
import noAnimated from "./no-animated";
|
||||
|
||||
export default {
|
||||
defaultCollapse,
|
||||
noAccordion,
|
||||
initialExpanded,
|
||||
withSubtitle,
|
||||
shadow,
|
||||
bordered,
|
||||
splitted,
|
||||
customArrow,
|
||||
contentLeft,
|
||||
noDivider,
|
||||
disabled,
|
||||
noAnimated,
|
||||
};
|
||||
@ -1,40 +0,0 @@
|
||||
const App = `import { Collapse, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Collapse.Group>
|
||||
<Collapse title="Option A">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option B" expanded>
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option C">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Collapse.Group>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,40 +0,0 @@
|
||||
const App = `import { Collapse, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Collapse.Group accordion={false}>
|
||||
<Collapse title="Option A">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option B">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option C">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Collapse.Group>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,44 +0,0 @@
|
||||
const App = `import { Collapse, Text, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Collapse.Group shadow animated={false}>
|
||||
<Collapse title="Option A">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option B">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option C">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Collapse.Group>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,44 +0,0 @@
|
||||
const App = `import { Collapse, Text, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Collapse.Group shadow divider={false}>
|
||||
<Collapse title="Option A">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option B">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option C">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Collapse.Group>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,58 +0,0 @@
|
||||
const App = `import { Collapse, Grid, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Collapse
|
||||
shadow
|
||||
title="Option"
|
||||
subtitle="More description about Option"
|
||||
>
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Collapse.Group shadow>
|
||||
<Collapse title="Option A">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option B">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option C">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Collapse.Group>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,44 +0,0 @@
|
||||
const App = `import { Collapse, Text, Grid } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Collapse.Group splitted>
|
||||
<Collapse title="Option A">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option B">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse title="Option C">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Collapse.Group>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,39 +0,0 @@
|
||||
const App = `import { Collapse, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Collapse.Group>
|
||||
<Collapse title="Option A" subtitle="More description about Option A">
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
<Collapse
|
||||
title="Option B"
|
||||
subtitle={
|
||||
<>
|
||||
More description about <Text b>Option B</Text>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</Text>
|
||||
</Collapse>
|
||||
</Collapse.Group>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,65 +0,0 @@
|
||||
const App = `import { Container, Card, Row, Text, Col, Spacer } from "@nextui-org/react";
|
||||
export default function App() {
|
||||
return (
|
||||
<Container gap={0}>
|
||||
<Row gap={1}>
|
||||
<Col>
|
||||
<Card css={{ $$cardColor: '$colors$primary' }}>
|
||||
<Card.Body>
|
||||
<Text h6 size={15} color="white" css={{ m: 0 }}>
|
||||
1 of 2
|
||||
</Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card css={{ $$cardColor: '$colors$primary' }}>
|
||||
<Card.Body>
|
||||
<Text h6 size={15} color="white" css={{ m: 0 }}>
|
||||
2 of 2
|
||||
</Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Spacer y={1} />
|
||||
<Row gap={1}>
|
||||
<Col>
|
||||
<Card css={{ $$cardColor: '$colors$primary' }}>
|
||||
<Card.Body>
|
||||
<Text h6 size={15} color="white" css={{ m: 0 }}>
|
||||
1 of 3
|
||||
</Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card css={{ $$cardColor: '$colors$primary' }}>
|
||||
<Card.Body>
|
||||
<Text h6 size={15} color="white" css={{ m: 0 }}>
|
||||
2 of 3
|
||||
</Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card css={{ $$cardColor: '$colors$primary' }}>
|
||||
<Card.Body>
|
||||
<Text h6 size={15} color="white" css={{ m: 0 }}>
|
||||
3 of 3
|
||||
</Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,27 +0,0 @@
|
||||
const App = `import { Container, Card, Row, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Container xl>
|
||||
<Card css={{ $$cardColor: '$colors$primary' }}>
|
||||
<Card.Body>
|
||||
<Row justify="center" align="center">
|
||||
<Text h6 size={15} color="white" css={{ m: 0 }}>
|
||||
NextUI gives you the best developer experience with all the features
|
||||
you need for building beautiful and modern websites and
|
||||
applications.
|
||||
</Text>
|
||||
</Row>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,27 +0,0 @@
|
||||
const App = `import { Container, Card, Row, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Container>
|
||||
<Card css={{ $$cardColor: '$colors$primary' }}>
|
||||
<Card.Body>
|
||||
<Row justify="center" align="center">
|
||||
<Text h6 size={15} color="white" css={{ m: 0 }}>
|
||||
NextUI gives you the best developer experience with all the features
|
||||
you need for building beautiful and modern websites and
|
||||
applications.
|
||||
</Text>
|
||||
</Row>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,27 +0,0 @@
|
||||
const App = `import { Container, Card, Row, Text } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Card css={{ $$cardColor: '$colors$primary' }}>
|
||||
<Card.Body>
|
||||
<Row justify="center" align="center">
|
||||
<Text h6 size={15} color="white" css={{ m: 0 }}>
|
||||
NextUI gives you the best developer experience with all the features
|
||||
you need for building beautiful and modern websites and
|
||||
applications.
|
||||
</Text>
|
||||
</Row>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Container>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.js": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user