mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 20:35:07 +03:00
Joshen LimandAli Waseem
f0b44ae087
## Context Small adjustments to wildcard routes - Header logo to be consistent with other layouts - Before: <img width="463" height="172" alt="image" src="https://github.com/user-attachments/assets/217bb9d8-d4f9-4482-8c40-5f0c49afeee6" /> - After: <img width="523" height="229" alt="image" src="https://github.com/user-attachments/assets/707dd541-f0ab-4023-ba25-e244eb7c3e7a" /> - Project wildcard route list view to be consistent with org/[slug] page - project list shouldn't take full height if there's no need to, scroll behaviour should be on the page - Before: <img width="1224" height="868" alt="image" src="https://github.com/user-attachments/assets/6ff9f8a3-9f68-40a0-9a0b-e60fbef603cd" /> - After: <img width="1230" height="477" alt="image" src="https://github.com/user-attachments/assets/91d65969-9457-49f9-9ce2-d3befc4576ad" /> Co-authored-by: Ali Waseem <waseema393@gmail.com>
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
useStatehooks for any UI related logic, do not create MobX local stores to handle UI logic.
Template for building pages
import { NextPage } from 'next'
import { withAuth } from 'hooks/misc/withAuth'
// 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 = () => {
return (
<Layout>
<div>Page content</div>
</Layout>
)
}
export default withAuth(Page)