From 0123448838fe0360dcdaf6db421c988c2d362cd5 Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Wed, 25 Sep 2024 14:46:48 +1000 Subject: [PATCH] feat: add carousel to home page (#66) --- .../components/Carousel/cards/constants.ts | 11 +++ .../components/Carousel/carousel.styles.ts | 46 ++++++++++ .../components/Carousel/carousel.tsx | 29 ++++++ .../components/Carousel/common/constants.ts | 11 +++ .../components/Carousel/common/utils.ts | 77 ++++++++++++++++ .../Carousel/components/Cards/cards.styles.ts | 92 +++++++++++++++++++ .../Carousel/components/Cards/cards.tsx | 32 +++++++ .../components/Carousel/content/index.tsx | 2 + .../Carousel/content/learnToAnalyzeData.mdx | 3 + .../shareUsageAndJoinAdvisoryPanel.mdx | 11 +++ .../Carousel/hooks/useInteractiveCarousel.ts | 50 ++++++++++ .../SectionHero/components/Hero/hero.tsx | 34 +++---- .../SectionHero/sectionHero.styles.ts | 76 +++++++-------- .../components/SectionHero/sectionHero.tsx | 42 +++------ .../SectionHero/components/Hero/hero.tsx | 2 +- .../common/Bullets/bullets.styles.ts | 22 ++--- app/components/common/Bullets/bullets.tsx | 7 +- mdx-components.tsx | 2 + 18 files changed, 440 insertions(+), 109 deletions(-) create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/cards/constants.ts create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.styles.ts create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.tsx create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/common/utils.ts create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.tsx create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/content/index.tsx create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/hooks/useInteractiveCarousel.ts diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/cards/constants.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/cards/constants.ts new file mode 100644 index 0000000..0c25329 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/cards/constants.ts @@ -0,0 +1,11 @@ +import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card"; +import * as MDX from "../content"; + +export const CAROUSEL_CARDS: Pick[] = [ + { + text: MDX.ShareUsageAndJoinAdvisoryPanel({}), + }, + { + text: MDX.LearnToAnalyzeData({}), + }, +]; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.styles.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.styles.ts new file mode 100644 index 0000000..7ce1669 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.styles.ts @@ -0,0 +1,46 @@ +import { + mediaDesktopSmallUp, + mediaTabletUp, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import styled from "@emotion/styled"; +import { Bullets } from "../../../../../../../common/Bullets/bullets"; +import { + CAROUSEL_HEIGHT, + CAROUSEL_HEIGHT_SM, + MAX_CARD_WIDTH, +} from "./common/constants"; + +export const CarouselView = styled.div` + grid-column: 1 / -1; + max-width: ${MAX_CARD_WIDTH}px; + width: 100%; + + ${mediaDesktopSmallUp} { + grid-column: 7 / -1; + grid-row: 1 / 3; + justify-self: flex-end; + } +`; + +export const Carousel = styled.div` + cursor: grab; + height: ${CAROUSEL_HEIGHT_SM}px; + position: relative; /* Positions CardPositioner. */ + user-select: none; + + &:active { + cursor: grabbing; + } + + ${mediaTabletUp} { + height: ${CAROUSEL_HEIGHT}px; + } +`; + +export const StyledBullets = styled(Bullets)` + bottom: 14px; + left: 50%; + position: absolute; + transform: translateX(-50%); + z-index: 100; +`; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.tsx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.tsx new file mode 100644 index 0000000..10eb703 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.tsx @@ -0,0 +1,29 @@ +import { + Carousel as CarouselCards, + CarouselView, + StyledBullets, +} from "./carousel.styles"; +import { Cards } from "./components/Cards/cards"; +import { useInteractiveCarousel } from "./hooks/useInteractiveCarousel"; + +export const Carousel = (): JSX.Element => { + const { + activeIndex, + interactiveAction, + interactiveCards, + interactiveIndexes, + onSetActiveIndex, + } = useInteractiveCarousel(); + return ( + + + + + + + ); +}; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts new file mode 100644 index 0000000..7ac18f5 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts @@ -0,0 +1,11 @@ +export const CARD_OFFSET_Y = 8; +export const CARD_SCALE_X = 40; +export const MAX_CARD_HEIGHT = 216; +export const MAX_CARD_HEIGHT_SM = 216; +export const MAX_DECK_SIZE = 1; // Currently, deck size is only 1 additional card. +export const MAX_CARD_WIDTH = 504; +export const CAROUSEL_HEIGHT = MAX_CARD_HEIGHT + MAX_DECK_SIZE * CARD_OFFSET_Y; +export const CAROUSEL_HEIGHT_SM = + MAX_CARD_HEIGHT_SM + MAX_DECK_SIZE * CARD_OFFSET_Y; +export const TRANSITION_DELAY = 100; +export const TRANSITION_DURATION = 100; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/utils.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/utils.ts new file mode 100644 index 0000000..058ea65 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/utils.ts @@ -0,0 +1,77 @@ +import { + CARD_OFFSET_Y, + CARD_SCALE_X, + MAX_CARD_WIDTH, + MAX_DECK_SIZE, + TRANSITION_DELAY, + TRANSITION_DURATION, +} from "./constants"; + +/** + * Returns the carousel card's position in the deck. + * @param index - Card index. + * @param activeIndex - Active index. + * @param lastIndex - Last index. + * @returns card position (position zero to deck size). + */ +export function getCardPosition( + index: number, + activeIndex: number, + lastIndex: number +): number { + const order = index - activeIndex; + if (order >= 0) return order; + // If the order is negative, stack the card to the end of the deck. + // Grab the last (positive) position in the deck and add the card position (index + 1). + return lastIndex - activeIndex + index + 1; +} + +/** + * Returns the carousel card's x-axis scale. + * @param cardPosition - Card position. + * @returns card x-axis scale. + */ +export function getCardScaleX(cardPosition: number): string { + if (cardPosition === 0) return "scaleX(1)"; // The active card is scaled to 1. + return `scaleX(${ + (MAX_CARD_WIDTH - cardPosition * CARD_SCALE_X) / MAX_CARD_WIDTH + })`; +} + +/** + * Returns the carousel card's transform scaleX and translateY. + * @param cardPosition - Card position. + * @returns card transform. + */ +export function getCardTransform(cardPosition: number): string { + return `${getCardScaleX(cardPosition)} ${getCardTranslateY(cardPosition)}`; +} + +/** + * Returns the carousel card's transition. + * @param cardPosition - Card position. + * @returns card transition. + */ +export function getCardTransition(cardPosition: number): string { + return `all ${TRANSITION_DURATION}ms ease-in-out ${ + cardPosition * TRANSITION_DELAY + }ms, z-index 0ms ${TRANSITION_DELAY}ms`; +} + +/** + * Returns the carousel card's y-axis offset. + * @param cardPosition - Card position. + * @returns y-axis offset. + */ +export function getCardTranslateY(cardPosition: number): string { + return `translateY(${(MAX_DECK_SIZE - cardPosition) * CARD_OFFSET_Y}px)`; +} + +/** + * Returns the carousel card's z-index. + * @param cardPosition - Card position. + * @returns card z-index. + */ +export function getCardZIndex(cardPosition: number): number { + return MAX_DECK_SIZE - cardPosition; +} diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts new file mode 100644 index 0000000..db4a36a --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts @@ -0,0 +1,92 @@ +import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import { + inkLight, + smokeMain, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import { + textBody500, + textBodyLarge500, + textBodySmall4002Lines, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; +import { elevation01 } from "@databiosphere/findable-ui/lib/theme/common/shadows"; +import styled from "@emotion/styled"; +import { ButtonBase as MButtonBase, Card as MCard } from "@mui/material"; +import { + MAX_CARD_HEIGHT, + MAX_CARD_HEIGHT_SM, + MAX_CARD_WIDTH, +} from "../../common/constants"; +import { + getCardTransform, + getCardTransition, + getCardZIndex, +} from "../../common/utils"; + +interface Props { + cardPosition: number; +} + +export const CardPositioner = styled("div")` + display: grid; + height: 100%; + max-height: ${MAX_CARD_HEIGHT_SM}px; + max-width: ${MAX_CARD_WIDTH}px; + position: absolute; + transform: ${({ cardPosition }) => getCardTransform(cardPosition)}; + transition: ${({ cardPosition }) => getCardTransition(cardPosition)}; + width: 100%; + z-index: ${({ cardPosition }) => getCardZIndex(cardPosition)}; + + ${mediaTabletUp} { + max-height: ${MAX_CARD_HEIGHT}px; + } +`; + +export const Card = styled(MCard)` + border: none; + box-shadow: ${elevation01}, inset 0 0 0 1px ${smokeMain}; + display: flex; + height: 100%; + width: 100%; +` as typeof MCard; + +export const CardSection = styled.div` + display: flex; + flex: 1; + flex-direction: column; + padding: 24px; +`; + +export const CardContent = styled.div` + h1, + h2, + h3 { + ${textBodyLarge500}; + margin: 0; + } + + p { + ${textBodySmall4002Lines}; + color: ${inkLight}; + margin: 8px 0; + + &:last-of-type { + margin-bottom: 0; + } + } +`; + +export const CardCallToAction = styled(MButtonBase)` + &.MuiButtonBase-root { + ${textBody500}; + color: #28285b; + margin-top: 16px; + text-decoration: underline; + text-decoration-skip-ink: none; + text-underline-position: from-font; + + &:hover { + text-decoration: none; + } + } +`; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.tsx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.tsx new file mode 100644 index 0000000..b475bff --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.tsx @@ -0,0 +1,32 @@ +import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card"; +import { RoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles"; +import { Fragment } from "react"; +import { getCardPosition } from "../../common/utils"; +import { Card, CardContent, CardPositioner, CardSection } from "./cards.styles"; + +export interface CardsProps { + activeIndex: number; + cards: CardProps[]; +} + +export const Cards = ({ activeIndex, cards }: CardsProps): JSX.Element => { + const lastIndex = cards.length - 1; + return ( + + {cards.map(({ text }, c) => { + return ( + + + + {text} + + + + ); + })} + + ); +}; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/index.tsx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/index.tsx new file mode 100644 index 0000000..f2b2a8a --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/index.tsx @@ -0,0 +1,2 @@ +export { default as LearnToAnalyzeData } from "./learnToAnalyzeData.mdx"; +export { default as ShareUsageAndJoinAdvisoryPanel } from "./shareUsageAndJoinAdvisoryPanel.mdx"; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx new file mode 100644 index 0000000..8db9387 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx @@ -0,0 +1,3 @@ +### Learn how to analyze your data! + +The new BRC-analytics platform will make heavy use of the Galaxy platform for analysis of data. To learn how to use this system or to improve your already existing skills enroll into [Galaxy Academy 2024](https://training.galaxyproject.org/training-material/events/galaxy-academy-2024.html). The Academy is a global online training event that will take place October 7 - 11, 2024. For more information please see [the event page](https://training.galaxyproject.org/training-material/events/galaxy-academy-2024.html). Note that free registration is required. diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx new file mode 100644 index 0000000..54d19b5 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx @@ -0,0 +1,11 @@ +### Share your usage and join our advisory panel. + +BRC Analytics is actively evolving to provide comprehensive data access and analytical tools for all 785 eukaryotic pathogens, host taxa, and vectors previously supported by VEuPathDB.We need your help to improve—share your usage patterns and join our design advisory panel to help shape the future of the platform. + + + Get Involved + diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/hooks/useInteractiveCarousel.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/hooks/useInteractiveCarousel.ts new file mode 100644 index 0000000..996fe42 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/hooks/useInteractiveCarousel.ts @@ -0,0 +1,50 @@ +import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card"; +import { useMemo } from "react"; +import { + UseSwipeInteraction, + useSwipeInteraction, +} from "../../../../../../../../../hooks/useSwipeInteraction/useSwipeInteraction"; +import { CAROUSEL_CARDS } from "../cards/constants"; + +export interface UseInteractiveCarousel { + activeIndex: UseSwipeInteraction["activeIndex"]; + interactiveAction?: UseSwipeInteraction["interactiveAction"]; + interactiveCards: CardProps[]; + interactiveIndexes: number[]; + onSetActiveIndex: UseSwipeInteraction["onSetActiveIndex"]; + onSetSwipeAction: UseSwipeInteraction["onSetSwipeAction"]; +} + +/** + * Facilitates interaction capabilities for the carousel. + * @returns carousel cards, interactive indexes, and interactive actions. + */ +export function useInteractiveCarousel(): UseInteractiveCarousel { + // Raw carousel cards. + const carouselCards = CAROUSEL_CARDS; + // Get the interactive indexes. + const interactiveIndexes = useMemo( + () => buildInteractiveIndexes(carouselCards), + [carouselCards] + ); + // Get the active index and interactive actions. + const swipeInteraction = useSwipeInteraction( + interactiveIndexes.length, + true, + 8000 + ); + return { + interactiveCards: carouselCards, + interactiveIndexes, + ...swipeInteraction, + }; +} + +/** + * Returns array of interactive indexes. + * @param cards - Cards. + * @returns a list of indexes that are interactive. + */ +function buildInteractiveIndexes(cards: CardProps[]): number[] { + return [...Array(cards.length).keys()]; +} diff --git a/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx b/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx index 17fd3fe..c90f23a 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx +++ b/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx @@ -8,7 +8,6 @@ import { Height, } from "../../../../../../../Layout/components/Hero/common/entities"; import { - getElementHref, getFillUrl, getViewBox, } from "../../../../../../../Layout/components/Hero/common/utils"; @@ -27,7 +26,7 @@ export interface HeroProps { export const Hero = ({ gridSize = GRID_SIZE, - height = GRID_SIZE * 3, + height = gridSize * 4, }: HeroProps): JSX.Element => { return ( - {[ - ELEMENT_ID.PATTERN_SMOKE_RECT, - ELEMENT_ID.PATTERN_SMOKE_CIRCLE, - // ELEMENT_ID.PATTERN_BLUE_RECT, - // ELEMENT_ID.PATTERN_YELLOW_RECT, - ].map((elementId) => ( - - - - ))} - {/**/} - + {[ELEMENT_ID.PATTERN_SMOKE_RECT, ELEMENT_ID.PATTERN_SMOKE_CIRCLE].map( + (elementId) => ( + + + + ) + )} ); }; diff --git a/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts b/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts index d2a3fc9..30fdee3 100644 --- a/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts +++ b/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts @@ -1,12 +1,10 @@ -import { - mediaDesktopSmallUp, - mediaTabletUp, -} from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import { mediaDesktopSmallUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; import { inkLight, smokeLightest, } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; -import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; +import { textBodyLarge4002Lines } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; +import { black } from "@databiosphere/findable-ui/lib/theme/common/palette"; import styled from "@emotion/styled"; import { section, @@ -25,68 +23,56 @@ export const Section = styled.section` export const SectionLayout = styled.div` ${sectionLayout}; ${sectionGrid}; - align-content: flex-end; - min-height: 400px; - padding: 56px 16px; + align-content: flex-start; + gap: 56px 16px; + justify-items: center; + padding: 112px 16px; + + ${mediaDesktopSmallUp} { + gap: 8px 16px; + justify-items: unset; + } `; export const Headline = styled.div` + display: grid; + gap: 8px 0; grid-column: 1 / -1; + text-align: center; + max-width: 560px; ${mediaDesktopSmallUp} { - grid-column: 1 / 8; + grid-column: 1 / span 6; + text-align: left; } `; export const Head = styled.h1` - font-family: "Inter Tight", sans-serif; - font-size: 64px; + color: ${black}; + font-family: "Inter", sans-serif; + font-size: 48px; font-weight: 500; - letter-spacing: -0.4px; - line-height: 72px; + letter-spacing: -1.4px; + line-height: 56px; margin: 0; - - ${mediaTabletUp} { - span { - display: block; - } - } `; export const SubHeadline = styled.div` - grid-column: 1 / -1; - - ${mediaDesktopSmallUp} { - grid-column: 8 / -1; - justify-self: flex-end; - } -`; - -export const SubHeadlinePositioner = styled.div` display: grid; - gap: 20px; - max-width: 392px; + gap: 16px; + justify-items: center; .MuiButton-root { - justify-self: flex-start; + text-transform: none; + } + + ${mediaDesktopSmallUp} { + justify-items: flex-start; } `; export const Subhead = styled.h2` - ${textBodyLarge400}; + ${textBodyLarge4002Lines}; color: ${inkLight}; margin: 0; - - span { - display: block; - margin: 8px 0; - - &:first-of-type { - margin-top: 0; - } - - &:last-of-type { - margin-bottom: 0; - } - } `; diff --git a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx index a098c2a..d5be6e6 100644 --- a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx +++ b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx @@ -1,5 +1,6 @@ -import { ANCHOR_TARGET } from "@databiosphere/findable-ui/lib/components/Links/common/entities"; import { Button } from "@mui/material"; +import { ROUTES } from "../../../../../../../routes/constants"; +import { Carousel } from "./components/Carousel/carousel"; import { Hero } from "./components/Hero/hero"; import { Head, @@ -8,45 +9,30 @@ import { SectionLayout, Subhead, SubHeadline, - SubHeadlinePositioner, } from "./sectionHero.styles"; export const SectionHero = (): JSX.Element => { return (
- + - Analytics for - pathogen, host, - and vector data + Analytics for pathogen, + host, and vector data - - - + - - BRC Analytics is under active development. This site will - provide data access and analytical tools for all 785 eukaryotic - pathogens, host taxa, and vectors previously served by - VEuPathDB. However, we cannot do this alone. - - - Use the button below to tell us about your usage patterns and - enroll into our design advisory panel. - + Comprehensive tools for exploring and interpreting genomic + annotations and functional insights into disease-causing organisms + and their carriers - - - + + +
); diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx index b418239..c5ef873 100644 --- a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx +++ b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx @@ -19,7 +19,7 @@ export interface HeroProps { export const Hero = ({ gridSize = GRID_SIZE, - height = GRID_SIZE * 1.5, + height = gridSize * 1.5, }: HeroProps): JSX.Element => { return ( props !== "isActive", })` background-color: ${smokeMain}; - border-radius: 50%; - cursor: pointer; - display: inline-block; height: 6px; width: 6px; - ${(props) => - props.isActive && + ${({ isActive }) => + isActive && css` - background-color: ${primaryMain(props)}; + background-color: #fc5e60; `} `; diff --git a/app/components/common/Bullets/bullets.tsx b/app/components/common/Bullets/bullets.tsx index 5290bbd..a4b081e 100644 --- a/app/components/common/Bullets/bullets.tsx +++ b/app/components/common/Bullets/bullets.tsx @@ -1,4 +1,4 @@ -import { Bullet, Bullets as SectionBullets } from "./bullets.styles"; +import { Bullet, Bullets as SectionBullets, StyledDot } from "./bullets.styles"; interface BulletsProps { activeBullet: number; @@ -18,14 +18,15 @@ export const Bullets = ({ {bullets.map((bullet) => ( { onBullet(bullet); }} onKeyDown={(): void => { onBullet(bullet); }} - /> + > + + ))} ); diff --git a/mdx-components.tsx b/mdx-components.tsx index d50f817..38cb574 100644 --- a/mdx-components.tsx +++ b/mdx-components.tsx @@ -1,9 +1,11 @@ import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; import { MDXComponents } from "mdx/types"; +import { CardCallToAction } from "./app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles"; export function useMDXComponents(components: MDXComponents): MDXComponents { return { ...components, + CardCTA: CardCallToAction, a: ({ children, href }) => Link({ label: children, url: href ?? "" }), }; }