mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Joshen Lim
18080d88f7
## Context Adds an empty state for the branch management page, if no preview branches have yet to be created (overview wont be shown) - mainly visual changes here. The main intention here is to surface the GH connection setup a bit more (otherwise the only CTA for that is in the side nav which is easily missed + its not clear up front what the benefit of the GH connection is in the context of branching) This is how it looked like before for reference: <img width="1346" height="956" alt="image" src="https://github.com/user-attachments/assets/776ce3f4-e12b-42e4-8e90-0d5ca15dc58f" /> And this is what I'm thinking for the empty state: <img width="1037" height="431" alt="image" src="https://github.com/user-attachments/assets/d3a8871e-74d2-499a-b317-f739ed925668" /> GH connection will flip its badge and hide the CTA if there already is a GH connection <img width="1038" height="443" alt="image" src="https://github.com/user-attachments/assets/4bf2d34d-6c74-4206-b83c-38ba84b99fb3" />
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)