mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Saxon FletcherandClaude Opus 4.8
fb02182e86
## 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. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Refreshed theming across the UI to use modern color expressions and shared theme variables (including OKLCH-based gradients), improving consistency for charts, code blocks, overlays, icons, and decorative backgrounds. * **Bug Fixes** * Improved light/dark color and gradient consistency across axis/grid styling, reference lines, buttons/badges, sidebar accents, loaders, and other visual components. * **Documentation** * Updated styling/theming guidance to align with the revised semantic token system and the updated theme variable usage patterns. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import { useBreakpoint } from 'common'
|
|
import { range } from 'lib/helpers'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import React from 'react'
|
|
import { topTweets } from 'shared-data/tweets'
|
|
import { cn } from 'ui'
|
|
import { TweetCard } from 'ui-patterns/TweetCard'
|
|
|
|
interface Props {
|
|
className?: string
|
|
}
|
|
|
|
const tweetsData = topTweets
|
|
|
|
const TwitterSocialProof: React.FC<Props> = ({ className }) => {
|
|
const { basePath } = useRouter()
|
|
const isSm = useBreakpoint()
|
|
const isMd = useBreakpoint(1024)
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={cn(
|
|
'group overflow-hidden relative transition-all max-h-[500px] w-auto flex flex-nowrap',
|
|
className
|
|
)}
|
|
>
|
|
{range(0, 3).map((_, idx1: number) => (
|
|
<div
|
|
key={`tweets-range-${idx1}`}
|
|
className={cn(
|
|
'columns-1 sm:columns-2 md:columns-2 lg:columns-3 xl:columns-5',
|
|
'gap-4 h-fit pr-4',
|
|
'w-screen min-w-[900px] max-w-[900px]',
|
|
'xl:min-w-[1600px] max-w-[1600px]',
|
|
'animate-[marquee_40000ms_linear_both_infinite] group-hover:pause',
|
|
'motion-reduce:animate-none motion-reduce:will-change-none',
|
|
'will-change-transform transition-transform'
|
|
)}
|
|
>
|
|
{tweetsData.slice(0, isSm ? 9 : isMd ? 12 : 18).map((tweet: any, i: number) => (
|
|
<Link
|
|
key={tweet.text}
|
|
href={tweet.url}
|
|
target="_blank"
|
|
className={cn(
|
|
'min-w-[200px]',
|
|
'mb-4 z-0 break-inside-avoid-column block group/tweet-card',
|
|
i > 12 && 'hidden md:block'
|
|
)}
|
|
>
|
|
<TweetCard
|
|
handle={`@${tweet.handle}`}
|
|
quote={tweet.text}
|
|
img_url={`${basePath}${tweet.img_url}`}
|
|
/>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div
|
|
className="
|
|
absolute pointer-events-none
|
|
w-full h-full max-h-[400px] lg:max-h-none
|
|
inset-0 top-auto
|
|
lg:bg-[radial-gradient(50%_100%_at_50%_0,transparent_0%,transparent_50%,var(--background-default)_100%)]
|
|
"
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default TwitterSocialProof
|