forked from cerc-io/snowballtools-base
93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
import { useMemo } from 'react';
|
|
import {
|
|
Outlet,
|
|
useLocation,
|
|
useParams,
|
|
useSearchParams,
|
|
} from 'react-router-dom';
|
|
|
|
import templates from '../../../../assets/templates';
|
|
import {
|
|
LinkChainIcon,
|
|
TemplateIcon,
|
|
TemplateIconType,
|
|
} from 'components/shared/CustomIcon';
|
|
import { Heading } from 'components/shared/Heading';
|
|
import { Steps } from 'components/shared/Steps';
|
|
import { useMediaQuery } from 'usehooks-ts';
|
|
|
|
// TODO: Set dynamic route for template and load details from DB
|
|
const CreateWithTemplate = () => {
|
|
const { orgSlug } = useParams();
|
|
|
|
const isDesktopView = useMediaQuery('(min-width: 960px)'); // lg:
|
|
const stepsOrientation = isDesktopView ? 'vertical' : 'horizontal';
|
|
|
|
const stepperValues = [
|
|
{
|
|
step: 1,
|
|
route: `/${orgSlug}/projects/create/template`,
|
|
label: 'Create repository',
|
|
},
|
|
{
|
|
step: 2,
|
|
route: `/${orgSlug}/projects/create/template/deploy`,
|
|
label: 'Deploy',
|
|
},
|
|
];
|
|
|
|
const location = useLocation();
|
|
|
|
const [searchParams] = useSearchParams();
|
|
|
|
const template = templates.find(
|
|
(template) => template.id === searchParams.get('templateId'),
|
|
);
|
|
|
|
const activeStep = useMemo(
|
|
() =>
|
|
stepperValues.find((data) => data.route === location.pathname)?.step ?? 0,
|
|
[location.pathname],
|
|
);
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-6 lg:gap-10 mx-auto w-full lg:w-5/6">
|
|
<div className="flex flex-col lg:flex-row justify-between w-full my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center">
|
|
<div className="flex items-center gap-3">
|
|
<TemplateIcon type={template?.icon as TemplateIconType} size={48} />
|
|
<Heading className="font-medium">{template?.name}</Heading>
|
|
</div>
|
|
<div>
|
|
<a
|
|
href={`https://github.com/${template?.repoFullName}`}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="flex gap-1.5 items-center text-sm"
|
|
>
|
|
<LinkChainIcon size={18} />
|
|
<span className="underline">
|
|
{Boolean(template?.repoFullName)
|
|
? template?.repoFullName
|
|
: 'Template not supported'}
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-3 p-0 lg:p-6 w-full gap-8 lg:gap-0">
|
|
<div className="col-span-3 lg:col-span-1">
|
|
<Steps
|
|
orientation={stepsOrientation}
|
|
currentIndex={activeStep}
|
|
steps={stepperValues}
|
|
/>
|
|
</div>
|
|
<div className="col-span-3 lg:col-span-2">
|
|
<Outlet context={{ template }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CreateWithTemplate;
|