mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Danny White
476d4a5851
## What kind of change does this PR introduce? Mechanical cleanup on top of the Button default-variant change (#50160). ## What is the current behavior? Many callsites still pass `variant="default"` even though that is now the component default. ## What is the new behavior? Removes redundant static `variant="default"` from legacy `Button` and `ButtonTooltip` callsites. Keeps explicit defaults where they document the API: - `button-default.tsx` and `button-sizes.tsx` demos - `DocsButton`, which pins neutral styling at the wrapper boundary ## To test Studio: - [Auth → Rate Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits): dirty the form so Cancel appears; Cancel stays neutral, Save stays green - [Project Settings → API Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys): `DocsButton` in the header actions stays neutral Design system: - [Design system → Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button): `button-default` / `button-sizes` still show explicit default styling; Primary (green) is restricted to the Primary section (and `asChild`) WWW: - [www → Brand assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets): Download logo kit / Download button kit stay neutral
100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
import 'swiper/css'
|
|
|
|
import ExampleCard from '~/components/ExampleCard'
|
|
import { CTA } from '~/types/common'
|
|
import { ArrowLeft, ArrowRight } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { useRef } from 'react'
|
|
// import Swiper core and required modules
|
|
import SwiperCore from 'swiper'
|
|
import { Navigation, Pagination } from 'swiper/modules'
|
|
import { Swiper, SwiperSlide } from 'swiper/react'
|
|
import { Button, cn } from 'ui'
|
|
|
|
// install Swiper modules
|
|
SwiperCore.use([Navigation, Pagination])
|
|
|
|
const ExamplesCarousel = ({
|
|
title,
|
|
cta,
|
|
examples,
|
|
}: {
|
|
title: string | React.ReactNode
|
|
cta: CTA
|
|
examples: any[]
|
|
}) => {
|
|
const prevRef = useRef(null)
|
|
const nextRef = useRef(null)
|
|
|
|
return (
|
|
<div id="examples" className="container">
|
|
<div className="w-full flex flex-col lg:flex-row justify-between items-start lg:items-end gap-4">
|
|
<h3 className="h2 mb-0!">{title}</h3>
|
|
{cta && (
|
|
<Button asChild size="tiny">
|
|
<Link href={cta.href}>{cta.label}</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="mt-8 lg:mt-10">
|
|
<Swiper
|
|
style={{ overflow: 'visible' }}
|
|
loop={true}
|
|
initialSlide={0}
|
|
spaceBetween={10}
|
|
slidesPerView={3}
|
|
autoplay={{
|
|
delay: 2400,
|
|
}}
|
|
speed={300}
|
|
navigation={{
|
|
prevEl: prevRef.current,
|
|
nextEl: nextRef.current,
|
|
}}
|
|
onInit={(swiper: any) => {
|
|
swiper.params.navigation.prevEl = prevRef.current
|
|
swiper.params.navigation.nextEl = nextRef.current
|
|
swiper.navigation.update()
|
|
}}
|
|
breakpoints={{
|
|
320: {
|
|
slidesPerView: 1.1,
|
|
spaceBetween: 10,
|
|
},
|
|
720: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 10,
|
|
},
|
|
920: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 10,
|
|
},
|
|
1024: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 20,
|
|
},
|
|
}}
|
|
>
|
|
{Object.values(examples).map((example: any, i: number) => {
|
|
return (
|
|
<SwiperSlide key={example.title}>
|
|
<ExampleCard i={i} {...example} />
|
|
</SwiperSlide>
|
|
)
|
|
})}
|
|
</Swiper>
|
|
<div className="container mx-auto mt-3 hidden flex-row justify-between md:flex">
|
|
<div ref={prevRef} className={cn('p ml-4 cursor-pointer')}>
|
|
<ArrowLeft />
|
|
</div>
|
|
<div ref={nextRef} className="p mr-4 cursor-pointer">
|
|
<ArrowRight />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ExamplesCarousel
|