33 lines
753 B
TypeScript
33 lines
753 B
TypeScript
import React from "react";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
const layoutClasses = {
|
|
default: "",
|
|
centered: "flex items-center justify-center",
|
|
};
|
|
|
|
const Story = React.forwardRef<
|
|
HTMLDivElement,
|
|
{
|
|
layout?: keyof typeof layoutClasses;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
id?: string;
|
|
}
|
|
>(({ layout = "default", children, className, id }, ref) => {
|
|
return (
|
|
<div
|
|
className={twMerge(
|
|
`bg-white dark:bg-black border border-neutral-300 dark:border-neutral-700 rounded-lg w-full p-4 min-h-48 h-auto my-8 not-prose ${layoutClasses[layout]}`,
|
|
className
|
|
)}
|
|
ref={ref}
|
|
id={id}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export { Story };
|