cerc-io/snowballtools-base-mirror
16
0
Fork 0
mirror of https://github.com/snowball-tools/snowballtools-base.git synced 2024-11-17 12:19:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

⚡️ feat: implement components page to act as storybook

Browse Source
This commit is contained in:
Andre H 2024-02-16 12:31:13 +07:00
parent d29b29f161
commit 082353e9bc
1 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/frontend/src/pages/components/index.tsx Normal file
View File

@ -0,0 +1,39 @@
import React from 'react';
const Page = () => {
return (
<div className="relative h-full min-h-full">
<div className="flex flex-col items-center justify-center max-w-7xl mx-auto px-20 py-20">
<h1 className="text-4xl font-bold">Manual Storybook</h1>
<p className="mt-4 text-lg text-center text-gray-500">
Get started by editing{' '}
<code className="p-2 font-mono text-sm bg-gray-100 rounded-md">
packages/frontend/src/pages/components/index.tsx
</code>
</p>
<div className="w-full h border border-gray-200 px-20 my-10" />
{/* Insert Components here */}
<div className="flex flex-col gap-10 items-center justify-between">
<h1 className="text-2xl font-bold">Component A</h1>
<div className="flex flex-row gap-10 items-center justify-center">
<div className="h-20 w-40 bg-red-400 rounded-md" />
<div className="h-20 w-40 bg-red-400 rounded-md" />
<div className="h-20 w-40 bg-red-400 rounded-md" />
<div className="h-20 w-40 bg-red-400 rounded-md" />
</div>
<div className="flex flex-row gap-10 items-center justify-center">
<div className="h-20 w-40 bg-red-400 rounded-md" />
<div className="h-20 w-40 bg-red-400 rounded-md" />
<div className="h-20 w-40 bg-red-400 rounded-md" />
<div className="h-20 w-40 bg-red-400 rounded-md" />
</div>
</div>
</div>
</div>
);
};
export default Page;