mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
b8e7b94586
* docs: optimize route higtlight (#4520) * docs: optimize home display (#4519) * docs: optimize home display and route highlight * docs: optimize home display * fix(alert): propagate className (#4535) * fix(alert): propagate className * chore(alert): remove className from alert theme * fix(avatar): title type in Avatar (#4529) * fix(avatar): title type in Avatar * fix(alert): apply isEmpty check on title * fix(alert): alert interface props type * refactor: remove unnecessary props types (#4530) * refactor(docs): remove string type as it is included in ReactNode * refactor: remove unnecessary types * feat(changeset): add changeset * chore: remove changeset * refactor: remove null since ReactNode unions it already * fix(input): use onPress for wrapper click focus (#4483) * fix(input): use onPress for wrapper click focus * test(input): wrapper click focus test * chore(changeset): input onPress for wrapper click focus * chore(changeset): minor wording * Refactor/rebrand (#4532) * chore: rebrand in progress * chore: update docs to use heroui * chore: components renbranded * chore: figma moved to the docs files * fix: posthog config * fix(docs): extra classname in form example (#4465) * chore: clean git * chore: make heroui private * chore: new logo * chore: node env var renamed * chore: public robots txt deleted * chore: wrangler installed * chore: wrangler renamed * chore: cloudlfare workers removed * chore: force vercel deploy * refactor: first migration and provider * refactor: rename nextui plugin * refactor: rename github site * refactor: rename CONTRIBUTING * refactor: rename package name * refactor: nextjs image hostname * refactor: mdx repo nextui-org rename frontio-ai * refactor: nextui.org rename heroui.com * refactor: add heroui to missing places * fix: heroui plugin name * fix: update docs * docs: nextui to heroui add npmrc pnpm migratation * chore: rename all packages with new org name * chore: replace frontio-ai by frontioai * chore: revert previous changes * chore: small adjustment * chore: doc updated * feat: blog * chore: avatar updated * fix: url * chore: add new ogimage * fix: ogimage command * fix: heroui name and storybook welcome page * fix: og image url * feat: favicon and icon changed --------- Co-authored-by: աӄա <wingkwong.code@gmail.com> Co-authored-by: winches <329487092@qq.com> * fix: postbuild script * chore: core package updates * ci(changesets): version packages (#4569) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * feat: contributors added to the blog --------- Co-authored-by: winches <329487092@qq.com> Co-authored-by: աӄա <wingkwong.code@gmail.com> Co-authored-by: Peterl561 <76144929+Peterl561@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
264 lines
7.2 KiB
JavaScript
264 lines
7.2 KiB
JavaScript
import {Accordion, AccordionItem} from "@heroui/react";
|
|
|
|
const MonitorMobileIcon = (props) => {
|
|
return (
|
|
<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) => {
|
|
return (
|
|
<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) => {
|
|
return (
|
|
<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) => {
|
|
return (
|
|
<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>
|
|
);
|
|
}
|