strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create checklist component

Browse Source
This commit is contained in:
Sam Becker 2023-09-14 23:36:47 -05:00
parent 583cecc241
commit b91e9aa4d9
3 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Checklist.tsx Normal file
View File

@ -0,0 +1,18 @@
import { cc } from '@/utility/css';
export default function Checklist({
children,
}: {
children: React.ReactNode
}) {
return (
<div className={cc(
'bg-white dark:bg-black',
'dark:text-gray-400',
'border border-gray-200 dark:border-gray-800 rounded-md',
'divide-y divide-gray-200 dark:divide-gray-800',
)}>
{children}
</div>
);
}

2
src/site/SiteChecklistRow.tsx → src/components/ChecklistRow.tsx
View File

@ -2,7 +2,7 @@ import { ReactNode } from 'react';
import { cc } from '@/utility/css'; import { cc } from '@/utility/css';
import Spinner from '@/components/Spinner'; import Spinner from '@/components/Spinner';
export default function SiteChecklistRow({ export default function ChecklistRow({
title, title,
status, status,
isPending, isPending,

36
src/site/SiteChecklistClient.tsx
View File

@ -3,12 +3,13 @@
import { useTransition } from 'react'; import { useTransition } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { cc } from '@/utility/css'; import { cc } from '@/utility/css';
import SiteChecklistRow from './SiteChecklistRow'; import ChecklistRow from '../components/ChecklistRow';
import { FiCheckSquare, FiExternalLink } from 'react-icons/fi'; import { FiCheckSquare, FiExternalLink } from 'react-icons/fi';
import { BiCopy, BiRefresh } from 'react-icons/bi'; import { BiCopy, BiRefresh } from 'react-icons/bi';
import IconButton from '@/components/IconButton'; import IconButton from '@/components/IconButton';
import { toast } from 'sonner'; import { toast } from 'sonner';
import InfoBlock from '@/components/InfoBlock'; import InfoBlock from '@/components/InfoBlock';
import Checklist from '@/components/Checklist';
export default function SiteChecklistClient({ export default function SiteChecklistClient({
hasTitle, hasTitle,
@ -100,21 +101,16 @@ export default function SiteChecklistClient({
return ( return (
<div className="text-sm max-w-xl space-y-4"> <div className="text-sm max-w-xl space-y-4">
<div className={cc( <Checklist>
'bg-white dark:bg-black', <ChecklistRow
'dark:text-gray-400',
'border border-gray-200 dark:border-gray-800 rounded-md',
'divide-y divide-gray-200 dark:divide-gray-800',
)}>
<SiteChecklistRow
title="Add title" title="Add title"
status={hasTitle} status={hasTitle}
isPending={isPendingPage} isPending={isPendingPage}
> >
Store in environment variable: Store in environment variable:
{renderEnvVars(['NEXT_PUBLIC_SITE_TITLE'])} {renderEnvVars(['NEXT_PUBLIC_SITE_TITLE'])}
</SiteChecklistRow> </ChecklistRow>
<SiteChecklistRow <ChecklistRow
title="Add custom domain" title="Add custom domain"
status={hasDomain} status={hasDomain}
isPending={isPendingPage} isPending={isPendingPage}
@ -122,8 +118,8 @@ export default function SiteChecklistClient({
> >
Store in environment variable: Store in environment variable:
{renderEnvVars(['NEXT_PUBLIC_SITE_DOMAIN'])} {renderEnvVars(['NEXT_PUBLIC_SITE_DOMAIN'])}
</SiteChecklistRow> </ChecklistRow>
<SiteChecklistRow <ChecklistRow
title="Setup database" title="Setup database"
status={hasPostgres} status={hasPostgres}
isPending={isPendingPage} isPending={isPendingPage}
@ -134,8 +130,8 @@ export default function SiteChecklistClient({
)} )}
{' '} {' '}
and connect to project and connect to project
</SiteChecklistRow> </ChecklistRow>
<SiteChecklistRow <ChecklistRow
title="Setup blob store" title="Setup blob store"
status={hasBlob} status={hasBlob}
isPending={isPendingPage} isPending={isPendingPage}
@ -146,8 +142,8 @@ export default function SiteChecklistClient({
)} )}
{' '} {' '}
and connect to project and connect to project
</SiteChecklistRow> </ChecklistRow>
<SiteChecklistRow <ChecklistRow
title="Setup auth" title="Setup auth"
status={hasAuth} status={hasAuth}
isPending={isPendingPage} isPending={isPendingPage}
@ -168,8 +164,8 @@ export default function SiteChecklistClient({
</div> </div>
</InfoBlock> </InfoBlock>
{renderEnvVars(['AUTH_SECRET'])} {renderEnvVars(['AUTH_SECRET'])}
</SiteChecklistRow> </ChecklistRow>
<SiteChecklistRow <ChecklistRow
title="Setup admin user" title="Setup admin user"
status={hasAdminUser} status={hasAdminUser}
isPending={isPendingPage} isPending={isPendingPage}
@ -181,14 +177,14 @@ export default function SiteChecklistClient({
'ADMIN_EMAIL', 'ADMIN_EMAIL',
'ADMIN_PASSWORD', 'ADMIN_PASSWORD',
])} ])}
</SiteChecklistRow> </ChecklistRow>
{showRefreshButton && {showRefreshButton &&
<div className="py-4 space-y-4"> <div className="py-4 space-y-4">
<button onClick={refreshPage}> <button onClick={refreshPage}>
Check Check
</button> </button>
</div>} </div>}
</div> </Checklist>
<div className="px-10 text-gray-500"> <div className="px-10 text-gray-500">
Changes to environment variables require a redeploy Changes to environment variables require a redeploy
or reboot of local dev server or reboot of local dev server