mirror of
https://github.com/supabase/supabase.git
synced 2026-10-19 08:09:11 +03:00
Ivan VasilovandJoshen Lim
05a542ccea
* Add lucide-react to docs (to make the autocomplete work). * Migrate the docs app icons. * Migrate the ui-patterns. * Remove the old icons from ui package. * Migrate the www app from react-feather icons. * Migrate all of studio icons. * Migrate the only component in design-system. * Fix an old import in ui package. Revert an import in docs app. * Fix some pages in www. * Remove unneeded files used in generation of icons. * Fix a prettier error. * Fix more issues in www. * Fix an issue in Log Date picker. * Replace all string sizes with number sizes because the icons grew in some cases. * Fix more imports in security page. * Fix an extra import. * Remove the size prop from all icons if they're in a button and they match the button size. * Minor fixes for docs and www. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import Link from 'next/link'
|
|
import { Button } from 'ui'
|
|
import ProductIcon from '../ProductIcon'
|
|
import { BookOpen } from 'lucide-react'
|
|
|
|
type subheader = string
|
|
interface Types {
|
|
h1: string | React.ReactNode
|
|
subheader: (string | React.ReactNode)[]
|
|
icon?: string
|
|
title?: string
|
|
image?: React.ReactNode
|
|
footer?: React.ReactNode
|
|
documentation_url?: string
|
|
}
|
|
|
|
const ProductHeader = (props: Types) => (
|
|
<div className="container relative mx-auto px-6 pt-16 pb-0 sm:px-16 lg:pt-32 xl:px-20">
|
|
<div className="grid grid-cols-12">
|
|
<div className="col-span-12 space-y-8 lg:col-span-5">
|
|
<div>
|
|
{props.icon || props.title ? (
|
|
<div className="mb-4 flex items-center gap-3">
|
|
{props.icon && <ProductIcon icon={props.icon} />}
|
|
{props.title && (
|
|
<span className="text-foreground" key={`product-name-${props.title}`}>
|
|
{props.title}
|
|
</span>
|
|
)}
|
|
</div>
|
|
) : null}
|
|
<h1 className="h1" key={`h1`}>
|
|
{props.h1}
|
|
</h1>
|
|
</div>
|
|
<div>
|
|
{props.subheader &&
|
|
props.subheader.map((subheader, i) => {
|
|
return (
|
|
<p className="p lg:text-lg" key={i}>
|
|
{subheader}
|
|
</p>
|
|
)
|
|
})}
|
|
</div>
|
|
<div className="flex flex-row md:flex-row md:items-center">
|
|
<Button asChild size="medium">
|
|
<Link href="https://supabase.com/dashboard" as="https://supabase.com/dashboard">
|
|
Start a project
|
|
</Link>
|
|
</Button>
|
|
{props.documentation_url && (
|
|
<Button asChild type="default" size="medium" icon={<BookOpen />}>
|
|
<Link href={props.documentation_url} as={props.documentation_url} className="ml-2">
|
|
See documentation
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{props.footer && <div className="mb-4">{props.footer}</div>}
|
|
</div>
|
|
{props.image && (
|
|
<div className="col-span-12 mt-8 lg:col-span-7 lg:mt-0 xl:col-span-6 xl:col-start-7">
|
|
{props.image}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
export default ProductHeader
|