ThePotioner
5313dae892
Key Changes: - Created Wrapper components (Fullscreen, Column, Container, ListedComponent) to standardize the application's overall layout. - Refactored the structure of major components like App.tsx and PageContainer.tsx to use the new Wrapper components. - Added a simple TodoBoard mockup page at the /todos route. - Adjusted flexbox classes for the TodoBoard component to allow its width to resize flexibly based on screen size.
28 lines
819 B
TypeScript
28 lines
819 B
TypeScript
interface WrapperProps {
|
|
children: React.ReactNode | React.ReactNode[];
|
|
}
|
|
|
|
export const ContainerWrapper = ({ children }: WrapperProps) => {
|
|
return (
|
|
<div className="flex flex-1 overflow-x-scroll scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-primary/20 scrollbar-track-transparent">
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const ListedComponentWrapper = ({ children }: WrapperProps) => {
|
|
return (
|
|
<div className="flex flex-1 justify-center gap-4 items-baseline p-4">
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const FullscreenWrapper = ({ children }: WrapperProps) => {
|
|
return <div className="flex flex-1 h-screen">{children}</div>;
|
|
};
|
|
|
|
export const ColumnWrapper = ({ children }: WrapperProps) => {
|
|
return <div className="flex flex-col flex-1 overflow-hidden">{children}</div>;
|
|
};
|