141 lines
No EOL
2.9 KiB
TypeScript
141 lines
No EOL
2.9 KiB
TypeScript
'use client';
|
|
import { useControllableState } from '@radix-ui/react-use-controllable-state';
|
|
import { type LucideIcon, XIcon } from 'lucide-react';
|
|
import {
|
|
type ComponentProps,
|
|
createContext,
|
|
type HTMLAttributes,
|
|
type MouseEventHandler,
|
|
useContext,
|
|
} from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type BannerContextProps = {
|
|
show: boolean;
|
|
setShow: (show: boolean) => void;
|
|
};
|
|
|
|
export const BannerContext = createContext<BannerContextProps>({
|
|
show: true,
|
|
setShow: () => {},
|
|
});
|
|
|
|
export type BannerProps = HTMLAttributes<HTMLDivElement> & {
|
|
visible?: boolean;
|
|
defaultVisible?: boolean;
|
|
onClose?: () => void;
|
|
inset?: boolean;
|
|
};
|
|
|
|
export const Banner = ({
|
|
children,
|
|
visible,
|
|
defaultVisible = true,
|
|
onClose,
|
|
className,
|
|
inset = false,
|
|
...props
|
|
}: BannerProps) => {
|
|
const [show, setShow] = useControllableState({
|
|
defaultProp: defaultVisible,
|
|
prop: visible,
|
|
onChange: onClose,
|
|
});
|
|
|
|
if (!show) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<BannerContext.Provider value={{ show, setShow }}>
|
|
<div
|
|
className={cn(
|
|
'flex w-full items-center justify-between gap-2 bg-primary px-4 py-2 text-primary-foreground',
|
|
inset && 'rounded-lg',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
</BannerContext.Provider>
|
|
);
|
|
};
|
|
|
|
export type BannerIconProps = HTMLAttributes<HTMLDivElement> & {
|
|
icon: LucideIcon;
|
|
};
|
|
|
|
export const BannerIcon = ({
|
|
icon: Icon,
|
|
className,
|
|
...props
|
|
}: BannerIconProps) => (
|
|
<div
|
|
className={cn(
|
|
'p-1',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<Icon size={16} />
|
|
</div>
|
|
);
|
|
|
|
export type BannerTitleProps = HTMLAttributes<HTMLParagraphElement>;
|
|
|
|
export const BannerTitle = ({ className, ...props }: BannerTitleProps) => (
|
|
<p className={cn('flex-1 text-sm', className)} {...props} />
|
|
);
|
|
|
|
export type BannerActionProps = ComponentProps<typeof Button>;
|
|
|
|
export const BannerAction = ({
|
|
variant = 'outline',
|
|
size = 'sm',
|
|
className,
|
|
...props
|
|
}: BannerActionProps) => (
|
|
<Button
|
|
className={cn(
|
|
'shrink-0 bg-transparent hover:bg-background/10 hover:text-background',
|
|
className
|
|
)}
|
|
size={size}
|
|
variant={variant}
|
|
{...props}
|
|
/>
|
|
);
|
|
|
|
export type BannerCloseProps = ComponentProps<typeof Button>;
|
|
|
|
export const BannerClose = ({
|
|
variant = 'ghost',
|
|
size = 'icon',
|
|
onClick,
|
|
className,
|
|
...props
|
|
}: BannerCloseProps) => {
|
|
const { setShow } = useContext(BannerContext);
|
|
|
|
const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
|
|
setShow(false);
|
|
onClick?.(e);
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
className={cn(
|
|
'shrink-0 bg-transparent hover:bg-background/10 hover:text-background',
|
|
className
|
|
)}
|
|
onClick={handleClick}
|
|
size={size}
|
|
variant={variant}
|
|
{...props}
|
|
>
|
|
<XIcon size={18} />
|
|
</Button>
|
|
);
|
|
}; |