Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ecosystem section #94

Merged
merged 38 commits into from
Sep 14, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
b8edc54
Add ecosystem template
evandrosaturnino Aug 28, 2023
7f1931c
Add ecosystem hero section
evandrosaturnino Aug 29, 2023
b559d72
Add ecosystem integrations layout
evandrosaturnino Aug 29, 2023
b703fd9
Add ecosystem programs and events section
evandrosaturnino Aug 29, 2023
10876e9
Add sliding effect to integrations cards
evandrosaturnino Aug 29, 2023
acf0edc
Add ecosystem projects and tools layout
evandrosaturnino Aug 30, 2023
f2219eb
Add filter and sort to ecosystem cards
evandrosaturnino Aug 30, 2023
7550803
Add box shadow to programs and events cards
evandrosaturnino Aug 30, 2023
ab7d92e
Update projects and tools information
evandrosaturnino Aug 30, 2023
a509f85
Add ecosystem resources section
evandrosaturnino Aug 31, 2023
61d1c5a
Update copies of ecosystem section
evandrosaturnino Aug 31, 2023
2a3cda8
Add social section in ecosystem page
evandrosaturnino Aug 31, 2023
afa719c
Refactored resources section naming
evandrosaturnino Aug 31, 2023
232d344
Add box shadow to ecosystem cards
evandrosaturnino Aug 31, 2023
4b2d02d
Hide section background image in smaller screens
evandrosaturnino Aug 31, 2023
b42d5fc
Improved overall ecosystem responsiveness
evandrosaturnino Aug 31, 2023
55e937d
Refactored pagination funcionalities
evandrosaturnino Aug 31, 2023
0a19be5
Add new tools in projects and tools section
evandrosaturnino Sep 4, 2023
491f2b7
Add standard order for projects and tools
evandrosaturnino Sep 4, 2023
cb373e9
Refactored project and tools date format
evandrosaturnino Sep 5, 2023
d75711e
Fix typo in programs and events
evandrosaturnino Sep 5, 2023
8128f58
Refactored section template size prop
evandrosaturnino Sep 5, 2023
f28c994
Refactored highlight word functionality
evandrosaturnino Sep 5, 2023
cbca29c
Refactored enum term plural to singular
evandrosaturnino Sep 5, 2023
1087eaf
Refactored ecosystem pagination funcionality
evandrosaturnino Sep 5, 2023
3fbae5e
Replace parseint to integer declaration
evandrosaturnino Sep 5, 2023
a5bec5f
Fix ecosystem description two lines issue
evandrosaturnino Sep 8, 2023
e8095d5
Refactored ecosystem project and tools date type
evandrosaturnino Sep 8, 2023
01baac9
Refactored types in convert date to timestamp hook
evandrosaturnino Sep 8, 2023
2d1ff47
Fix linting in ecosystem content file
evandrosaturnino Sep 8, 2023
f37fa9b
Refactored community section cards
evandrosaturnino Sep 9, 2023
e398b3d
Add bigger images for programs and events
evandrosaturnino Sep 9, 2023
e9ed3f6
Removed unnecessary comment
evandrosaturnino Sep 9, 2023
f19c6b4
Refactored projects and tools buttons variants
evandrosaturnino Sep 9, 2023
5b424c3
Remove inner spacing in programs and events cards
evandrosaturnino Sep 9, 2023
7d6be4b
Remove projects and tools button hover effect
evandrosaturnino Sep 9, 2023
530136c
Add height to programs and events images
evandrosaturnino Sep 9, 2023
30f9de3
Refactored integrations cards section
evandrosaturnino Sep 9, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions src/components/FilterMenu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from "react"
import { Button, Stack } from "@chakra-ui/react"

interface FilterMenuProps {
options: string[]
activeFilter: string | null
setActiveFilter: React.Dispatch<React.SetStateAction<string | null>>
setCurrentPage: React.Dispatch<React.SetStateAction<number>>
}

const FilterMenu: React.FC<FilterMenuProps> = ({
options,
activeFilter,
setActiveFilter,
setCurrentPage,
}) => {
return (
<Stack direction="row" flexWrap="wrap" spacing={{ md: 3 }}>
{options.map((option, index) => (
<Button
key={index}
color={activeFilter === option ? "white" : "gray.500"}
onClick={() => {
setCurrentPage(1)
setActiveFilter(option)
}}
textTransform="capitalize"
variant="ghost"
>
{option}
</Button>
))}
</Stack>
)
}

export default FilterMenu
30 changes: 30 additions & 0 deletions src/components/HighlightWord.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React, { FC } from "react"
import { RoleTemplateProps } from "../templates/home-page/SectionTemplate"
import { BoxProps, Text } from "@chakra-ui/react"

export interface HighlightWordProps extends BoxProps {
title: string
highlightedWord: string
}

export const HighlightWord: FC<HighlightWordProps> = ({
title,
highlightedWord,
...highlightedWordProps
}) => {
const titleSplittedByHighlightedWord = title.split(highlightedWord!)
return (
<>
{titleSplittedByHighlightedWord.map((item, index) => (
<React.Fragment key={`text-${index}`}>
{item}
{index !== titleSplittedByHighlightedWord.length - 1 && (
<Text as="span" bgClip="text" key={index} {...highlightedWordProps}>
{highlightedWord}
</Text>
)}
</React.Fragment>
))}
</>
)
}
2 changes: 1 addition & 1 deletion src/components/Image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export const Image: FC<ImageProps & IconProps & { childImageSharp?: any }> = ({
childImageSharp,
...restProps
}) => {
if (internal.mediaType === "image/svg+xml" && svg) {
if (internal?.mediaType === "image/svg+xml" && svg) {
const IconComponent = buildIcon(id, svg)
return <IconComponent {...restProps} />
} else if (gatsbyImageData) {
Expand Down
115 changes: 115 additions & 0 deletions src/components/IntegrationCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import { FC, useEffect, useState, useRef } from "react"
import { Image, ImageProps } from "./Image"
import Card from "./Card"
import { LabelSm } from "./Typography"
import { Box, Stack } from "@chakra-ui/react"

interface IntegrationCardProps {
image: ImageProps
title: string
}

const IntegrationCard: FC<IntegrationCardProps> = ({
image,
title,
...props
}) => {
return (
<Card
boxShadow={"0px 0px 100px 5px rgba(153, 116, 255, 0.08)"}
minW="170px"
borderRadius={35}
py={3}
px={4}
{...props}
>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Image left={0} top={0} boxSize="40px" h="40px" w="40px" {...image} />
<Box display="flex" justifyContent="center" w="100%">
<LabelSm>{title}</LabelSm>
</Box>
</Stack>
</Card>
)
}

export const IntegrationsCardGroup: FC<{ cards: IntegrationCardProps[] }> = ({
cards,
}) => {
const [cardSet, setCardSet] = useState<IntegrationCardProps[]>([])
const scrollContainer = useRef<HTMLDivElement>(null)

const cardWidth = 170
const cardSpacing = 5

useEffect(() => {
const numberOfCards = window.innerWidth / (cardWidth + cardSpacing)
const roundedNumberOfCards = Math.floor(numberOfCards)
let newCardSet: IntegrationCardProps[] = []

// Create a new array by duplicating the original cards until we reach the
// calculated size
for (let i = 0; i < roundedNumberOfCards; i++) {
newCardSet = [...newCardSet, ...cards]
}
setCardSet(newCardSet)
}, [cardWidth, cardSpacing, cards])

useEffect(() => {
let animationFrame: number

const scrollCards = () => {
if (scrollContainer.current) {
const scrollElem = scrollContainer.current
scrollElem.scrollLeft += 1.5

// Reset to the start when reaching the end
if (
scrollElem.scrollLeft >=
scrollElem.scrollWidth - scrollElem.offsetWidth
) {
scrollElem.scrollLeft = 0
}
}
animationFrame = requestAnimationFrame(scrollCards)
}
animationFrame = requestAnimationFrame(scrollCards)

return () => {
cancelAnimationFrame(animationFrame)
}
}, [cardSet])

return (
<Box position="relative">
<Box
position="absolute"
top="0"
bottom="0"
left="0"
right="0"
boxShadow={`inset 80px 0 30px -30px rgba(29, 34, 41, 1),
inset -80px 0 30px -30px rgba(29, 34, 41, 1)`}
pointerEvents="none"
zIndex="1"
/>
<Stack
ref={scrollContainer}
id="card-container"
backgroundColor="gray.900"
direction="row"
spacing={cardSpacing}
overflowX="hidden"
py={20}
mb={-28}
position="relative"
>
{cardSet.map((card: IntegrationCardProps, i) => (
<IntegrationCard key={i} {...card} />
))}
</Stack>
</Box>
)
}

export default IntegrationCard
2 changes: 1 addition & 1 deletion src/components/Navbar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export const Navbar: FC = () => {
as="header"
>
<Container
maxW="1072px"
maxW="1140px"
h="100%"
display="flex"
justifyContent="space-between"
Expand Down
3 changes: 3 additions & 0 deletions src/components/Navbar/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export interface SocialLink {
}

export enum ExternalLinkHref {
BOND_PROGRAM = "https://blog.threshold.network/unlocking-liquidity-threshold-launches-bond-program-with-bond-protocol/",
BTC_ROLE_LEARN_MORE = "BTC_ROLE_LEARN_MORE",
DAPP = "https://dashboard.threshold.network",
DUNE_DASHBOARD_TBTC = "https://dune.com/threshold/tbtc",
Expand All @@ -21,11 +22,13 @@ export enum ExternalLinkHref {
MINT_TBC = "MINT_TBC",
STAKER_ROLE_LEARN_MORE = "STAKER_ROLE_LEARN_MORE",
TELEGRAM = "TELEGRAM",
TBTC_WRAPPED_TOUR = "https://blog.threshold.network/stop-three-on-tbtcs-wrapped-tour-kicks-off-with-an-arbitrum-integration-and-a-new-galxe-oat/",
THRESHOLD_BLOG = "https://blog.threshold.network/",
THRESHOLD_DISCORD = "https://discord.gg/Threshold",
THRESHOLD_GITHUB = "https://github.com/threshold-network",
THRESHOLD_TOKEN = "https://curve.fi/teth",
THRESHOLD_TWITTER = "https://twitter.com/TheTNetwork",
THRESHOLD_YOUTUBE_SUBSCRIBE = "https://www.youtube.com/@Threshold.Network?sub_confirmation=1",
TOKEN_HOLDER_ROLE_LEARN_MORE = "TOKEN_HOLDER_ROLE_LEARN_MORE",
WORMHOLE_HAKATON = "https://www.encode.club/wormhole-hackathon",
}
40 changes: 31 additions & 9 deletions src/components/PageSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,23 @@ import { Image } from "../components/Image"
import useChakraBreakpoint from "../hooks/useChakraBreakpoint"
import { ImageProps } from "./Image"

export const PageSection: FC<BoxProps & { withSmallPadding?: boolean }> = ({
withSmallPadding,
children,
...props
}) => {
export interface SectionImageProps {
imageProps: ImageProps
isImageBackground?: boolean
}

export const PageSection: FC<
BoxProps & { withSmallPadding?: boolean; withMediumPadding?: boolean }
> = ({ withSmallPadding, withMediumPadding, children, ...props }) => {
return (
<Box
py={withSmallPadding ? { base: 8, md: 16 } : { base: 20, md: 40 }}
py={
withSmallPadding
? { base: 8, md: 16 }
: withMediumPadding
? { base: 14, md: 28 }
: { base: 20, md: 40 }
}
as="section"
{...props}
>
Expand Down Expand Up @@ -45,12 +54,25 @@ export const ResponsiveStack: FC<
)
}

export const SectionImage: FC<ImageProps> = (imageProps) => {
export const SectionImage: FC<SectionImageProps> = ({
imageProps,
isImageBackground,
}) => {
const mdSize = useChakraBreakpoint("md")

return (
<Box maxW="415px" maxH="300px" mx={mdSize ? "auto !important" : undefined}>
<Image {...imageProps} />
<Box
display={isImageBackground ? { base: "none", md: "flex" } : "flex"}
justifyContent="center"
maxW="415px"
maxH="300px"
overflowX="hidden"
mx={mdSize ? "auto !important" : undefined}
>
<Image
position={isImageBackground ? "absolute" : undefined}
{...imageProps}
/>
</Box>
)
}
Expand Down
63 changes: 63 additions & 0 deletions src/components/Pagination.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { FC } from "react"
import { Stack, Text, Box } from "@chakra-ui/react"
import { ChevronRightIcon } from "@chakra-ui/icons"

interface PaginationProps {
totalPages: number
currentPage: number
setCurrentPage: React.Dispatch<React.SetStateAction<number>>
}

const Pagination: FC<PaginationProps> = ({
totalPages,
currentPage,
setCurrentPage,
}) => {
const goToNextPage = () => {
if (currentPage < totalPages) {
setCurrentPage(currentPage + 1)
}
}

const goToLastPage = () => {
setCurrentPage(totalPages)
}
return (
<Stack direction="row" spacing={4} align="center">
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
<Text
key={page}
color={currentPage === page ? "white" : "gray.500"}
borderBottom={currentPage === page ? "1px solid white" : "none"}
cursor="pointer"
onClick={() => setCurrentPage(page)}
>
{page}
</Text>
))}
<Box
h={2}
w={3}
display="flex"
alignItems="center"
as="button"
onClick={goToNextPage}
>
<ChevronRightIcon />
</Box>
<Box
h={2}
w={3}
display="flex"
alignItems="center"
borderRight="1px solid"
as="button"
onClick={goToLastPage}
>
<ChevronRightIcon />
</Box>
</Stack>
)
}

export default Pagination
Loading