mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
273 lines
7.3 KiB
TypeScript
273 lines
7.3 KiB
TypeScript
const MonitorMobileIcon = `export const MonitorMobileIcon = (props) => (
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="none"
|
|
focusable="false"
|
|
height="24"
|
|
role="presentation"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
{...props}
|
|
>
|
|
<path
|
|
d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M10 21.4699V16.95"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M2 12.95H10"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M6.73999 21.47H9.99999"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M17.2445 18.25H17.2535"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
/>
|
|
</svg>
|
|
);`;
|
|
|
|
const ShieldSecurityIcon = `export const ShieldSecurityIcon = (props) => (
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="none"
|
|
focusable="false"
|
|
height="24"
|
|
role="presentation"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
{...props}
|
|
>
|
|
<path
|
|
d="M10.49 2.23006L5.49997 4.11006C4.34997 4.54006 3.40997 5.90006 3.40997 7.12006V14.5501C3.40997 15.7301 4.18997 17.2801 5.13997 17.9901L9.43997 21.2001C10.85 22.2601 13.17 22.2601 14.58 21.2001L18.88 17.9901C19.83 17.2801 20.61 15.7301 20.61 14.5501V7.12006C20.61 5.89006 19.67 4.53006 18.52 4.10006L13.53 2.23006C12.68 1.92006 11.32 1.92006 10.49 2.23006Z"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M12 12.5C13.1046 12.5 14 11.6046 14 10.5C14 9.39543 13.1046 8.5 12 8.5C10.8954 8.5 10 9.39543 10 10.5C10 11.6046 10.8954 12.5 12 12.5Z"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeMiterlimit="10"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M12 12.5V15.5"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeMiterlimit="10"
|
|
strokeWidth="1.5"
|
|
/>
|
|
</svg>
|
|
);`;
|
|
|
|
const InfoIcon = `export const InfoIcon = (props) => (
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="none"
|
|
focusable="false"
|
|
height="24"
|
|
role="presentation"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
{...props}
|
|
>
|
|
<path
|
|
d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M12 8V13"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M11.9945 16H12.0035"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
/>
|
|
</svg>
|
|
);`;
|
|
|
|
const InvalidCardIcon = `export const InvalidCardIcon = (props) => (
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="none"
|
|
focusable="false"
|
|
height="24"
|
|
role="presentation"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
{...props}
|
|
>
|
|
<path
|
|
d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M10 21.4699V16.95"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M2 12.95H10"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M6.73999 21.47H9.99999"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M17.2445 18.25H17.2535"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
/>
|
|
</svg>
|
|
);`;
|
|
|
|
const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
|
|
import {MonitorMobileIcon} from "./MonitorMobileIcon";
|
|
import {ShieldSecurityIcon} from "./ShieldSecurityIcon";
|
|
import {InfoIcon} from "./InfoIcon";
|
|
import {InvalidCardIcon} from "./InvalidCardIcon";
|
|
|
|
export default function App() {
|
|
const itemStyles = {
|
|
base: "py-0 w-full",
|
|
title: "font-normal text-base",
|
|
trigger: "px-2 py-0 hover:bg-default-100 rounded-lg h-14 flex items-center",
|
|
indicator: "text-base",
|
|
content: "text-sm px-2",
|
|
};
|
|
|
|
const defaultContent =
|
|
"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.";
|
|
|
|
|
|
return (
|
|
<Accordion
|
|
hideDivider
|
|
className="p-2 flex flex-col gap-1 w-full max-w-[300px]"
|
|
variant="shadow"
|
|
itemStyles={itemStyles}
|
|
>
|
|
<AccordionItem
|
|
key="1"
|
|
aria-label="Connected devices"
|
|
startContent={<MonitorMobileIcon className="text-primary" />}
|
|
subtitle={
|
|
<p className="flex">
|
|
2 issues to <p className="text-primary ml-1">fix now</p>
|
|
</p>
|
|
}
|
|
title="Connected devices"
|
|
>
|
|
{defaultContent}
|
|
</AccordionItem>
|
|
<AccordionItem
|
|
key="2"
|
|
aria-label="Apps Permissions"
|
|
startContent={<ShieldSecurityIcon />}
|
|
subtitle="3 apps have read permissions"
|
|
title="Apps Permissions"
|
|
>
|
|
{defaultContent}
|
|
</AccordionItem>
|
|
<AccordionItem
|
|
key="3"
|
|
aria-label="Pending tasks"
|
|
classNames={{ subtitle: "text-warning" }}
|
|
startContent={<InfoIcon className="text-warning" />}
|
|
subtitle="Complete your profile"
|
|
title="Pending tasks"
|
|
>
|
|
{defaultContent}
|
|
</AccordionItem>
|
|
<AccordionItem
|
|
key="4"
|
|
aria-label="Card expired"
|
|
classNames={{ subtitle: "text-danger" }}
|
|
startContent={<InvalidCardIcon className="text-danger" />}
|
|
subtitle="Please, update now"
|
|
title={
|
|
<p className="flex gap-1 items-center">
|
|
Card expired
|
|
<p className="text-default-400 text-sm">*4812</p>
|
|
</p>
|
|
}
|
|
>
|
|
{defaultContent}
|
|
</AccordionItem>
|
|
</Accordion>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
"/MonitorMobileIcon.jsx": MonitorMobileIcon,
|
|
"/ShieldSecurityIcon.jsx": ShieldSecurityIcon,
|
|
"/InfoIcon.jsx": InfoIcon,
|
|
"/InvalidCardIcon.jsx": InvalidCardIcon,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|