mirror of
https://github.com/supabase/supabase.git
synced 2026-07-07 02:34:21 +08:00
cc008ef983
* First * Update * Move connection string panel to its own component * Add connection strings * Format button * Add dummy files to get logic working * Add mdx packages * add file handling and change logic * Support connections * Fix icons, add direct and graphql * Remove mdx stuff * Add pooler toggle * Fix child logic * Fix grandchild logic * Refactor data object * Move back to dialog ui * Refactor to shadcn tabs * Find the files * Wire up icons * Loop over connection types * Reformat file paths * Remove from project home * fix tab rendering issue * Check for unique keys * Add new libs * comment * Add direct connection ui * Get project connection strings * Cleanup * Add project keys * Add types file * Undo update * Add next app files * Add files * Add next pages files * Add nuxt * Fix env vars * Add rest of frameworks, graphql and orms * Add orms * Fix types * Add guide links * Run prettier * Separate graphql * Move ui * Move direct connection to first position * Move to single files * Update styling * Fix locations * Fix next content * Fix dialog close button, add proper light mode theme * Fix dialog style issues * CleanupA * Pin to top * Feat/homepage connect modal combined styling update (#21079) * chore: update styling. also moved useStates as it was sort of duplicated * Cleanup --------- Co-authored-by: Terry Sutton <saltcod@gmail.com> * Close pooler modal * Make the db connection panel blend in * Allow for DatabaseSelector * Dont open by default * Some fixes * Set min height to loader * Fix * Small styling fixes for table editor sort filter popover * Make connect button stand out --------- Co-authored-by: Jordi Enric <jordi.err@gmail.com> Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { PropsWithChildren, ReactNode } from 'react'
|
|
import { Loading, cn } from 'ui'
|
|
|
|
interface PanelProps {
|
|
bodyClassName?: string
|
|
className?: string
|
|
footer?: JSX.Element | false
|
|
hideHeaderStyling?: boolean
|
|
loading?: boolean
|
|
noMargin?: boolean
|
|
title?: ReactNode | false
|
|
wrapWithLoading?: boolean
|
|
noHideOverflow?: boolean
|
|
headerClasses?: string
|
|
}
|
|
|
|
function Panel(props: PropsWithChildren<PanelProps>) {
|
|
const content = (
|
|
<div
|
|
className={cn(
|
|
'rounded-md border border-overlay shadow-sm',
|
|
props.noHideOverflow ? '' : 'overflow-hidden',
|
|
props.noMargin ? '' : 'mb-8',
|
|
props.className
|
|
)}
|
|
>
|
|
{props.title && (
|
|
<div
|
|
className={cn(
|
|
props.hideHeaderStyling ? 'bg-surface-100 border-b border-overlay' : 'bg-surface-100',
|
|
props.headerClasses
|
|
)}
|
|
>
|
|
<div className="flex items-center px-6 py-4">{props.title}</div>
|
|
</div>
|
|
)}
|
|
<div className={cn('bg-surface-100', props.bodyClassName)}>{props.children}</div>
|
|
|
|
{props.footer && (
|
|
<div className="bg-surface-100 border-t border-overlay">
|
|
<div className="flex h-12 items-center px-6">{props.footer}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
|
|
if (props.wrapWithLoading === false) {
|
|
return content
|
|
}
|
|
|
|
return <Loading active={Boolean(props.loading)}>{content}</Loading>
|
|
}
|
|
|
|
function Content({ children, className }: { children: ReactNode; className?: string | false }) {
|
|
return <div className={cn('px-6 py-4', className)}>{children}</div>
|
|
}
|
|
|
|
Panel.Content = Content
|
|
export default Panel
|