mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
6492d36c68
* 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>
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import {ReactNode, FC} from "react";
|
|
import {clsx} from "@heroui/shared-utils";
|
|
export interface BgGridContainerProps {
|
|
showGradient?: boolean;
|
|
children?: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const BgGridContainer: FC<BgGridContainerProps> = ({
|
|
// showGradient = true,
|
|
children,
|
|
className,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"relative overflow-y-hidden flex items-center border border-default-200 dark:border-default-100 px-2 py-4 rounded-lg",
|
|
"overflow-hidden",
|
|
// blur effect
|
|
// "bg-transparent",
|
|
// "before:w-full",
|
|
// "before:bg-background/10",
|
|
// "before:content-['']",
|
|
// "before:block",
|
|
// "before:z-[-1]",
|
|
// "before:absolute",
|
|
// "before:inset-0",
|
|
// "before:backdrop-blur-md",
|
|
// "before:backdrop-saturate-200",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="max-w-full py-4 px-2 w-full h-full scrollbar-hide overflow-x-scroll">
|
|
{children}
|
|
</div>
|
|
{/* <div
|
|
className={clsx(
|
|
"hidden md:block absolute z-[-1] inset-0 bg-grid-zinc-300/25 [mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.6))]",
|
|
"dark:bg-grid-zinc-500/25 dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))]",
|
|
)}
|
|
style={{backgroundPosition: "10px 10px"}}
|
|
/>
|
|
{showGradient && (
|
|
<div className="hidden md:block absolute h-full w-full z-[-1] opacity-40 -top-8 -right-28">
|
|
<Image
|
|
removeWrapper
|
|
alt="custom themes background"
|
|
className="h-full w-full object-cover overflow-visible"
|
|
src="/gradients/blue-purple-1.svg"
|
|
/>
|
|
</div>
|
|
)} */}
|
|
</div>
|
|
);
|
|
};
|