mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 15:49:09 +03:00
Jonathan Summers-MuirandFrancesco Sansalvadore
6d760a1a99
* chore: move to deeper dark * tidy up boxes on www * update deep-dark colors * fix homepage product cards * toned down pricing page a little * update * lots of color changes * Update grid.scss * Update EntityListItem.tsx * Update EntityListItem.tsx * fix partners page icon * fix partners page colors * update theme * Update global.css * combined dark theme so classic-dark does not break on other sites * Update package-lock.json * updated color tokens pipeline to support combined dark theme * smol updates * Update FeaturedThumb.tsx * Update BlogFilters.tsx * Update BlogListItem.tsx * Update BlogListItem.tsx * Update UserSettingsDropdown.tsx * Update NavigationBar.tsx --------- Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
90 lines
3.8 KiB
TypeScript
90 lines
3.8 KiB
TypeScript
import React from 'react'
|
|
import Link from 'next/link'
|
|
import { IconChevronRight } from 'ui'
|
|
|
|
import { data as DevelopersData } from 'data/Developers'
|
|
import { allBlogPosts, BlogPost } from 'contentlayer/generated'
|
|
|
|
type Props = {
|
|
text: string
|
|
description?: string
|
|
url?: string
|
|
icon?: any
|
|
svg?: any
|
|
}
|
|
|
|
const DevelopersDropdown = () => {
|
|
const latestPosts = allBlogPosts
|
|
.sort((a: BlogPost, b: BlogPost) => {
|
|
const isPublishedAtBefore =
|
|
a.published_at && b.published_at && Date.parse(a.published_at) < Date.parse(b.published_at)
|
|
if (isPublishedAtBefore || new Date(a.date) < new Date(b.date)) {
|
|
return 1
|
|
} else {
|
|
return -1
|
|
}
|
|
})
|
|
.slice(0, 2)
|
|
|
|
return (
|
|
<div className="flex flex-col xl:flex-row">
|
|
<div className="w-[550px] xl:w-[500px] py-8 px-8 bg-background grid gap-3 grid-cols-2">
|
|
{DevelopersData['navigation'].map((column) => (
|
|
<div key={column.label} className="p-0 flex flex-col gap-6">
|
|
<label className="text-foreground-lighter text-xs uppercase tracking-widest font-mono">
|
|
{column.label}
|
|
</label>
|
|
<ul className="flex flex-col gap-4">
|
|
{column.links.map(({ icon: Icon, ...link }: Props) => (
|
|
<li key={link.text}>
|
|
<Link
|
|
href={link.url!}
|
|
className="flex group items-center gap-2 text-foreground-light text-sm hover:text-foreground focus-visible:text-foreground focus-visible:ring-2 focus-visible:outline-none focus-visible:rounded focus-visible:ring-foreground-lighter"
|
|
>
|
|
{Icon && <Icon size={16} strokeWidth={1.2} />}
|
|
<span>{link.text}</span>
|
|
<IconChevronRight
|
|
strokeWidth={2}
|
|
className="w-3 -ml-1 transition-all will-change-transform -translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100"
|
|
/>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="bg-surface-75 flex flex-col w-[550px] xl:w-[480px] border-t xl:border-t-0 xl:border-l">
|
|
<div className="flex-col gap-2 py-8 px-10">
|
|
<Link
|
|
href="/blog"
|
|
className="group flex items-center gap-1 text-foreground-lighter hover:text-foreground text-xs uppercase tracking-widest font-mono mb-5 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm focus-visible:text-foreground"
|
|
>
|
|
<span>Blog</span>
|
|
<IconChevronRight className="h-3 w-3 transition-transform will-change-transform -translate-x-1 group-hover:translate-x-0" />
|
|
</Link>
|
|
<ul className="flex flex-col gap-5">
|
|
{latestPosts.map((post: any) => (
|
|
<li key={post.title}>
|
|
<Link
|
|
href={post.url}
|
|
className="group flex flex-col focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded"
|
|
>
|
|
<p className="text-foreground-light mb-0 line-clamp-2 group-hover:text-foreground group-focus-visible:text-foreground">
|
|
{post.title}
|
|
</p>
|
|
<p className="text-sm line-clamp-2 text-foreground-lighter leading-relaxed !mb-0 group-hover:text-foreground-light group-focus-visible:text-foreground-light">
|
|
{post.description}
|
|
</p>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DevelopersDropdown
|