Files
supabase/apps/studio/components/layouts/BillingLayout.tsx
Alaister YoungandKevin Grüneberg 70da0f1d1d chore: cleanup packages (#27770)
* chore: cleanup packages

- Avoid circular imports
- Export API-types as types
- pg-format without depending on Node internal Buffer (not browser-compatible)
- Avoid importing from barrel files in ui dir

* chore: avoid barrel file imports in studio (#27771)

* chore: avoid barrel file imports

- Removes some unused imports
- Avoids barrel file import for faster builds + less memory

* add eslint rule

* type fixes

* delete layouts barrel

* delete components/grid barrel file

* delete components/grid/utils barrel file

* delete components/grid/components/common barrel file

* delete components/grid/components/editor barrel file

* delete components/grid/components/formatter barrel file

* delete components/grid/components/grid barrel file

* delete components/grid/components/header/filter barrel file

* remote components/grid/store barrel file

* remove components/interfaces/Auth/Policies barrel file

* delete components/interfaces/Settings/Logs barrel file

* delete components/ui/CodeEditor barrel file

* delete components/ui/Forms barrel file

* delete components/ui/Shimmers barrel file

* delete data/analytics barrel file

* delete hooks barrel file

* cleanup lib/common/fetch barrel file

* final * barral files cleanup

* global react-data-grid styles

* remove console.log

---------

Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>

* fix build

---------

Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
2024-07-04 14:48:10 +08:00

60 lines
2.2 KiB
TypeScript

import Link from 'next/link'
import type { PropsWithChildren } from 'react'
import ProjectLayout from 'components/layouts/ProjectLayout/ProjectLayout'
import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
import { useSelectedProject } from 'hooks/misc/useSelectedProject'
import { withAuth } from 'hooks/misc/withAuth'
import { IconX } from 'ui'
export interface BillingLayoutProps {}
const BillingLayout = ({ children }: PropsWithChildren<BillingLayoutProps>) => {
const selectedOrganization = useSelectedOrganization()
const selectedProject = useSelectedProject()
return (
<ProjectLayout hideHeader hideIconBar>
<div className="flex h-full w-full flex-col">
{/* Header */}
<div className="flex items-center space-x-4 border-b py-4 px-5 border-default">
<Link
href={`/org/${selectedOrganization?.slug}/billing`}
className="text-foreground-lighter transition-colors hover:text-foreground"
>
<IconX size={16} strokeWidth={1.5} />
</Link>
<div className="flex items-center space-x-6">
<h1 className="text-sm text-foreground">Customize your plan</h1>
<div className="h-6 w-px bg-selection"></div>
<div className="flex items-center space-x-3">
<p className="text-sm text-foreground-light">{selectedOrganization?.name}</p>
<span className="text-border-stronger">
<svg
viewBox="0 0 24 24"
width="16"
height="16"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
shapeRendering="geometricPrecision"
>
<path d="M16 3.549L7.12 20.600"></path>
</svg>
</span>
<p className="text-sm text-foreground-light">{selectedProject?.name}</p>
</div>
</div>
</div>
<div className="overflow-auto">
<section className="relative">{children}</section>
</div>
</div>
</ProjectLayout>
)
}
export default withAuth(BillingLayout)