add carousel
This commit is contained in:
saml33
parent
652c7c6a59
commit
06219f919d
|
|
@ -4,8 +4,6 @@ import { fetchAppStatsData, fetchMangoMarketData } from '../utils/mango'
|
|||
import { fetchTokenPages } from '../../contentful/tokenPage'
|
||||
import { draftMode } from 'next/headers'
|
||||
import { fetchHomePageAnnouncements } from '../../contentful/homePageAnnouncement'
|
||||
import SectionWrapper from '../components/shared/SectionWrapper'
|
||||
import Announcement from '../components/home/Announcement'
|
||||
|
||||
const metaTitle = 'Mango Markets | Safer. Smarter. Faster.'
|
||||
const metaDescription =
|
||||
|
|
@ -50,15 +48,12 @@ async function Page() {
|
|||
|
||||
return (
|
||||
<div>
|
||||
{announcements?.length ? (
|
||||
<SectionWrapper className="flex justify-center pt-4 pb-10" noPaddingY>
|
||||
{announcements.map((announcement, i) => (
|
||||
<Announcement key={announcement.title + i} data={announcement} />
|
||||
))}
|
||||
</SectionWrapper>
|
||||
) : null}
|
||||
|
||||
<HomePage appStatsData={appStatsData} markets={markets} tokens={tokens} />
|
||||
<HomePage
|
||||
announcements={announcements}
|
||||
appStatsData={appStatsData}
|
||||
markets={markets}
|
||||
tokens={tokens}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Image from 'next/image'
|
||||
import { HomePageAnnouncement } from '../../../contentful/homePageAnnouncement'
|
||||
import { ChevronRightIcon } from '@heroicons/react/20/solid'
|
||||
// import { ChevronRightIcon } from '@heroicons/react/20/solid'
|
||||
import { ReactNode } from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const AnnouncementWrapper = ({
|
|||
path: string
|
||||
}) => {
|
||||
const classNames =
|
||||
'mx-2 bg-th-bkg-2 py-3 px-4 rounded-lg flex items-center justify-between'
|
||||
'border border-th-bkg-4 py-3 px-4 rounded-lg flex items-center justify-between'
|
||||
return isExternal ? (
|
||||
<a className={classNames} href={path} rel="noopener noreferrer">
|
||||
{children}
|
||||
|
|
@ -27,7 +27,7 @@ const AnnouncementWrapper = ({
|
|||
}
|
||||
|
||||
const Announcement = ({ data }: { data: HomePageAnnouncement }) => {
|
||||
const { linkPath, description, image, title } = data
|
||||
const { category, linkPath, description, image, title } = data
|
||||
const imageSrc = image?.src
|
||||
const imageAlt = image?.alt || 'CTA Image'
|
||||
const isExtenalLink = linkPath.includes('http')
|
||||
|
|
@ -39,18 +39,17 @@ const Announcement = ({ data }: { data: HomePageAnnouncement }) => {
|
|||
className="flex-shrink-0 rounded-full"
|
||||
src={`https:${imageSrc}`}
|
||||
alt={imageAlt}
|
||||
height={40}
|
||||
width={40}
|
||||
height={48}
|
||||
width={48}
|
||||
/>
|
||||
) : null}
|
||||
<span>
|
||||
<span className="text-th-fgd-2 text-sm block font-display">
|
||||
{title}
|
||||
</span>
|
||||
<span className="text-sm block text-th-fgd-3">{description}</span>
|
||||
</span>
|
||||
<div>
|
||||
<p className="mb-1 text-xs text-th-active leading-none">{category}</p>
|
||||
<p className="text-th-fgd-2 text-sm block font-display">{title}</p>
|
||||
<p className="text-sm block text-th-fgd-3">{description}</p>
|
||||
</div>
|
||||
</span>
|
||||
<ChevronRightIcon className="ml-3 h-6 w-6 text-th-fgd-4 flex-shrink-0" />
|
||||
{/* <ChevronRightIcon className="ml-3 h-6 w-6 text-th-fgd-4 flex-shrink-0" /> */}
|
||||
</AnnouncementWrapper>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
CurrencyDollarIcon,
|
||||
DevicePhoneMobileIcon,
|
||||
FaceFrownIcon,
|
||||
MegaphoneIcon,
|
||||
NoSymbolIcon,
|
||||
QuestionMarkCircleIcon,
|
||||
RocketLaunchIcon,
|
||||
|
|
@ -43,6 +44,9 @@ import Link from 'next/link'
|
|||
import dayjs from 'dayjs'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
import SheenLoader from '../shared/SheenLoader'
|
||||
import { HomePageAnnouncement } from '../../../contentful/homePageAnnouncement'
|
||||
import Announcement from './Announcement'
|
||||
import Slider from 'react-slick'
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
type Markets = {
|
||||
|
|
@ -72,10 +76,12 @@ const MOBILE_IMAGE_CLASSES =
|
|||
'core-image h-[240px] w-[240px] sm:h-[300px] sm:w-[300px] md:h-[480px] md:w-[480px] mb-6 lg:mb-0'
|
||||
|
||||
const HomePage = ({
|
||||
announcements,
|
||||
appStatsData,
|
||||
markets,
|
||||
tokens,
|
||||
}: {
|
||||
announcements: HomePageAnnouncement[]
|
||||
appStatsData: AppStatsData
|
||||
markets: Markets
|
||||
tokens: TokenPageWithData[]
|
||||
|
|
@ -276,10 +282,37 @@ const HomePage = ({
|
|||
return () => ctx.revert() // <- Cleanup!
|
||||
}, [])
|
||||
|
||||
const sliderSettings = {
|
||||
arrows: false,
|
||||
dots: false,
|
||||
infinite: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
speed: 15000,
|
||||
autoplaySpeed: 15000,
|
||||
cssEase: 'linear',
|
||||
pauseOnHover: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1280,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<SectionWrapper
|
||||
className="overflow-hidden h-[760px] lg:h-[500px]"
|
||||
className="overflow-hidden h-[760px] lg:h-[600px] lg:flex lg:items-center py-12 lg:py-0"
|
||||
noPaddingY
|
||||
>
|
||||
<div className="grid grid-cols-12" ref={topSection}>
|
||||
|
|
@ -299,10 +332,10 @@ const HomePage = ({
|
|||
size="large"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-12 lg:col-span-7 relative h-full flex justify-center lg:-bottom-12">
|
||||
<div className="col-span-12 lg:col-span-7 relative h-full flex justify-center">
|
||||
<BlackSphere />
|
||||
<img
|
||||
className="w-3/4 lg:w-[740px] absolute h-auto lg:-right-40 lg:top-1/2 lg:transform lg:-translate-y-1/2 xl:right-0"
|
||||
className="w-3/4 absolute h-auto lg:-right-40 lg:top-1/2 lg:transform lg:-translate-y-1/2 xl:right-0 lg:w-full xl:w-[740px]"
|
||||
src="/images/new/trade-desktop.png"
|
||||
alt=""
|
||||
/>
|
||||
|
|
@ -314,6 +347,28 @@ const HomePage = ({
|
|||
</div>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
{announcements?.length ? (
|
||||
<SectionWrapper
|
||||
className="mt-0 lg:mt-6 py-6 bg-th-bkg-2 pl-6 md:pl-12 lg:pl-20 xl:rounded-xl"
|
||||
noPaddingY
|
||||
noPaddingX
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<div className="hidden mr-4 sm:flex items-center justify-center w-12 h-12 bg-th-active rounded-full">
|
||||
<MegaphoneIcon className="w-6 h-6 text-th-bkg-1 -rotate-[30deg]" />
|
||||
</div>
|
||||
<div className="w-full sm:w-[calc(100%-64px)]">
|
||||
<Slider {...sliderSettings}>
|
||||
{announcements.map((announcement, i) => (
|
||||
<div className="px-2" key={announcement.title + i}>
|
||||
<Announcement data={announcement} />
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
) : null}
|
||||
<SectionWrapper className="mt-10 md:mt-0">
|
||||
<div className="grid grid-cols-6 gap-4 lg:gap-6" ref={callouts}>
|
||||
<IconWithText
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import './styles/global.css'
|
||||
import 'slick-carousel/slick/slick.css'
|
||||
import 'slick-carousel/slick/slick-theme.css'
|
||||
import LayoutWrapper from './components/LayoutWrapper'
|
||||
import ExitDraftModeLink from './components/ExitDraftModeLink'
|
||||
import { draftMode } from 'next/headers'
|
||||
|
|
|
|||
|
|
@ -49,7 +49,9 @@
|
|||
"react-dom": "^18.2.0",
|
||||
"react-flip-numbers": "^3.0.8",
|
||||
"react-i18next": "^13.5.0",
|
||||
"recharts": "^2.10.0"
|
||||
"react-slick": "^0.30.1",
|
||||
"recharts": "^2.10.0",
|
||||
"slick-carousel": "^1.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/react": "^14.1.2",
|
||||
|
|
|
|||
54
yarn.lock
54
yarn.lock
|
|
@ -1104,6 +1104,11 @@
|
|||
"@testing-library/dom" "^9.0.0"
|
||||
"@types/react-dom" "^18.0.0"
|
||||
|
||||
"@testing-library/user-event@^14.3.0":
|
||||
version "14.5.2"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
|
||||
integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
|
||||
|
||||
"@tippyjs/react@^4.2.6":
|
||||
version "4.2.6"
|
||||
resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71"
|
||||
|
|
@ -2012,6 +2017,11 @@ cjs-module-lexer@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz#6c370ab19f8a3394e318fe682686ec0ac684d107"
|
||||
integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==
|
||||
|
||||
classnames@^2.2.5:
|
||||
version "2.5.1"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
|
||||
integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
|
||||
|
||||
clean-stack@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-3.0.1.tgz#155bf0b2221bf5f4fba89528d24c5953f17fe3a8"
|
||||
|
|
@ -2626,6 +2636,11 @@ emoji-regex@^9.2.2:
|
|||
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
|
||||
integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
|
||||
|
||||
enquire.js@^2.1.6:
|
||||
version "2.1.6"
|
||||
resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
|
||||
integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
|
||||
|
||||
error-ex@^1.3.1:
|
||||
version "1.3.2"
|
||||
resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
|
||||
|
|
@ -4259,6 +4274,13 @@ json-stringify-safe@^5.0.1:
|
|||
resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
|
||||
integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
|
||||
|
||||
json2mq@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
|
||||
integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==
|
||||
dependencies:
|
||||
string-convert "^0.2.0"
|
||||
|
||||
json5@^2.2.3:
|
||||
version "2.2.3"
|
||||
resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
|
||||
|
|
@ -4469,6 +4491,11 @@ lodash.clonedeep@^4.5.0:
|
|||
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
|
||||
integrity sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==
|
||||
|
||||
lodash.debounce@^4.0.8:
|
||||
version "4.0.8"
|
||||
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
|
||||
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
|
||||
|
||||
lodash.includes@^4.3.0:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
|
||||
|
|
@ -5475,6 +5502,18 @@ react-simple-animate@^3.0.1:
|
|||
resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.5.2.tgz#ab08865c8bd47872b92bd1e25902326bf7c695b3"
|
||||
integrity sha512-xLE65euP920QMTOmv5haPlml+hmOPDkbIr5WeF7ADIXWBYt5kW/vwpNfWg8EKMab8aeDxIZ6QjffVh8v2dUyhg==
|
||||
|
||||
react-slick@^0.30.1:
|
||||
version "0.30.1"
|
||||
resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.30.1.tgz#9584e83282f6b70f26ceeac0a687870c8ca1618e"
|
||||
integrity sha512-xtxWBIJH9CvcleAfcZD5A78YtqfHYRMAIkn/AQZFk6Qh/HP/DUtbd3BqHvPKS/Oz0yuINM3YMtw0xLfXvQjeMA==
|
||||
dependencies:
|
||||
"@testing-library/user-event" "^14.3.0"
|
||||
classnames "^2.2.5"
|
||||
enquire.js "^2.1.6"
|
||||
json2mq "^0.2.0"
|
||||
lodash.debounce "^4.0.8"
|
||||
resize-observer-polyfill "^1.5.0"
|
||||
|
||||
react-smooth@^2.0.5:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.5.tgz#d153b7dffc7143d0c99e82db1532f8cf93f20ecd"
|
||||
|
|
@ -5573,6 +5612,11 @@ require-directory@^2.1.1:
|
|||
resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
|
||||
integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
|
||||
|
||||
resize-observer-polyfill@^1.5.0:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
|
||||
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
|
||||
|
||||
resolve-cwd@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
|
||||
|
|
@ -5790,6 +5834,11 @@ slice-ansi@^5.0.0:
|
|||
ansi-styles "^6.0.0"
|
||||
is-fullwidth-code-point "^4.0.0"
|
||||
|
||||
slick-carousel@^1.8.1:
|
||||
version "1.8.1"
|
||||
resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
|
||||
integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
|
||||
|
||||
source-map-js@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
|
||||
|
|
@ -5844,6 +5893,11 @@ string-argv@0.3.2:
|
|||
resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
|
||||
integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
|
||||
|
||||
string-convert@^0.2.0:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
|
||||
integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
|
||||
|
||||
string-length@^4.0.1:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
|
||||
|
|
|
|||
Loading…
Reference in New Issue