mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
chore: use next/link in nav
This commit is contained in:
Isaiah Hamilton committed
1 parent
a4a82c009e
commit
c50b9868a1
3 files changed
+125
-126
No files matched your search
@@ -3,6 +3,7 @@ import DevelopersData from 'data/Developers.json'
|
||||
import AnnouncementsData from 'data/Announcements.json'
|
||||
import { useRouter } from 'next/router'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
|
||||
type Props = {
|
||||
text: string
|
||||
@@ -37,13 +38,11 @@ const Developers = () => {
|
||||
</div>
|
||||
)
|
||||
return url ? (
|
||||
<a
|
||||
key={text}
|
||||
href={url}
|
||||
className="dark:hover:bg-scale-500 col-span-6 rounded p-3 transition hover:bg-gray-50"
|
||||
>
|
||||
{content}
|
||||
</a>
|
||||
<Link href={url} key={text}>
|
||||
<a className="dark:hover:bg-scale-500 col-span-6 rounded p-3 transition hover:bg-gray-50">
|
||||
{content}
|
||||
</a>
|
||||
</Link>
|
||||
) : (
|
||||
<div
|
||||
key={text}
|
||||
@@ -65,25 +64,24 @@ const Developers = () => {
|
||||
<ul className="mt-6 space-y-3 pb-6">
|
||||
{AnnouncementsData.map((caseStudy: any, idx: number) => (
|
||||
<li className="flow-root" key={`flyout_case_${idx}`}>
|
||||
<a
|
||||
href={caseStudy.url}
|
||||
className="dark:hover:bg-dark-700 flex items-center rounded-lg border p-3 transition duration-150 ease-in-out hover:bg-gray-100"
|
||||
>
|
||||
<div className="relative hidden h-20 w-32 flex-shrink-0 overflow-auto rounded-md sm:block">
|
||||
<Image
|
||||
src={`${basePath}/${caseStudy.imgUrl}`}
|
||||
alt="caseStudyThumb"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 sm:ml-4">
|
||||
<h4 className="text-scale-1200 text-normal mb-0 text-base">
|
||||
{caseStudy.title}
|
||||
</h4>
|
||||
<p className="p text-sm">{caseStudy.description}</p>
|
||||
</div>
|
||||
</a>
|
||||
<Link href={caseStudy.url}>
|
||||
<a className="dark:hover:bg-dark-700 flex items-center rounded-lg border p-3 transition duration-150 ease-in-out hover:bg-gray-100">
|
||||
<div className="relative hidden h-20 w-32 flex-shrink-0 overflow-auto rounded-md sm:block">
|
||||
<Image
|
||||
src={`${basePath}/${caseStudy.imgUrl}`}
|
||||
alt="caseStudyThumb"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 sm:ml-4">
|
||||
<h4 className="text-scale-1200 text-normal mb-0 text-base">
|
||||
{caseStudy.title}
|
||||
</h4>
|
||||
<p className="p text-sm">{caseStudy.description}</p>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
|
||||
import ProductIcon from '../ProductIcon'
|
||||
import { Badge } from '@supabase/ui'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
|
||||
const Product = () => {
|
||||
const { basePath } = useRouter()
|
||||
@@ -30,13 +31,11 @@ const Product = () => {
|
||||
)
|
||||
return (
|
||||
url && (
|
||||
<a
|
||||
key={name}
|
||||
href={url}
|
||||
className="hover:bg-scale-300 dark:hover:bg-scale-500 col-span-6 rounded p-3 transition"
|
||||
>
|
||||
{content}
|
||||
</a>
|
||||
<Link href={url} key={name}>
|
||||
<a className="hover:bg-scale-300 dark:hover:bg-scale-500 col-span-6 rounded p-3 transition">
|
||||
{content}
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
)
|
||||
})
|
||||
@@ -56,25 +55,24 @@ const Product = () => {
|
||||
}
|
||||
return (
|
||||
<li className="flow-root" key={`flyout_case_${idx}`}>
|
||||
<a
|
||||
href={caseStudy.url}
|
||||
className="dark:hover:bg-dark-700 flex items-center rounded-lg border p-3 transition duration-150 ease-in-out hover:bg-gray-100"
|
||||
>
|
||||
<div className="relative hidden h-20 w-32 flex-shrink-0 overflow-auto rounded-md sm:block">
|
||||
<Image
|
||||
src={`${basePath}/${caseStudy.imgUrl}`}
|
||||
alt="caseStudyThumb"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 sm:ml-4">
|
||||
<h4 className="text-scale-1200 text-normal mb-0 text-base">
|
||||
{caseStudy.title}
|
||||
</h4>
|
||||
<p className="p text-sm">{caseStudy.description}</p>
|
||||
</div>
|
||||
</a>
|
||||
<Link href={caseStudy.url}>
|
||||
<a className="dark:hover:bg-dark-700 flex items-center rounded-lg border p-3 transition duration-150 ease-in-out hover:bg-gray-100">
|
||||
<div className="relative hidden h-20 w-32 flex-shrink-0 overflow-auto rounded-md sm:block">
|
||||
<Image
|
||||
src={`${basePath}/${caseStudy.imgUrl}`}
|
||||
alt="caseStudyThumb"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 sm:ml-4">
|
||||
<h4 className="text-scale-1200 text-normal mb-0 text-base">
|
||||
{caseStudy.title}
|
||||
</h4>
|
||||
<p className="p text-sm">{caseStudy.description}</p>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
|
||||
@@ -84,13 +84,11 @@ const Nav = () => {
|
||||
</div>
|
||||
)
|
||||
return url ? (
|
||||
<a
|
||||
key={`solution_${idx}`}
|
||||
href={url}
|
||||
className="dark:hover:bg-scale-600 -m-3 my-2 flex flex-col justify-between rounded-lg p-3 transition duration-150 ease-in-out hover:bg-gray-50"
|
||||
>
|
||||
{content}
|
||||
</a>
|
||||
<Link href={url} key={`solution_${idx}`}>
|
||||
<a className="dark:hover:bg-scale-600 -m-3 my-2 flex flex-col justify-between rounded-lg p-3 transition duration-150 ease-in-out hover:bg-gray-50">
|
||||
{content}
|
||||
</a>
|
||||
</Link>
|
||||
) : (
|
||||
<div
|
||||
key={`solution_${idx}`}
|
||||
@@ -202,7 +200,7 @@ const Nav = () => {
|
||||
}
|
||||
width={124}
|
||||
height={24}
|
||||
alt="Logo"
|
||||
alt="Supabase Logo"
|
||||
/>
|
||||
</a>
|
||||
</Link>
|
||||
@@ -218,26 +216,28 @@ const Nav = () => {
|
||||
onClick={() => handleToggle(() => setOpenDevelopers(!openDevelopers))}
|
||||
active={openDevelopers}
|
||||
/>
|
||||
<a
|
||||
href="/pricing"
|
||||
className={`
|
||||
text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
|
||||
border-b-2 border-transparent p-5 px-1
|
||||
text-sm font-medium
|
||||
`}
|
||||
>
|
||||
Pricing
|
||||
</a>
|
||||
<a
|
||||
href="/blog"
|
||||
className={`
|
||||
text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
|
||||
border-b-2 border-transparent p-5 px-1
|
||||
text-sm font-medium
|
||||
`}
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
<Link href="/pricing">
|
||||
<a
|
||||
className={`
|
||||
text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
|
||||
border-b-2 border-transparent p-5 px-1
|
||||
text-sm font-medium
|
||||
`}
|
||||
>
|
||||
Pricing
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/blog">
|
||||
<a
|
||||
className={`
|
||||
text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
|
||||
border-b-2 border-transparent p-5 px-1
|
||||
text-sm font-medium
|
||||
`}
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -270,14 +270,18 @@ const Nav = () => {
|
||||
Star us on GitHub
|
||||
</Button>
|
||||
|
||||
<a href="https://app.supabase.io/">
|
||||
<Button type="default" className="hidden lg:block">
|
||||
Sign in
|
||||
</Button>
|
||||
</a>
|
||||
<a href="https://app.supabase.io/">
|
||||
<Button className="hidden text-white lg:block">Start your project</Button>
|
||||
</a>
|
||||
<Link href="https://app.supabase.io/">
|
||||
<a>
|
||||
<Button type="default" className="hidden lg:block">
|
||||
Sign in
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="https://app.supabase.io/">
|
||||
<a>
|
||||
<Button className="hidden text-white lg:block">Start your project</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"></div> */}
|
||||
@@ -324,46 +328,45 @@ const Nav = () => {
|
||||
{/* </div> */}
|
||||
<div className="mt-6 mb-12">
|
||||
<div className="space-y-1 pt-2 pb-4">
|
||||
<a
|
||||
href="https://app.supabase.io/"
|
||||
className="text-scale-900 block pl-3 pr-4 text-base font-medium dark:text-white"
|
||||
>
|
||||
Sign in
|
||||
</a>
|
||||
<Link href="https://app.supabase.io/">
|
||||
<a className="text-scale-900 block pl-3 pr-4 text-base font-medium dark:text-white">
|
||||
Sign in
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="space-y-1 pt-2 pb-4">
|
||||
<a
|
||||
href="/docs"
|
||||
className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
|
||||
>
|
||||
Developers
|
||||
</a>
|
||||
<a
|
||||
href="/company"
|
||||
className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
|
||||
>
|
||||
Company
|
||||
</a>
|
||||
<a
|
||||
href="/pricing"
|
||||
className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
|
||||
>
|
||||
Pricing
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/supabase/supabase"
|
||||
target="_blank"
|
||||
className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
<a
|
||||
href="/blog"
|
||||
target="_blank"
|
||||
className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
<Link href="/docs">
|
||||
<a className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white">
|
||||
Developers
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/company">
|
||||
<a className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white">
|
||||
Company
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/pricing">
|
||||
<a className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white">
|
||||
Pricing
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<Link href="https://github.com/supabase/supabase">
|
||||
<a
|
||||
target="_blank"
|
||||
className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/blog">
|
||||
<a
|
||||
target="_blank"
|
||||
className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="p-3">
|
||||
<p className="text-scale-900 mb-6 text-sm">Products available:</p>
|
||||
|
||||
Reference in new issue
Block a user