mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(root): v2 published
This commit is contained in:
parent
1976c62105
commit
e940ec06ac
62
.changeset/dull-jeans-clean.md
Normal file
62
.changeset/dull-jeans-clean.md
Normal file
@ -0,0 +1,62 @@
|
||||
---
|
||||
"@nextui-org/use-aria-accordion-item": patch
|
||||
"@nextui-org/use-aria-modal-overlay": patch
|
||||
"@nextui-org/use-aria-toggle-button": patch
|
||||
"@nextui-org/use-safe-layout-effect": patch
|
||||
"@nextui-org/framer-transitions": patch
|
||||
"@nextui-org/use-infinite-scroll": patch
|
||||
"@nextui-org/use-scroll-position": patch
|
||||
"@nextui-org/use-update-effect": patch
|
||||
"@nextui-org/use-callback-ref": patch
|
||||
"@nextui-org/shared-icons": patch
|
||||
"@nextui-org/shared-utils": patch
|
||||
"@nextui-org/pagination": patch
|
||||
"@nextui-org/use-aria-button": patch
|
||||
"@nextui-org/react-utils": patch
|
||||
"@nextui-org/accordion": patch
|
||||
"@nextui-org/use-disclosure": patch
|
||||
"@nextui-org/use-is-mounted": patch
|
||||
"@nextui-org/use-pagination": patch
|
||||
"@nextui-org/use-real-shape": patch
|
||||
"@nextui-org/aria-utils": patch
|
||||
"@nextui-org/test-utils": patch
|
||||
"@nextui-org/checkbox": patch
|
||||
"@nextui-org/dropdown": patch
|
||||
"@nextui-org/progress": patch
|
||||
"@nextui-org/skeleton": patch
|
||||
"@nextui-org/use-clipboard": patch
|
||||
"@nextui-org/use-is-mobile": patch
|
||||
"@nextui-org/use-ref-state": patch
|
||||
"@nextui-org/divider": patch
|
||||
"@nextui-org/popover": patch
|
||||
"@nextui-org/snippet": patch
|
||||
"@nextui-org/spinner": patch
|
||||
"@nextui-org/tooltip": patch
|
||||
"@nextui-org/avatar": patch
|
||||
"@nextui-org/button": patch
|
||||
"@nextui-org/navbar": patch
|
||||
"@nextui-org/ripple": patch
|
||||
"@nextui-org/spacer": patch
|
||||
"@nextui-org/switch": patch
|
||||
"@nextui-org/badge": patch
|
||||
"@nextui-org/image": patch
|
||||
"@nextui-org/input": patch
|
||||
"@nextui-org/modal": patch
|
||||
"@nextui-org/radio": patch
|
||||
"@nextui-org/table": patch
|
||||
"@nextui-org/use-resize": patch
|
||||
"@nextui-org/card": patch
|
||||
"@nextui-org/chip": patch
|
||||
"@nextui-org/code": patch
|
||||
"@nextui-org/link": patch
|
||||
"@nextui-org/tabs": patch
|
||||
"@nextui-org/user": patch
|
||||
"@nextui-org/use-image": patch
|
||||
"@nextui-org/kbd": patch
|
||||
"@nextui-org/use-ssr": patch
|
||||
"@nextui-org/system": patch
|
||||
"@nextui-org/react": patch
|
||||
"@nextui-org/theme": patch
|
||||
---
|
||||
|
||||
Introducing NextUI v2.0
|
||||
62
.changeset/fluffy-peaches-warn.md
Normal file
62
.changeset/fluffy-peaches-warn.md
Normal file
@ -0,0 +1,62 @@
|
||||
---
|
||||
"@nextui-org/use-aria-accordion-item": patch
|
||||
"@nextui-org/use-aria-modal-overlay": patch
|
||||
"@nextui-org/use-aria-toggle-button": patch
|
||||
"@nextui-org/use-safe-layout-effect": patch
|
||||
"@nextui-org/framer-transitions": patch
|
||||
"@nextui-org/use-infinite-scroll": patch
|
||||
"@nextui-org/use-scroll-position": patch
|
||||
"@nextui-org/use-update-effect": patch
|
||||
"@nextui-org/use-callback-ref": patch
|
||||
"@nextui-org/shared-icons": patch
|
||||
"@nextui-org/shared-utils": patch
|
||||
"@nextui-org/pagination": patch
|
||||
"@nextui-org/use-aria-button": patch
|
||||
"@nextui-org/react-utils": patch
|
||||
"@nextui-org/accordion": patch
|
||||
"@nextui-org/use-disclosure": patch
|
||||
"@nextui-org/use-is-mounted": patch
|
||||
"@nextui-org/use-pagination": patch
|
||||
"@nextui-org/use-real-shape": patch
|
||||
"@nextui-org/aria-utils": patch
|
||||
"@nextui-org/test-utils": patch
|
||||
"@nextui-org/checkbox": patch
|
||||
"@nextui-org/dropdown": patch
|
||||
"@nextui-org/progress": patch
|
||||
"@nextui-org/skeleton": patch
|
||||
"@nextui-org/use-clipboard": patch
|
||||
"@nextui-org/use-is-mobile": patch
|
||||
"@nextui-org/use-ref-state": patch
|
||||
"@nextui-org/divider": patch
|
||||
"@nextui-org/popover": patch
|
||||
"@nextui-org/snippet": patch
|
||||
"@nextui-org/spinner": patch
|
||||
"@nextui-org/tooltip": patch
|
||||
"@nextui-org/avatar": patch
|
||||
"@nextui-org/button": patch
|
||||
"@nextui-org/navbar": patch
|
||||
"@nextui-org/ripple": patch
|
||||
"@nextui-org/spacer": patch
|
||||
"@nextui-org/switch": patch
|
||||
"@nextui-org/badge": patch
|
||||
"@nextui-org/image": patch
|
||||
"@nextui-org/input": patch
|
||||
"@nextui-org/modal": patch
|
||||
"@nextui-org/radio": patch
|
||||
"@nextui-org/table": patch
|
||||
"@nextui-org/use-resize": patch
|
||||
"@nextui-org/card": patch
|
||||
"@nextui-org/chip": patch
|
||||
"@nextui-org/code": patch
|
||||
"@nextui-org/link": patch
|
||||
"@nextui-org/tabs": patch
|
||||
"@nextui-org/user": patch
|
||||
"@nextui-org/use-image": patch
|
||||
"@nextui-org/kbd": patch
|
||||
"@nextui-org/use-ssr": patch
|
||||
"@nextui-org/system": patch
|
||||
"@nextui-org/react": patch
|
||||
"@nextui-org/theme": patch
|
||||
---
|
||||
|
||||
Introducing v2 - Readmes updated
|
||||
@ -11,7 +11,6 @@ import {MDXContent} from "@/components/mdx-content";
|
||||
import {siteConfig} from "@/config/site";
|
||||
import {Route} from "@/libs/docs/page";
|
||||
import {ChevronRightLinearIcon} from "@/components/icons";
|
||||
import {__PROD__} from "@/utils";
|
||||
|
||||
interface BlogPostProps {
|
||||
params: {
|
||||
@ -79,7 +78,7 @@ export async function generateStaticParams(): Promise<BlogPostProps["params"][]>
|
||||
export default async function DocPage({params}: BlogPostProps) {
|
||||
const {post} = await getBlogPostFromParams({params});
|
||||
|
||||
if (!post || __PROD__) {
|
||||
if (!post) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
|
||||
@ -2,15 +2,10 @@ import {allBlogPosts} from "contentlayer/generated";
|
||||
import {compareDesc} from "date-fns";
|
||||
|
||||
import {BlogPostList} from "@/components/blog-post";
|
||||
import {__PROD__} from "@/utils";
|
||||
|
||||
export default function Blog() {
|
||||
const posts = allBlogPosts.sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)));
|
||||
|
||||
if (__PROD__) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full lg:px-16 mt-12">
|
||||
<div className="text-center">
|
||||
|
||||
56
apps/docs/app/figma/page.tsx
Normal file
56
apps/docs/app/figma/page.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import {Button, Image, Link} from "@nextui-org/react";
|
||||
|
||||
import {Blockquote} from "@/components/docs/components/blockquote";
|
||||
|
||||
export default function FigmaPage() {
|
||||
return (
|
||||
<>
|
||||
<main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
|
||||
<section className="w-full flex flex-col items-center lg:px-16 mt-12 gap-6">
|
||||
<div className="text-center max-w-xl">
|
||||
<h1 className="mb-2 font-bold text-4xl">NextUI Figma Kit</h1>
|
||||
<h5 className="text-default-500 text-lg">
|
||||
A Figma file that contains the basis of the NextUI design system to help you design
|
||||
your applications.
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<iframe
|
||||
className="aspect-video w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
|
||||
height="600"
|
||||
src="https://embed.figma.com/file/1267584376234254760/hf_embed?community_viewer=true&embed_host=nextui"
|
||||
title="NextUI Figma Kit"
|
||||
width="800"
|
||||
/>
|
||||
<div className="text-center max-w-2xl m-auto">
|
||||
<Button className="max-w-fit" color="default" variant="bordered">
|
||||
<Link
|
||||
isExternal
|
||||
showAnchorIcon
|
||||
className="text-current"
|
||||
href="https://www.figma.com/community/file/1267584376234254760"
|
||||
>
|
||||
Open in Figma
|
||||
</Link>
|
||||
</Button>
|
||||
<Blockquote color="warning">
|
||||
This file is still in development and will be continuously updated.
|
||||
</Blockquote>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
|
||||
>
|
||||
<Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
|
||||
>
|
||||
<Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -64,7 +64,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
|
||||
<body className={clsx("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
|
||||
<Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
|
||||
<div className="relative flex flex-col" id="app-container">
|
||||
<Navbar routes={manifest.routes} />
|
||||
<Navbar mobileRoutes={manifest.mobileRoutes} routes={manifest.routes} />
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
116
apps/docs/components/ads/carbon-ad/carbon-ad.tsx
Normal file
116
apps/docs/components/ads/carbon-ad/carbon-ad.tsx
Normal file
@ -0,0 +1,116 @@
|
||||
import React, {useCallback, useEffect} from "react";
|
||||
import Script from "next/script";
|
||||
|
||||
import carbonOptimize from "./carbon-optimize";
|
||||
|
||||
import {loadScript} from "@/utils/scripts";
|
||||
import {useIsMounted} from "@/hooks/use-is-mounted";
|
||||
import {__PROD__} from "@/utils";
|
||||
|
||||
const EA_PROVIDER_RATIO = 0.5;
|
||||
|
||||
export const CarbonAd: React.FC<unknown> = () => {
|
||||
const carbonRef = React.useRef(null);
|
||||
const [showEthicalAds, setShowEthicalAds] = React.useState(false);
|
||||
|
||||
const isMounted = useIsMounted();
|
||||
|
||||
const loadEthicalAds = useCallback(() => {
|
||||
return new Promise((resolve) => {
|
||||
const script = document.createElement("script");
|
||||
|
||||
script.src = "https://media.ethicalads.io/media/client/ethicalads.min.js";
|
||||
script.async = true;
|
||||
script.onload = () => {
|
||||
// @ts-ignore
|
||||
resolve(window.ethicalads);
|
||||
};
|
||||
|
||||
script.onerror = () => {
|
||||
resolve(null);
|
||||
};
|
||||
|
||||
document.body.appendChild(script);
|
||||
|
||||
return () => {
|
||||
document.body.removeChild(script);
|
||||
};
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const shouldShowEthicalAds = Math.random() < EA_PROVIDER_RATIO;
|
||||
|
||||
let loadCarbon: any = null;
|
||||
|
||||
const loadCarbonAds = () => {
|
||||
setShowEthicalAds(false);
|
||||
// The isolation logic of carbonads is flawed.
|
||||
// Once the script starts loading, it will asynchronous resolve, with no way to stop it.
|
||||
// This leads to duplication of the ad. To solve the issue, we debounce the load action.
|
||||
loadCarbon =
|
||||
isMounted &&
|
||||
setTimeout(() => {
|
||||
const script = loadScript(
|
||||
"https://cdn.carbonads.com/carbon.js?serve=CESIC53Y&placement=nextuiorg",
|
||||
carbonRef.current,
|
||||
);
|
||||
|
||||
script.id = "_carbonads_js";
|
||||
carbonOptimize.init();
|
||||
});
|
||||
};
|
||||
|
||||
const loadAdProvider = async () => {
|
||||
if (shouldShowEthicalAds) {
|
||||
try {
|
||||
const ethicalads = await loadEthicalAds();
|
||||
|
||||
if (!ethicalads) {
|
||||
loadCarbonAds();
|
||||
|
||||
return;
|
||||
}
|
||||
// @ts-ignore
|
||||
ethicalads.wait.then((placements) => {
|
||||
if (!placements.length) {
|
||||
loadCarbonAds();
|
||||
} else {
|
||||
setShowEthicalAds(true);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
loadCarbonAds();
|
||||
}
|
||||
} else {
|
||||
loadCarbonAds();
|
||||
}
|
||||
};
|
||||
|
||||
loadAdProvider();
|
||||
|
||||
return () => {
|
||||
loadCarbon && clearTimeout(loadCarbon);
|
||||
};
|
||||
}, [isMounted]);
|
||||
|
||||
if (!__PROD__) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<>
|
||||
<Script async src="https://media.ethicalads.io/media/client/ethicalads.min.js" />
|
||||
<div
|
||||
className="ea-container horizontal"
|
||||
data-ea-campaign-types="paid|publisher-house|community"
|
||||
data-ea-publisher="nextuiorg"
|
||||
data-ea-type="image"
|
||||
style={{display: showEthicalAds ? "block" : "none"}}
|
||||
/>
|
||||
</>
|
||||
<div className="carbon-ad-container" style={{display: showEthicalAds ? "none" : "block"}}>
|
||||
<span ref={carbonRef} id="carbon-ad" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
64
apps/docs/components/ads/carbon-ad/carbon-optimize.js
Normal file
64
apps/docs/components/ads/carbon-ad/carbon-optimize.js
Normal file
@ -0,0 +1,64 @@
|
||||
export default {
|
||||
isRefreshAble: function () {
|
||||
return !(
|
||||
typeof document.addEventListener === "undefined" || this.browserSupport().hidden === undefined
|
||||
);
|
||||
},
|
||||
browserSupport: function () {
|
||||
let hidden;
|
||||
let visibilityChange;
|
||||
|
||||
if (typeof document.hidden !== "undefined") {
|
||||
// Opera 12.10 and Firefox 18 and later support
|
||||
hidden = "hidden";
|
||||
visibilityChange = "visibilitychange";
|
||||
} else if (typeof document.msHidden !== "undefined") {
|
||||
hidden = "msHidden";
|
||||
visibilityChange = "msvisibilitychange";
|
||||
} else if (typeof document.webkitHidden !== "undefined") {
|
||||
hidden = "webkitHidden";
|
||||
visibilityChange = "webkitvisibilitychange";
|
||||
}
|
||||
|
||||
return {
|
||||
hidden: hidden,
|
||||
visibilityChange: visibilityChange,
|
||||
};
|
||||
},
|
||||
handleVisibilityChange: function () {
|
||||
const isElementInViewport = function (el) {
|
||||
let element = document.querySelector(el);
|
||||
let bounding = element.getBoundingClientRect();
|
||||
let isVisible;
|
||||
|
||||
if (
|
||||
bounding.top >= 0 &&
|
||||
bounding.left >= 0 &&
|
||||
bounding.right <= window.innerWidth &&
|
||||
bounding.bottom <= window.innerHeight
|
||||
) {
|
||||
isVisible = true;
|
||||
} else {
|
||||
isVisible = false;
|
||||
}
|
||||
|
||||
return isVisible;
|
||||
};
|
||||
|
||||
if (!document.hidden) {
|
||||
if (typeof _carbonads !== "undefined" && isElementInViewport("#carbonads")) {
|
||||
// eslint-disable-next-line no-undef
|
||||
_carbonads.refresh();
|
||||
}
|
||||
}
|
||||
},
|
||||
init: function () {
|
||||
if (this.isRefreshAble()) {
|
||||
document.addEventListener(
|
||||
this.browserSupport().visibilityChange,
|
||||
this.handleVisibilityChange,
|
||||
false,
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
1
apps/docs/components/ads/carbon-ad/index.ts
Normal file
1
apps/docs/components/ads/carbon-ad/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from "./carbon-ad";
|
||||
@ -1,8 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import {FC} from "react";
|
||||
import {tv, VariantProps} from "tailwind-variants";
|
||||
|
||||
const blockquoteStyles = tv({
|
||||
base: "border pl-4 bg-default-50 my-6 py-3 rounded-xl [&>p]:m-0",
|
||||
base: "border px-4 bg-default-50 my-6 py-3 rounded-xl [&>p]:m-0",
|
||||
variants: {
|
||||
color: {
|
||||
default: "border-default-200 dark:border-default-100 bg-default-200/20",
|
||||
|
||||
@ -7,6 +7,7 @@ import NextImage from "next/image";
|
||||
import {ThemeSwitch} from "./theme-switch";
|
||||
|
||||
import {Sandpack} from "@/components/sandpack";
|
||||
import {CarbonAd} from "@/components/ads/carbon-ad";
|
||||
import * as DocsComponents from "@/components/docs/components";
|
||||
import * as BlogComponents from "@/components/blog/components";
|
||||
import {Codeblock} from "@/components/docs/components";
|
||||
@ -195,7 +196,7 @@ export const MDXComponents = {
|
||||
thead: Thead,
|
||||
tr: Trow,
|
||||
td: Tcol,
|
||||
// CarbonAd,
|
||||
CarbonAd,
|
||||
code: Code,
|
||||
ul: List,
|
||||
a: (props: React.HTMLAttributes<HTMLAnchorElement>) => <Link {...props} />,
|
||||
|
||||
@ -16,6 +16,7 @@ import {
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
DropdownTrigger,
|
||||
Chip,
|
||||
} from "@nextui-org/react";
|
||||
import {dataFocusVisibleClasses} from "@nextui-org/theme";
|
||||
import {ChevronDownIcon, LinkIcon} from "@nextui-org/shared-icons";
|
||||
@ -42,16 +43,16 @@ import {
|
||||
import {useIsMounted} from "@/hooks/use-is-mounted";
|
||||
import {DocsSidebar} from "@/components/docs/sidebar";
|
||||
import {useCmdkStore} from "@/components/cmdk";
|
||||
import {__PROD__} from "@/utils";
|
||||
|
||||
export interface NavbarProps {
|
||||
routes: Route[];
|
||||
mobileRoutes?: Route[];
|
||||
tag?: string;
|
||||
slug?: string;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
|
||||
export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], slug, tag}) => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState<boolean | undefined>(false);
|
||||
const [commandKey, setCommandKey] = useState<"ctrl" | "command">("command");
|
||||
|
||||
@ -109,10 +110,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
|
||||
return null;
|
||||
}
|
||||
|
||||
const navLinkClasses = clsx(
|
||||
link({color: "foreground"}),
|
||||
"data-[active=true]:text-primary data-[active=true]:font-medium",
|
||||
);
|
||||
const navLinkClasses = clsx(link({color: "foreground"}), "data-[active=true]:text-primary");
|
||||
|
||||
return (
|
||||
<NextUINavbar
|
||||
@ -169,7 +167,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
|
||||
<div className="w-[74px]" />
|
||||
)}
|
||||
</NavbarBrand>
|
||||
<ul className="hidden lg:flex gap-4 justify-start">
|
||||
<ul className="hidden lg:flex gap-4 justify-start items-center">
|
||||
<NavbarItem>
|
||||
<NextLink
|
||||
className={navLinkClasses}
|
||||
@ -190,7 +188,6 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
|
||||
Components
|
||||
</NextLink>
|
||||
</NavbarItem>
|
||||
{!__PROD__ && (
|
||||
<NavbarItem>
|
||||
<NextLink
|
||||
className={navLinkClasses}
|
||||
@ -201,7 +198,6 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
|
||||
Blog
|
||||
</NextLink>
|
||||
</NavbarItem>
|
||||
)}
|
||||
<NavbarItem>
|
||||
<NextLink
|
||||
className={navLinkClasses}
|
||||
@ -212,6 +208,17 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
|
||||
Figma
|
||||
</NextLink>
|
||||
</NavbarItem>
|
||||
<NavbarItem>
|
||||
<Chip
|
||||
as={NextLink}
|
||||
className="hover:bg-default-100 transition-colors cursor-pointer"
|
||||
color="secondary"
|
||||
href="/blog/nextui-v2"
|
||||
variant="dot"
|
||||
>
|
||||
Introducing NextUI v2.0
|
||||
</Chip>
|
||||
</NavbarItem>
|
||||
</ul>
|
||||
</NavbarContent>
|
||||
|
||||
@ -243,7 +250,12 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
|
||||
<SearchLinearIcon className="mt-px text-default-600 dark:text-default-500" size={20} />
|
||||
</button>
|
||||
</NavbarItem>
|
||||
<NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} className="ml-2" />
|
||||
<NavbarItem className="w-10 h-full">
|
||||
<NavbarMenuToggle
|
||||
aria-label={isMenuOpen ? "Close menu" : "Open menu"}
|
||||
className="w-full h-full pt-1"
|
||||
/>
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
|
||||
<NavbarContent className="hidden sm:flex basis-1/5 sm:basis-full" justify="end">
|
||||
@ -273,15 +285,15 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
|
||||
>
|
||||
Sponsor
|
||||
</Button>
|
||||
</NavbarItem>{" "}
|
||||
</NavbarItem>
|
||||
<NavbarMenuToggle
|
||||
aria-label={isMenuOpen ? "Close menu" : "Open menu"}
|
||||
className="hidden sm:flex lg:hidden"
|
||||
className="hidden sm:flex lg:hidden ml-4"
|
||||
/>
|
||||
</NavbarContent>
|
||||
|
||||
<NavbarMenu>
|
||||
<DocsSidebar className="mt-4" routes={routes} slug={slug} tag={tag} />
|
||||
<DocsSidebar className="mt-4" routes={[...mobileRoutes, ...routes]} slug={slug} tag={tag} />
|
||||
{children}
|
||||
</NavbarMenu>
|
||||
</NextUINavbar>
|
||||
|
||||
@ -318,5 +318,39 @@
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"mobileRoutes": [
|
||||
{
|
||||
"key": "getting-started",
|
||||
"title": "Getting Started",
|
||||
"defaultOpen": true,
|
||||
"keywords": "getting started, main routes, blog, docs, components, nextui",
|
||||
"routes": [
|
||||
{
|
||||
"key": "docs",
|
||||
"title": "Documentation",
|
||||
"keywords": "documentation, guide, nextui",
|
||||
"path": "/docs/guide/introduction.mdx"
|
||||
},
|
||||
{
|
||||
"key": "components",
|
||||
"title": "Components",
|
||||
"keywords": "components, nextui",
|
||||
"path": "/docs/components/avatar"
|
||||
},
|
||||
{
|
||||
"key": "blog",
|
||||
"title": "Blog",
|
||||
"keywords": "blog, nextui, news, updates",
|
||||
"path": "/blog"
|
||||
},
|
||||
{
|
||||
"key": "figma",
|
||||
"title": "Figma",
|
||||
"keywords": "figma, nextui, design, ui kit",
|
||||
"path": "/figma"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Introducing NextUI Version 2"
|
||||
description: "Discover NextUI v2. TailwindCSS integration, enhanced theming, improved animations, and more."
|
||||
title: "Introducing NextUI Version 2.0"
|
||||
description: "Discover NextUI v2.0 TailwindCSS integration, enhanced theming, improved animations, and more."
|
||||
date: "2023-07-29"
|
||||
image: "/blog/nextuiv2.jpg"
|
||||
author:
|
||||
@ -280,7 +280,7 @@ file helps streamline the process of transforming design ideas into functioning
|
||||
</Blockquote>
|
||||
|
||||
<iframe
|
||||
height="450"
|
||||
height="600"
|
||||
width="800"
|
||||
src="https://embed.figma.com/file/1267584376234254760/hf_embed?community_viewer=true&embed_host=nextui"
|
||||
className="aspect-video w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
|
||||
@ -289,7 +289,12 @@ file helps streamline the process of transforming design ideas into functioning
|
||||
<Spacer y={10} />
|
||||
|
||||
<Button color="default" variant="bordered">
|
||||
<Link isExternal className="text-current" href="https://www.figma.com/community/file/1267584376234254760">
|
||||
<Link
|
||||
isExternal
|
||||
showAnchorIcon
|
||||
className="text-current"
|
||||
href="https://www.figma.com/community/file/1267584376234254760"
|
||||
>
|
||||
Open in Figma
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
@ -13,6 +13,8 @@ Accordion display a list of high-level options that can expand/collapse to revea
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 2 accordion-related components:
|
||||
|
||||
@ -14,6 +14,8 @@ The Avatar component is used to represent a user, and displays the profile pictu
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 3 avatar-related components:
|
||||
|
||||
@ -13,6 +13,8 @@ Badges are used as a small numerical value or status descriptor for UI elements.
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Buttons allow users to perform actions and choose with a single tap.
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 2 button-related components:
|
||||
|
||||
@ -13,6 +13,8 @@ Card is a container for text, photos, and actions in the context of a single sub
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 4 card-related components:
|
||||
|
||||
@ -13,6 +13,8 @@ A CheckboxGroup allows users to select one or more items from a list of choices.
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 2 checkbox-related components:
|
||||
|
||||
@ -13,6 +13,8 @@ Checkboxes allow users to select multiple items from a list of individual items,
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ A Chip is a small block of essential information that represent an input, attrib
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Circular progress indicators are utilized to indicate an undetermined wait perio
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Code is a component used to display inline code.
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Divider is a component that separates content in a page.
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Displays a list of actions or options that a user can choose.
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 5 dropdown-related components:
|
||||
|
||||
@ -13,6 +13,8 @@ The Image component is used to display images with support for fallback.
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Input is a component that allows users to enter text. It can be used to get user
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Keyboard key is a component to display which key or combination of keys performs
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Links allow users to click their way from page to page. This component is styled
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Displays a dialog with a custom content that requires attention or provides addi
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 5 modal-related components:
|
||||
|
||||
@ -13,6 +13,8 @@ A responsive navigation header positioned on top side of your page that includes
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 7 navbar-related components:
|
||||
|
||||
@ -13,6 +13,8 @@ The Pagination component allows you to display active page and navigate between
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 3 pagination-related components:
|
||||
|
||||
@ -14,6 +14,8 @@ additional rich content on top of something.
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 3 popover-related components:
|
||||
|
||||
@ -13,6 +13,8 @@ The Progress component allows you to view the progress of any activity.
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Radio Group allow users to select a single option from a list of mutually exclus
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Skeleton is a placeholder to show a loading state and the expected shape of a co
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Snippet is a component that can be used to display inline or multiline code snip
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Spacer is a component used to add space between components.
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Spinner express an unspecified wait time or display the length of a process.
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ The Switch component is used as an alternative between checked and not checked s
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Tables are used to display tabular data using rows and columns. They allow users
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 6 table-related components:
|
||||
|
||||
@ -13,6 +13,8 @@ Tabs organize content into multiple sections and allow users to navigate between
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 2 tabs-related components:
|
||||
|
||||
@ -13,6 +13,8 @@ Textarea component is a multi-line Input which allows you to write large texts.
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Tooltips display a brief, informative message that appears when a user interacts
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -13,6 +13,8 @@ Display user information with avatar and name.
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
|
||||
@ -8,7 +8,6 @@ description: Learn how to configure and customize colors with NextUI.
|
||||
NextUI's plugin enables you to personalize the semantic colors of the theme such as `primary`,
|
||||
`secondary`, `success`, etc.
|
||||
|
||||
|
||||
```js {7,11}
|
||||
module.exports = {
|
||||
plugins: [
|
||||
@ -29,6 +28,8 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
> **Note**: Colors configurations apply globally across all components.
|
||||
|
||||
## Default Colors
|
||||
|
||||
@ -11,6 +11,8 @@ create it by adding the following code to your `tailwind.config.js` file.
|
||||
We recommend adding a palette that ranges from `50` to `900`. You can use tools like [Eva Design System](https://colors.eva.design/),
|
||||
[Smart Watch](https://smart-swatch.netlify.app/), [Palette](https://palettte.app/) or [Color Box](https://colorbox.io/) to generate your palette.
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
### Add the new theme to the plugin
|
||||
|
||||
```js {9-43}
|
||||
|
||||
@ -8,6 +8,8 @@ description: Learn how to create new variants for the NextUI components.
|
||||
NextUI allows you to create new variants for components that better suit your project's needs.
|
||||
This can be done by extending the component and its properties, and customizing the styles.
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
You can create or override the component `variants`, `defaultVariants` and `componentVariants`.
|
||||
|
||||
> **Note**: For one-off customizations, refer to the [Override Styles](/docs/customization/override-styles) documentation.
|
||||
|
||||
@ -13,6 +13,8 @@ Furthermore, you have the option to create your own theme based on the default o
|
||||
incorporates [Layout](/docs/customization/layout) tokens and [Color](/docs/customization/colors) tokens, designed
|
||||
to facilitate your customization process.
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
## Customizing Layout
|
||||
|
||||
You can modify a variety of layout aspects, including spacing units, font sizes, line heights,
|
||||
|
||||
@ -32,6 +32,8 @@ This will enable the dark mode for the whole application. However, many applicat
|
||||
the capability to switch between different themes. For this purpose, we recommend using a
|
||||
theme switch library or creating your own implementation.
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
## Using next-themes
|
||||
|
||||
For applications using [Next.js](/docs/frameworks/nextjs), the [next-themes](https://github.com/pacocoursey/next-themes)
|
||||
|
||||
@ -8,6 +8,8 @@ description: NextUI offers a set of layout options to customize the theme.
|
||||
NextUI's plugin provides a variety of layout customization options. Alter spacing units,
|
||||
font sizes, line heights, radii and more to personalize each theme to your liking.
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
Using layout tokens, you can ensure a uniform aesthetic across all components without
|
||||
needing to override the default Tailwind CSS configuration.
|
||||
|
||||
|
||||
@ -8,6 +8,8 @@ description: NextUI allows you to override the default styles of the components
|
||||
Overriding default component styles is as simple as passing your own class names to the `className`
|
||||
or to the `classNames` prop for components with slots.
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
### What's is a Slot?
|
||||
|
||||
A slot is a part of a component that can be styled separately. For example, the [CircularProgress](/docs/components/circular-progress) component
|
||||
|
||||
@ -14,6 +14,8 @@ TailwindCSS plugin. This plugin, which is based on the [tw-colors](https://githu
|
||||
plugin developed by [L-Blondy](https://github.com/L-Blondy), allows you to customize color schemes,
|
||||
layout configurations, and more, across different components of your application.
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
## What is a Theme?
|
||||
|
||||
A theme, in the context of NextUI, is a predefined set of colors, layout attributes, and other
|
||||
|
||||
@ -13,6 +13,8 @@ Requirements:
|
||||
|
||||
------
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
To use NextUI in your Astro project, you need to follow the following steps:
|
||||
|
||||
<Steps>
|
||||
|
||||
@ -15,6 +15,8 @@ Requirements:
|
||||
|
||||
------
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
To use NextUI in your Next.js project, you need to follow the steps below, depending on your project structure.
|
||||
|
||||
## App directory Setup
|
||||
|
||||
@ -13,6 +13,8 @@ Requirements:
|
||||
|
||||
------
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
To use NextUI in your Remix project, you need to follow the following steps:
|
||||
|
||||
<Steps>
|
||||
|
||||
@ -14,6 +14,8 @@ Requirements:
|
||||
|
||||
------
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
To use NextUI in your Vite project, you need to follow the following steps:
|
||||
|
||||
<Steps>
|
||||
|
||||
@ -13,6 +13,8 @@ Requirements:
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
To use NextUI in your project, you need to follow the following steps:
|
||||
|
||||
## Global Installation
|
||||
|
||||
@ -14,6 +14,8 @@ Requirements:
|
||||
|
||||
-----
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
## Next.js upgrade steps
|
||||
|
||||
Make sure to follow the previous steps since they are required to upgrade to v2.
|
||||
|
||||
@ -36,6 +36,10 @@ async function redirect() {
|
||||
destination: "/docs/guide/introduction",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/v2",
|
||||
destination: "/blog/nextui-v2",
|
||||
},
|
||||
{
|
||||
source: "/docs/intro",
|
||||
destination: "/docs/guide/introduction",
|
||||
@ -73,12 +77,12 @@ async function redirect() {
|
||||
},
|
||||
{
|
||||
source: "/theme",
|
||||
destination: "/docs/theme/default-theme",
|
||||
destination: "/docs/customization/theme",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/theme",
|
||||
destination: "/docs/theme/default-theme",
|
||||
destination: "/docs/customization/theme",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
@ -96,6 +100,78 @@ async function redirect() {
|
||||
destination: "/docs/components/button",
|
||||
permanent: true,
|
||||
},
|
||||
// v1 to v2 redirects
|
||||
{
|
||||
source: "/docs/theme/dark-mode",
|
||||
destination: "/docs/customization/dark-mode",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/guide/nextui-plus-nextjs",
|
||||
destination: "/docs/frameworks/nextjs",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/theme/default-theme",
|
||||
destination: "/docs/customization/theme",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/theme/customize-theme",
|
||||
destination: "/docs/customization/customize-theme",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/theme/override-styles",
|
||||
destination: "/docs/customization/override-styles",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/theme/typescript",
|
||||
destination: "/docs/guide/introduction",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/theme/utilities",
|
||||
destination: "/docs/guide/introduction",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/theme/media",
|
||||
destination: "/docs/guide/introduction",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/layout/container",
|
||||
destination: "/docs/guide/introduction",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/layout/grid",
|
||||
destination: "/docs/guide/introduction",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/layout/spacer",
|
||||
destination: "/docs/components/spacer",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/components/collapse",
|
||||
destination: "/docs/components/accordion",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/components/text",
|
||||
destination: "/docs/guide/introduction",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/components/button-group",
|
||||
destination: "/docs/components/button",
|
||||
permanent: true,
|
||||
}
|
||||
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
177
apps/docs/styles/ads.css
Normal file
177
apps/docs/styles/ads.css
Normal file
@ -0,0 +1,177 @@
|
||||
/*
|
||||
* --------------------------------------------------
|
||||
* Carbon Ads
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
|
||||
.carbon-ad-container {
|
||||
@apply relative my-4 min-h-[135px] w-full z-10 rounded-medium bg-background dark:bg-default-50/50 shadow-small p-4;
|
||||
}
|
||||
|
||||
#carbonads * {
|
||||
margin: initial;
|
||||
padding: initial;
|
||||
}
|
||||
#carbonads {
|
||||
font-family: inherit;
|
||||
max-width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
#carbonads {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
#carbonads a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
#carbonads a:hover {
|
||||
@apply !text-default-500;
|
||||
}
|
||||
#carbonads span {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
#carbonads .carbon-wrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
#carbonads .carbon-img {
|
||||
@apply shadow-xl;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
max-width: 130px;
|
||||
width: 100%;
|
||||
}
|
||||
#carbonads .carbon-img img {
|
||||
display: block;
|
||||
max-width: 100% !important;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
#carbonads .carbon-text {
|
||||
@apply !text-default-500;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
#carbonads .carbon-poweredby {
|
||||
@apply text-default-400 dark:!text-default-300;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 10px 0;
|
||||
text-transform: uppercase;
|
||||
letter-space: .value 0.5px;
|
||||
font-weight: 600;
|
||||
font-size: 9px;
|
||||
line-height: 0;
|
||||
transition: all 0.25 ease;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:600px) {
|
||||
#carbonads .carbon-text {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* --------------------------------------------------
|
||||
* Ethical Ads
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
|
||||
.ea-container {
|
||||
@apply relative my-4 min-h-[135px] w-full z-10 rounded-medium bg-background dark:bg-default-50/50 shadow-small p-4;
|
||||
}
|
||||
.ea-container .ea-type-image {
|
||||
width: 100%;
|
||||
}
|
||||
.ea-container .ea-pixel {
|
||||
display: none !important;
|
||||
}
|
||||
.ea-container .ea-type-image .ea-content {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
max-width: 100% !important;
|
||||
display: flex;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ea-container .ea-type-image .ea-callout {
|
||||
display: flex !important;
|
||||
max-width: 100% !important;
|
||||
justify-content: flex-end !important;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.ea-container .ea-type-image .ea-callout a,
|
||||
.ea-container .ea-type-image .ea-callout a .ea-headline,
|
||||
.ea-container .ea-type-image .ea-callout a .ea-cta {
|
||||
@apply text-default-400 dark:!text-default-300;
|
||||
font-weight: 600 !important;
|
||||
font-size: 9px !important;
|
||||
}
|
||||
|
||||
[data-ea-publisher].loaded .ea-content a strong {
|
||||
@apply !text-default-500;
|
||||
}
|
||||
|
||||
.ea-container .ea-type-image .ea-content a {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
max-width: 130px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ea-container .ea-type-image .ea-text {
|
||||
width: 100%;
|
||||
text-align: left !important;
|
||||
padding-top: 8px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.ea-container .ea-type-image .ea-text a {
|
||||
@apply !text-default-300;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ea-container .ea-type-image .ea-text .ea-body {
|
||||
@apply !text-default-500;
|
||||
}
|
||||
|
||||
.ea-container .ea-type-image img {
|
||||
display: block;
|
||||
max-width: 100% !important;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.ea-container .ea-type-image .ea-text a {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
@import 'prism.css';
|
||||
@import 'nprogress.css';
|
||||
@import 'ads.css';
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
|
||||
17
apps/docs/utils/scripts.ts
Normal file
17
apps/docs/utils/scripts.ts
Normal file
@ -0,0 +1,17 @@
|
||||
export const loadScript = (src: string, container: HTMLElement | null) => {
|
||||
const script = document.createElement("script");
|
||||
|
||||
script.setAttribute("async", "");
|
||||
script.src = src;
|
||||
container && container.appendChild(script);
|
||||
|
||||
return script;
|
||||
};
|
||||
|
||||
export const removeScript = (
|
||||
script: HTMLScriptElement | HTMLElement,
|
||||
container: HTMLElement | null,
|
||||
) => {
|
||||
if (script.parentNode != container) return;
|
||||
container && container?.removeChild(script);
|
||||
};
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/accordion
|
||||
|
||||
A Quick description of the component
|
||||
Accordion display a list of high-level options that can expand/collapse to reveal more information.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org//docs/components/accordion) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/accordion",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/avatar
|
||||
|
||||
A Quick description of the component
|
||||
The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/avatar) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/avatar",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
|
||||
"keywords": [
|
||||
"avatar"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/badge
|
||||
|
||||
A Quick description of the component
|
||||
Badges are used as a small numerical value or status descriptor for UI elements.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/badge) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/badge",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "Badges are used as a small numerical value or status descriptor for UI elements.",
|
||||
"keywords": [
|
||||
"badge"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/button
|
||||
|
||||
A Quick description of the component
|
||||
Buttons allow users to perform actions and choose with a single tap.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/button) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/button",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "Buttons allow users to perform actions and choose with a single tap.",
|
||||
"keywords": [
|
||||
"button"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/card
|
||||
|
||||
A Quick description of the component
|
||||
Card is a container for text, photos, and actions in the context of a single subject.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/card) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/card",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "Card is a container for text, photos, and actions in the context of a single subject.",
|
||||
"keywords": [
|
||||
"card"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/checkbox
|
||||
|
||||
A Quick description of the component
|
||||
Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/checkbox) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/checkbox",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
|
||||
"keywords": [
|
||||
"checkbox"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/chip
|
||||
|
||||
A Quick description of the component
|
||||
A Chip is a small block of essential information that represent an input, attribute, or action.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/chip) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/chip",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "Chips help people enter information, make selections, filter content, or trigger actions.",
|
||||
"keywords": [
|
||||
"chip"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/code
|
||||
|
||||
A Quick description of the component
|
||||
Code is a component used to display inline code.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/code) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/code",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "Code is a component used to display inline code.",
|
||||
"keywords": [
|
||||
"code"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/divider
|
||||
|
||||
A Quick description of the component
|
||||
Divider is a component that separates content in a page.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/divider) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/divider",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": ". A separator is a visual divider between two groups of content",
|
||||
"keywords": [
|
||||
"divider"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/dropdown
|
||||
|
||||
A Quick description of the component
|
||||
Displays a list of actions or options that a user can choose.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/dropdown) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/dropdown",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "A dropdown displays a list of actions or options that a user can choose.",
|
||||
"keywords": [
|
||||
"dropdown"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/image
|
||||
|
||||
A Quick description of the component
|
||||
The Image component is used to display images with support for fallback.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/image) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/image",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "A simple image component",
|
||||
"keywords": [
|
||||
"image"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/input
|
||||
|
||||
A Quick description of the component
|
||||
Input is a component that allows users to enter text. It can be used to get user inputs in forms, search fields, and more.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/input) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/input",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "The input component is designed for capturing user input within a text field.",
|
||||
"keywords": [
|
||||
"input"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/kbd
|
||||
|
||||
A Quick description of the component
|
||||
Keyboard key or kbd is a component to display which key or combination of keys performs a given action.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/kbd) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/kbd",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "The keyboard key components indicates which key or set of keys used to execute a specificv action",
|
||||
"keywords": [
|
||||
"kbd"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/link
|
||||
|
||||
A Quick description of the component
|
||||
Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an `<a>` tag.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/link) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/link",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
|
||||
"keywords": [
|
||||
"link"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/modal
|
||||
|
||||
A Quick description of the component
|
||||
Displays a dialog with a custom content that requires attention or provides additional information.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/modal) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/modal",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "Displays a dialog with a custom content that requires attention or provides additional information.",
|
||||
"keywords": [
|
||||
"modal"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/navbar
|
||||
|
||||
A Quick description of the component
|
||||
A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse menu and more.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/navbar) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/navbar",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
|
||||
"keywords": [
|
||||
"navbar"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/pagination
|
||||
|
||||
A Quick description of the component
|
||||
The Pagination component allows you to display active page and navigate between multiple pages.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/pagination) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/pagination",
|
||||
"version": "0.0.0-dev-v2-20230730211830",
|
||||
"version": "2.0.0",
|
||||
"description": "The Pagination component allows you to display active page and navigate between multiple pages.",
|
||||
"keywords": [
|
||||
"pagination"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# @nextui-org/popover
|
||||
|
||||
A Quick description of the component
|
||||
Popover is a non-modal dialog that floats around its disclosure. It's commonly used for displaying additional rich content on top of something.
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
Please refer to the [documentation](https://nextui.org/docs/components/popover) for more information.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
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