deep-stack/snowballtools-base
3
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Actions Activity

⚡️ feat: create project mobile layout

Browse Source
This commit is contained in:
Andre H 2024-03-06 14:14:10 +08:00
parent 8d3ef3bafc
commit 274762cbfe
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/frontend/src/pages/org-slug/projects/create/Template.tsx
View File

@ -14,11 +14,15 @@ import {
} from 'components/shared/CustomIcon'; } from 'components/shared/CustomIcon';
import { Heading } from 'components/shared/Heading'; import { Heading } from 'components/shared/Heading';
import { Steps } from 'components/shared/Steps'; import { Steps } from 'components/shared/Steps';
import { useMediaQuery } from 'usehooks-ts';
// TODO: Set dynamic route for template and load details from DB // TODO: Set dynamic route for template and load details from DB
const CreateWithTemplate = () => { const CreateWithTemplate = () => {
const { orgSlug } = useParams(); const { orgSlug } = useParams();
const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
const stepsOrientation = isDesktopView ? 'vertical' : 'horizontal';
const stepperValues = [ const stepperValues = [
{ {
step: 1, step: 1,
@ -47,7 +51,7 @@ const CreateWithTemplate = () => {
); );
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center gap-6 md:gap-10">
<div className="flex flex-col lg:flex-row justify-between w-5/6 my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center"> <div className="flex flex-col lg:flex-row justify-between w-5/6 my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<TemplateIcon type={template?.icon as TemplateIconType} size={48} /> <TemplateIcon type={template?.icon as TemplateIconType} size={48} />
@ -69,11 +73,15 @@ const CreateWithTemplate = () => {
</a> </a>
</div> </div>
</div> </div>
<div className="grid grid-cols-3 w-5/6 p-6"> <div className="grid grid-cols-3 w-5/6 p-0 md:p-6 gap-8 md:gap-0">
<div> <div className="col-span-3 md:col-span-1">
<Steps currentIndex={activeStep} steps={stepperValues} /> <Steps
orientation={stepsOrientation}
currentIndex={activeStep}
steps={stepperValues}
/>
</div> </div>
<div className="col-span-2"> <div className="col-span-3 md:col-span-2">
<Outlet context={{ template }} /> <Outlet context={{ template }} />
</div> </div>
</div> </div>