mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
Jonathan Summers-MuirandClaude Sonnet 4.6
ae624aa0f2
- CustomerStoriesSection: animated accordion with brand colors (black/dark panels for Resend/Hyper/Mobbin, muted rust for Firecrawl, muted amber for E2B), raw brand-color icons for Firecrawl/E2B, author avatar ring, consistent padding - AI builder section: photo background cards for Lovable/Bolt, full-width logo strip (Lovable, Figma, v0, Bolt, Tempo, Gumloop, Pika, Udio) - Blog: remove borders/grid lines, narrower featured post, smaller title text, image border, restored list padding - Footer: replace large SOC2/HIPAA seal section with compact footnote next to copyright - Fix icon SVG viewBoxes (Resend, E2B) and add brand fill color to E2B icon ## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES/NO ## What kind of change does this PR introduce? Bug fix, feature, docs update, ... ## What is the current behavior? Please link any relevant issues here. ## What is the new behavior? Feel free to include screenshots if it includes visual changes. ## Additional context Add any other context or screenshots. --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import dayjs from 'dayjs'
|
|
import Link from 'next/link'
|
|
import React from 'react'
|
|
import { Badge } from 'ui'
|
|
|
|
import blogAuthors from '@/lib/authors.json'
|
|
import type PostTypes from '@/types/post'
|
|
import AuthorAvatars from './AuthorAvatars'
|
|
|
|
interface Props {
|
|
post: PostTypes
|
|
}
|
|
|
|
const getAuthors = (post: PostTypes) => {
|
|
const authorArray = post.author?.split(',').map((a) => a.trim()) || []
|
|
const authors = []
|
|
|
|
for (let i = 0; i < authorArray.length; i++) {
|
|
const foundAuthor = blogAuthors.find((authors: any) => {
|
|
return authors.author_id === authorArray[i]
|
|
})
|
|
if (foundAuthor) {
|
|
authors.push(foundAuthor)
|
|
}
|
|
}
|
|
return authors
|
|
}
|
|
|
|
const BlogListItem = ({ post }: Props) => {
|
|
const authors = getAuthors(post)
|
|
|
|
const sanitizeCategory = (category: string) => category.replaceAll('-', ' ')
|
|
|
|
return (
|
|
<Link
|
|
href={post.path}
|
|
prefetch={false}
|
|
className="group flex flex-col lg:grid lg:grid-cols-10 xl:grid-cols-12 w-full py-2 sm:py-4 h-full hover:bg-surface-75/50 transition-colors px-6"
|
|
>
|
|
<div className="flex w-full lg:col-span-8 xl:col-span-8">
|
|
<h3 className="text-foreground text-sm group-hover:underline">{post.title}</h3>
|
|
</div>
|
|
<div className="lg:col-span-2 xl:col-span-4 flex justify-start items-center lg:grid grid-cols-2 xl:grid-cols-3 gap-2 text-sm">
|
|
<div className="hidden lg:block">
|
|
<AuthorAvatars authors={authors} showName={false} size="md" />
|
|
</div>
|
|
{post.categories && (
|
|
<div className="hidden xl:flex text-foreground-lighter group-hover:text-foreground-light">
|
|
{post.categories.map(
|
|
(category, i) =>
|
|
i === 0 && (
|
|
<Badge key={category} className="group-hover:border-foreground-muted">
|
|
{sanitizeCategory(category)}
|
|
</Badge>
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
{post.date && (
|
|
<p className="text-foreground-lighter group-hover:text-foreground-light flex-1 lg:text-right w-full">
|
|
{dayjs(post.date).format('D MMM YYYY')}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export default BlogListItem
|