mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 15:19:08 +03:00
4649bf911e
* feat: add basic api keys ui * init JWT secrets. rough * Update JWTSecretKeysTable.tsx * added some info hover cards. • found this this is probably the wrong direction • will create a new page for next iteration. * init new version * add illustrations * Update JWTSecretKeysTablev2.tsx * chore: delete API key now works * some style changes * added better tables * Update JWTSecretKeysTablev2.tsx * add public JWT dialog * moar * adding sub layout in * starts adding in a ButtonGroup * about to make into separate components * added quick copy to project loading screen * build state * basic loading * confirm dialog and loading states * switched for better loading experience * moved styles of Input to InputVariants * issue with ref type * loading,error and rest states * new loading states * alt l;ayout * add group * updated error states for permissions * copy button behaviour for secret keys * delete dialog * Update QuickKeyCopy.tsx * fix type errors * Update JWTSecretKeysTablev2.tsx * update menu to hide pages * Update SettingsMenu.utils.tsx * Update resource-query.ts * remove old file * moved JWT secrets to use valtio * Update api-keys-query.ts * fix typecheck * rename files * remove JWT stuff * revert file * remove more JWT stuff * Update package.json * Update pnpm-lock.yaml * Update ProjectLayout.tsx * Update PublishableAPIKeys.tsx * Update api-keys-query.ts * refactor api-keys-query * Update SettingsMenu.utils.tsx * Some clean up * more clean up and refactor * Update APIKeyRow.tsx * Update LayoutHeader.tsx * resolve comments * Update CreateSecretAPIKeyModal.tsx * Update APIKeyRow.tsx * Add perms check for delete API keys * Remove console log * Delete ConnectDialog.tsx * use project ref --------- Co-authored-by: Stojan Dimitrovski <sdimitrovski@gmail.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
100 lines
3.0 KiB
TypeScript
100 lines
3.0 KiB
TypeScript
import { useTheme } from 'next-themes'
|
|
import { useEffect, useState } from 'react'
|
|
import SVG from 'react-inlinesvg'
|
|
|
|
import Panel from 'components/ui/Panel'
|
|
import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
|
|
import { BASE_PATH, LOCAL_STORAGE_KEYS } from 'lib/constants'
|
|
import {
|
|
Label_Shadcn_,
|
|
RadioGroup_Shadcn_,
|
|
RadioGroupLargeItem_Shadcn_,
|
|
Separator,
|
|
singleThemes,
|
|
Switch,
|
|
Theme,
|
|
} from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
|
|
export const ThemeSettings = () => {
|
|
const [mounted, setMounted] = useState(false)
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
const [allowNavPanelToExpand, setAllowNavPanelToExpand] = useLocalStorageQuery(
|
|
LOCAL_STORAGE_KEYS.EXPAND_NAVIGATION_PANEL,
|
|
true
|
|
)
|
|
|
|
/**
|
|
* Avoid Hydration Mismatch
|
|
* https://github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch
|
|
*/
|
|
// useEffect only runs on the client, so now we can safely show the UI
|
|
useEffect(() => setMounted(true), [])
|
|
|
|
if (!mounted) return null
|
|
|
|
function SingleThemeSelection() {
|
|
return (
|
|
<form>
|
|
<RadioGroup_Shadcn_
|
|
name="theme"
|
|
onValueChange={setTheme}
|
|
aria-label="Choose a theme"
|
|
defaultValue={theme}
|
|
value={theme}
|
|
className="flex flex-wrap gap-2 md:gap-5"
|
|
>
|
|
{singleThemes.map((theme: Theme) => (
|
|
<RadioGroupLargeItem_Shadcn_
|
|
className="grow p-3"
|
|
key={theme.value}
|
|
value={theme.value}
|
|
label={theme.name}
|
|
>
|
|
<SVG src={`${BASE_PATH}/img/themes/${theme.value}.svg?v=2`} />
|
|
</RadioGroupLargeItem_Shadcn_>
|
|
))}
|
|
</RadioGroup_Shadcn_>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Panel title={<h5 key="panel-title">Appearance</h5>}>
|
|
<Panel.Content className="grid gap-8 !py-5">
|
|
<div className="grid grid-cols-12">
|
|
<div className="col-span-full md:col-span-4 flex flex-col gap-5">
|
|
<Label_Shadcn_ htmlFor="theme" className="text-light">
|
|
Theme mode
|
|
</Label_Shadcn_>
|
|
<p className="text-sm text-foreground-light max-w-[220px]">
|
|
Choose how Supabase looks to you. Select a single theme, or sync with your system.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="col-span-full md:col-span-8 flex flex-col gap-4">
|
|
<p className="text-sm text-light">Supabase will use your selected theme</p>
|
|
<SingleThemeSelection />
|
|
</div>
|
|
</div>
|
|
</Panel.Content>
|
|
<Separator />
|
|
<Panel.Content>
|
|
<FormItemLayout
|
|
isReactForm={false}
|
|
label="Expand Navigation menu"
|
|
layout="flex-row-reverse"
|
|
description="Allow the Navigation panel to expand on hover"
|
|
>
|
|
<Switch
|
|
size="large"
|
|
checked={allowNavPanelToExpand}
|
|
onCheckedChange={setAllowNavPanelToExpand}
|
|
/>
|
|
</FormItemLayout>
|
|
</Panel.Content>
|
|
</Panel>
|
|
)
|
|
}
|