mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 12:55:06 +03:00
Tomás PozoandTerry Sutton
3cc4e215d5
* Create initial draft * Update application url * Copy changes * Update quote samples * Fix typo * Fix prop value * Fix hydration errors * Fix hydration errors, 2 * Fix hydration errors, 3 * Solve icons hydration issue * Remove console log * hide quotes * Nudges * Add form component and integration to notion (WIP) * Fix some fields mapping * Nudges and add form inline * Some fixes * Refactor notion lib * Integrate customerio * Remove logs * Apply some minor fixes * Add country selector and split location fields * Mark required fields * Add sentry error capturing * Add sentry dsn routing to edge config * Fix with a different sentry client * Remove custom transport on default sentry * Fix prettier issues * Use node client on sentry * Make monthly commitment text * Minor improvements * Use text monthly commitment in notion * Remove country flag on select item for typing search * Update apps/www/data/open-source/contributing/supasquad.tsx * Restore form reset * Fix missing env vars --------- Co-authored-by: Terry Sutton <saltcod@gmail.com>
91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
import 'swiper/css'
|
|
|
|
import Link from 'next/link'
|
|
import { FC } from 'react'
|
|
import { Swiper, SwiperSlide } from 'swiper/react'
|
|
|
|
import SectionContainer from '~/components/Layouts/SectionContainer'
|
|
import Panel from '~/components/Panel'
|
|
|
|
import type { Quote, Quotes } from '~/data/solutions/solutions.utils'
|
|
import Image from 'next/image'
|
|
|
|
const Quotes: FC<Quotes> = (props) => (
|
|
<section id={props.id}>
|
|
<div className="overflow-hidden">
|
|
<SectionContainer className="!py-4">
|
|
<ul className="hidden xl:flex flex-col gap-4 md:flex-row items-stretch w-full h-auto min-h-64">
|
|
{props.items?.map((quote: Quote) => (
|
|
<li key={quote.author} className="w-full">
|
|
<QuoteCard {...quote} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="xl:hidden">
|
|
<Swiper
|
|
style={{ zIndex: 0, marginRight: '1px' }}
|
|
initialSlide={0}
|
|
spaceBetween={12}
|
|
slidesPerView={1.2}
|
|
speed={300}
|
|
watchOverflow
|
|
threshold={2}
|
|
updateOnWindowResize
|
|
className="h-[300px] w-full !overflow-visible"
|
|
breakpoints={{
|
|
320: {
|
|
slidesPerView: 1.2,
|
|
},
|
|
540: {
|
|
slidesPerView: 1.5,
|
|
},
|
|
900: {
|
|
slidesPerView: 2.5,
|
|
},
|
|
}}
|
|
>
|
|
{props.items?.map((quote: Quote, i: number) => (
|
|
<SwiperSlide key={`${i}-mobile`}>
|
|
<QuoteCard {...quote} />
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</SectionContainer>
|
|
</div>
|
|
</section>
|
|
)
|
|
|
|
const QuoteCard: FC<Quote> = ({ quote, author, avatar, authorTitle }) => {
|
|
return (
|
|
<Panel
|
|
outerClassName="w-full h-full"
|
|
innerClassName="flex flex-col justify-between text-foreground-lighter bg-surface-75 p-5"
|
|
>
|
|
<div className="flex flex-col justify-between gap-6">
|
|
<q className="text-base">{quote}</q>
|
|
</div>
|
|
|
|
<div className="flex flex-row gap-3 w-full items-center">
|
|
<Image
|
|
src={avatar}
|
|
alt={author}
|
|
width={32}
|
|
height={32}
|
|
className="bg-surface-200 rounded-full border flex-shrink-0"
|
|
/>
|
|
<div className="flex flex-col gap-0">
|
|
<span className="text-base text-foreground-light leading-snug">{author}</span>
|
|
{authorTitle && (
|
|
<span className="uppercase font-mono text-sm text-foreground-lighter leading-tight">
|
|
{authorTitle}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
)
|
|
}
|
|
|
|
export default Quotes
|