mirror of
https://github.com/ruvnet/RuVector.git
synced 2026-05-25 15:03:46 +00:00
814f595995
Major additions: - Complete Next.js studio application with 1600+ components - Docker support (Dockerfile.combined, docker-compose.yml) - GCP deployment documentation and benchmarks - SQL benchmark scripts for performance testing - Sentry integration for monitoring - Comprehensive test suite and mocks Studio features: - Dashboard and admin interfaces - Data visualization components - Authentication and user management - API integration with RuVector backend - Static data and public assets 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
97 lines
3 KiB
TypeScript
97 lines
3 KiB
TypeScript
import Link from 'next/link'
|
|
import { PropsWithChildren, ReactNode, forwardRef } from 'react'
|
|
import { LoadingLine, cn } from 'ui'
|
|
|
|
import { withAuth } from 'hooks/misc/withAuth'
|
|
import { BASE_PATH } from 'lib/constants'
|
|
import { Book, LifeBuoy, X } from 'lucide-react'
|
|
import { ScaffoldContainer } from '../Scaffold'
|
|
|
|
export type IntegrationWindowLayoutProps = {
|
|
title: string
|
|
integrationIcon: ReactNode
|
|
loading?: boolean
|
|
docsHref?: string
|
|
}
|
|
|
|
const IntegrationWindowLayout = ({
|
|
title,
|
|
integrationIcon,
|
|
children,
|
|
loading = false,
|
|
docsHref,
|
|
}: PropsWithChildren<IntegrationWindowLayoutProps>) => {
|
|
return (
|
|
<div className="flex w-full flex-col">
|
|
<Header title={title} integrationIcon={integrationIcon} />
|
|
<LoadingLine loading={loading} />
|
|
<main className="overflow-auto flex flex-col h-full bg">{children}</main>
|
|
<ScaffoldContainer className="bg-studio flex flex-row gap-6 py-6 border-t">
|
|
{docsHref && (
|
|
<Link
|
|
href={docsHref}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 text-xs text-foreground-light hover:text"
|
|
>
|
|
<Book size={16} />
|
|
Docs
|
|
</Link>
|
|
)}
|
|
<Link
|
|
href={'https://supabase.com/support'}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 text-xs text-light hover:text"
|
|
>
|
|
<LifeBuoy size={16} />
|
|
Support
|
|
</Link>
|
|
</ScaffoldContainer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const INTEGRATION_LAYOUT_MAX_WIDTH = '' // 'max-w-[720px]'
|
|
|
|
export default withAuth(IntegrationWindowLayout)
|
|
|
|
export const IntegrationWindowLayoutWithoutAuth = IntegrationWindowLayout
|
|
|
|
export type HeaderProps = {
|
|
title: string
|
|
integrationIcon: ReactNode
|
|
}
|
|
|
|
const Header = ({ title, integrationIcon }: HeaderProps) => {
|
|
return (
|
|
<div className="bg">
|
|
<ScaffoldContainer className={cn('py-3', INTEGRATION_LAYOUT_MAX_WIDTH)}>
|
|
<div className="flex items-center gap-6 w-full">
|
|
<div className="flex gap-2 items-center">
|
|
<div className="bg-white shadow border rounded p-1 w-8 h-8 flex justify-center items-center">
|
|
<img src={`${BASE_PATH}/img/supabase-logo.svg`} alt="Supabase" className="w-4" />
|
|
</div>
|
|
<X className="text-border-stronger" strokeWidth={2} size={16} />
|
|
{integrationIcon}
|
|
</div>
|
|
<span className="text-sm" title={title}>
|
|
{title}
|
|
</span>
|
|
</div>
|
|
</ScaffoldContainer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const maxWidthClasses = 'mx-auto w-full max-w-[1600px]'
|
|
const paddingClasses = 'px-6 lg:px-14 xl:px-28 2xl:px-32'
|
|
|
|
export const IntegrationScaffoldContainer = forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => {
|
|
return <div ref={ref} {...props} className={cn(maxWidthClasses, paddingClasses, className)} />
|
|
})
|
|
|
|
IntegrationScaffoldContainer.displayName = 'IntegrationScaffoldContainer'
|