mirror of
https://github.com/supabase/supabase.git
synced 2026-06-08 18:47:20 +08:00
a5b36d91de
## Screenshots ### Row editor Before: <img width="683" height="74" alt="image" src="https://github.com/user-attachments/assets/0416859b-e471-4f11-be28-33e1e0e03415" /> After: <img width="675" height="65" alt="image" src="https://github.com/user-attachments/assets/57ff796e-a67d-42f5-9fe0-f7be831aabc6" /> ### Studio lite Before: <img width="673" height="400" alt="image" src="https://github.com/user-attachments/assets/51ff1cd3-3cc5-4aa2-befb-4f345a933186" /> After: <img width="644" height="402" alt="image" src="https://github.com/user-attachments/assets/4605ad0b-656f-4da2-86d7-8ec32dc54855" /> ### Database function Before: <img width="745" height="949" alt="image" src="https://github.com/user-attachments/assets/49fba21d-0d28-4037-beb7-9ecb13f12fe7" /> After: <img width="746" height="949" alt="image" src="https://github.com/user-attachments/assets/d6755b04-df97-4195-b473-98a0269923d9" /> ### Privacy settings (`www`) Before: <img width="1122" height="808" alt="image" src="https://github.com/user-attachments/assets/02f82691-f045-4d59-b5a4-1ce635e3d9af" /> After: <img width="1110" height="768" alt="image" src="https://github.com/user-attachments/assets/ef2ee049-4cbe-4209-851a-2f024ab0063b" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Replaced legacy toggle controls across the app with a unified Switch component for consistent interaction. * Improved labels, sizes, spacing and aria relationships for clearer UI, better accessibility, and more predictable behavior (settings, filters, editors, realtime controls, privacy modal). * Removed the old Toggle implementation, styles, and top-level exports from the UI package to standardize controls. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}
export default ComponentA