️ feat: reskin template header

This commit is contained in:
Andre H 2024-02-29 15:31:10 +07:00
parent 2cd1865d19
commit d9392c095d

View File

@ -10,6 +10,8 @@ import { Avatar } from '@material-tailwind/react';
import Stepper from '../../../../components/Stepper';
import templates from '../../../../assets/templates';
import { LinkChainIcon } from 'components/shared/CustomIcon';
import { Heading } from 'components/shared/Heading';
// TODO: Set dynamic route for template and load details from DB
const CreateWithTemplate = () => {
@ -44,19 +46,24 @@ const CreateWithTemplate = () => {
return (
<div className="flex flex-col items-center">
<div className="flex justify-between w-5/6 my-4 bg-gray-200 rounded-xl p-6 items-center">
<div className="flex flex-col lg:flex-row justify-between w-5/6 my-4 bg-gray-200 rounded-xl p-6 gap-3 items-start lg:items-center">
<div className="flex items-center gap-3">
<Avatar variant="rounded" src="/gray.png" placeholder={''} />
<div className="grow px-2">{template?.name}</div>
<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>