mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
765dac53cf
* refactor: improve dx for writing a docs component (#2544) * refactor: improve dx for write a docs component Signed-off-by: Innei <i@innei.in> * refactor(docs): switch to contentlayer2 * chore(docs): rename to avoid conflict * refactor(docs): switch to next-contentlayer2 * refactor(docs): revise docs lib * chore(deps): bump docs related dependencies * fix(use-aria-multiselect): type issue due to ts version bump --------- Signed-off-by: Innei <i@innei.in> Co-authored-by: WK Wong <wingkwong.code@gmail.com> * refactor(docs): accordion codes * feat(docs): declare module `*.jsx?raw` * feat(docs): include `**/*.jsx` * fix(docs): incorrect content * chore(docs): add new lines * refactor(docs): lint --------- Signed-off-by: Innei <i@innei.in> Co-authored-by: Innei <tukon479@gmail.com>
256 lines
6.8 KiB
JavaScript
256 lines
6.8 KiB
JavaScript
import {Accordion, AccordionItem} from "@nextui-org/react";
|
|
|
|
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 = (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 = (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 = (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>
|
|
);
|
|
|
|
export default function App() {
|
|
const itemClasses = {
|
|
base: "py-0 w-full",
|
|
title: "font-normal text-medium",
|
|
trigger: "px-2 py-0 data-[hover=true]:bg-default-100 rounded-lg h-14 flex items-center",
|
|
indicator: "text-medium",
|
|
content: "text-small 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
|
|
className="p-2 flex flex-col gap-1 w-full max-w-[300px]"
|
|
itemClasses={itemClasses}
|
|
showDivider={false}
|
|
variant="shadow"
|
|
>
|
|
<AccordionItem
|
|
key="1"
|
|
aria-label="Connected devices"
|
|
startContent={<MonitorMobileIcon className="text-primary" />}
|
|
subtitle={
|
|
<p className="flex">
|
|
2 issues to <span className="text-primary ml-1">fix now</span>
|
|
</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
|
|
<span className="text-default-400 text-small">*4812</span>
|
|
</p>
|
|
}
|
|
>
|
|
{defaultContent}
|
|
</AccordionItem>
|
|
</Accordion>
|
|
);
|
|
}
|