supabase/apps/studio/pages

Writing pages

Rough guidelines

• Try to break down your pages into smaller building blocks - components which are tightly coupled to a page can be placed within the folder components/interfaces/xxx/... (Refer to the README.md under the components folder)
• Keep to using useState hooks for any UI related logic, do not create MobX local stores to handle UI logic.

Template for building pages

import { NextPage } from 'next'
import { observer } from 'mobx-react-lite'

import { useStore, withAuth } from 'hooks'

// Import the corresponding layout based on the page
import { Layout } from 'components/layouts'

// Import the main building blocks of the page
import { ... } from 'components/interfaces/xxx'

// Import reusable UI components if needed
import { ... } from 'components/ui/xxx'

// Name your page accordingly
const Page: NextPage = () => {

  // Access the store via the useStore hook
  const { meta } = useStore()

  return (
    <Layout>
      <div>Page content</div>
    </Layout>
  )
}

export default withAuth(observer(Page))