Style paused project component

studio/components/layouts/ProjectLayout/ProjectPausedState.tsx

@@ -1,20 +1,23 @@
-import { FC } from 'react'
-import { observer } from 'mobx-react-lite'
-import { IconAlertCircle, IconPauseCircle } from '@supabase/ui'
+import { FC, useState } from 'react'
+import { Button, IconAlertCircle, IconPauseCircle } from '@supabase/ui'
 
 import { Project } from 'types'
+import Link from '@supabase/ui/dist/cjs/components/Typography/Link'
+import router from 'next/router'
 
 interface Props {
   project: Project
 }
 
 const ProjectPausedState: FC<Props> = ({ project }) => {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const { ref } = router.query
+
   return (
     <>
       <div className="mx-auto mt-8 mb-16 w-full max-w-7xl space-y-8">
         <div className="mx-6 space-y-8">
-          <div className="flex flex-col space-y-4 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-6">
-          </div>
+          <div className="flex flex-col space-y-4 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-6"></div>
           <div className="bg-scale-300 border-scale-400 flex h-[500px] items-center justify-center rounded border p-8">
             <div className="w-[420px] space-y-4">
               <div className="mx-auto flex max-w-[300px] items-center justify-center space-x-4 lg:space-x-8">
@@ -25,15 +28,30 @@ const ProjectPausedState: FC<Props> = ({ project }) => {
                 <p className="text-center">This project is paused.</p>
               </div>
 
-              <div className="flex flex-col items-center">
-                Restore / Delete
+              <div className="mt-4 flex items-center justify-center gap-4">
+                <Button
+                  // onClick={}
+                  size="medium"
+                  loading={isSubmitting}
+                  type="primary"
+                >
+                  Restore project
+                </Button>
+                <Link href={`/project/${ref}/settings/general`}>
+                  <a>Delete</a>
+                </Link>
               </div>
 
               <div className="flex gap-4">
-                  <IconAlertCircle className="text-red-900" size={35} strokeWidth={2} />
+                <IconAlertCircle className="text-red-900" size={35} strokeWidth={2} />
                 <div>
-                  <p className='text-lg'>Your account can only have <u>2 free projects.</u></p>
-                  <p className='text-scale-900'>To restore this project you'll need to pause or delete an existing free project first.</p>
+                  <p className="text-lg">
+                    Your account can only have <u>2 free projects.</u>
+                  </p>
+                  <p className="text-scale-900">
+                    To restore this project you'll need to pause or delete an existing free project
+                    first.
+                  </p>
                 </div>
               </div>
             </div>
@@ -44,4 +62,4 @@ const ProjectPausedState: FC<Props> = ({ project }) => {
   )
 }
 
-export default observer(ProjectPausedState)
+export default ProjectPausedState

studio/pages/project/[ref]/index.tsx

@@ -14,7 +14,9 @@ const Home: NextPageWithLayout = () => {
   const { ui } = useStore()
 
   const project = ui.selectedProject
-  console.log( toJS( project ) )
+
+  console.log('project ref:', toJS(project))
+
   const projectName =
     project?.ref !== 'default' && project?.name !== undefined
       ? project?.name
@@ -25,7 +27,7 @@ const Home: NextPageWithLayout = () => {
       <div className="mx-6 flex items-center space-x-6">
         <h1 className="text-3xl">{projectName}</h1>
         {project?.status == 'INACTIVE' && (
-          <div className='mt-2'>
+          <div className="mt-2">
             <Badge color="gray">
               <div className="flex items-center gap-2">
                 <IconPauseCircle size={15} />
@@ -37,6 +39,7 @@ const Home: NextPageWithLayout = () => {
       </div>
 
       {project && project?.status == 'INACTIVE' && <ProjectPausedState project={project} />}
+
       {IS_PLATFORM && project?.status !== 'INACTIVE' && <ProjectUsageSection />}
 
       <div className="space-y-8">
@@ -44,9 +47,9 @@ const Home: NextPageWithLayout = () => {
           <Typography.Title level={4}>Client libraries</Typography.Title>
         </div>
         <div className="mx-6 mb-12 grid gap-12 md:grid-cols-3">
-          {CLIENT_LIBRARIES.map( ( library ) => (
+          {CLIENT_LIBRARIES.map((library) => (
             <ClientLibrary key={library.language} {...library} />
-          ) )}
+          ))}
         </div>
       </div>
       <div className="space-y-8">
@@ -54,15 +57,15 @@ const Home: NextPageWithLayout = () => {
           <Typography.Title level={4}>Example projects</Typography.Title>
         </div>
         <div className="mx-6 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-          {EXAMPLE_PROJECTS.map( ( project ) => (
+          {EXAMPLE_PROJECTS.map((project) => (
             <ExampleProject key={project.url} {...project} />
-          ) )}
+          ))}
         </div>
       </div>
     </div>
   )
 }
 
-Home.getLayout = ( page ) => <ProjectLayoutWithAuth>{page}</ProjectLayoutWithAuth>
+Home.getLayout = (page) => <ProjectLayoutWithAuth>{page}</ProjectLayoutWithAuth>
 
-export default observer( Home )
+export default observer(Home)