Skip to content

Commit 752a87f

Browse files
committed
Merge branch 'homepage' into homepage-codeblock
2 parents 5a624f5 + 2069fb8 commit 752a87f

File tree

11 files changed

+55
-47
lines changed

11 files changed

+55
-47
lines changed

src/components/Buttons/SvgButtonLink.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const variants = cva("flex items-center gap-3.5", {
1818
variants: {
1919
variant: {
2020
col: "flex-col text-center [&_.body]:text-center",
21-
row: "flex-row text-start [&_.body]:text-left [&_.header]:self-start",
21+
row: "flex-row text-start [&_.body]:text-start [&_.header]:self-start",
2222
},
2323
},
2424
defaultVariants: {

src/components/Chevron/index.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { MdChevronLeft, MdChevronRight } from "react-icons/md"
2+
3+
import { cn } from "@/lib/utils/cn"
4+
5+
import { useRtlFlip } from "@/hooks/useRtlFlip"
6+
7+
export const ChevronNext = ({
8+
className,
9+
...props
10+
}: React.HTMLAttributes<SVGElement>) => {
11+
const { twFlipForRtl } = useRtlFlip()
12+
return <MdChevronRight className={cn(className, twFlipForRtl)} {...props} />
13+
}
14+
15+
export const ChevronPrev = ({
16+
className,
17+
...props
18+
}: React.HTMLAttributes<SVGElement>) => {
19+
const { twFlipForRtl } = useRtlFlip()
20+
return <MdChevronLeft className={cn(className, twFlipForRtl)} {...props} />
21+
}

src/components/Homepage/BentoCard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { HTMLAttributes } from "react"
22
import { type StaticImageData } from "next/image"
3-
import { MdChevronRight } from "react-icons/md"
43

54
import { TwImage } from "@/components/Image"
65
import { ButtonLink } from "@/components/ui/buttons/Button"
76

87
import { cn } from "@/lib/utils/cn"
98

9+
import { ChevronNext } from "../Chevron"
1010
import { Card, CardTitle } from "../ui/card"
1111
import { Center } from "../ui/flex"
1212

@@ -44,7 +44,7 @@ const BentoCard = ({
4444
</CardTitle>
4545
<p className="mb-8 text-md">{children}</p>
4646
<ButtonLink href={href} variant="outline">
47-
{action} <MdChevronRight />
47+
{action} <ChevronNext />
4848
</ButtonLink>
4949
</div>
5050
</Card>

src/components/Nav/Menu/NextChevron.tsx

Lines changed: 0 additions & 15 deletions
This file was deleted.

src/components/Nav/Menu/SubMenu.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
} from "@radix-ui/react-navigation-menu"
2020

2121
import { ButtonProps } from "@/components/Buttons"
22+
import { ChevronNext } from "@/components/Chevron"
2223
import Link from "@/components/Link"
2324

2425
import { trackCustomEvent } from "@/lib/utils/matomo"
@@ -27,7 +28,6 @@ import { cleanPath } from "@/lib/utils/url"
2728
import type { Level, NavItem, NavSectionKey } from "../types"
2829

2930
import ItemContent from "./ItemContent"
30-
import NextChevron from "./NextChevron"
3131
import { useSubMenu } from "./useSubMenu"
3232

3333
type LvlContentProps = {
@@ -83,7 +83,7 @@ const SubMenu = ({ lvl, items, activeSection, onClose }: LvlContentProps) => {
8383
const buttonProps: ButtonProps = {
8484
color: menuColors.body,
8585
leftIcon: lvl === 1 && icon ? <Icon as={icon} /> : undefined,
86-
rightIcon: isLink ? undefined : <NextChevron />,
86+
rightIcon: isLink ? undefined : <ChevronNext />,
8787
position: "relative",
8888
w: "full",
8989
me: -PADDING,

src/components/Swiper/index.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { useTranslation } from "next-i18next"
2-
import { MdChevronLeft, MdChevronRight } from "react-icons/md"
32
import { EffectCards, Keyboard, Navigation, Pagination } from "swiper/modules"
43
import { Swiper as SwiperParent, SwiperSlide } from "swiper/react"
54
import type { SwiperOptions } from "swiper/types"
65

6+
import { ChevronNext, ChevronPrev } from "@/components/Chevron"
7+
78
import { cn } from "@/lib/utils/cn"
89

910
import "swiper/css"
@@ -51,9 +52,9 @@ const Swiper = ({
5152
</SwiperSlide>
5253
))}
5354

54-
<MdChevronLeft className="swiper-button-prev" />
55+
<ChevronPrev className="swiper-button-prev" />
5556
<div className="swiper-pagination" />
56-
<MdChevronRight className="swiper-button-next" />
57+
<ChevronNext className="swiper-button-next" />
5758
</SwiperParent>
5859
</div>
5960
)

src/hooks/useRtlFlip.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { isLangRightToLeft } from "@/lib/utils/translations"
77
type UseDirection = {
88
/** @deprecated */
99
flipForRtl: "scaleX(-1)" | undefined // transform (deprecated)
10-
twFlipForRtl: "-scale-x-1" | "" // className
10+
twFlipForRtl: "-scale-x-100" | "" // className
1111
isRtl: boolean
1212
direction: "ltr" | "rtl"
1313
}
@@ -22,7 +22,7 @@ export const useRtlFlip = (): UseDirection => {
2222
const isRtl = isLangRightToLeft(locale as Lang)
2323
return {
2424
flipForRtl: isRtl ? "scaleX(-1)" : undefined, // transform (deprecated)
25-
twFlipForRtl: isRtl ? "-scale-x-1" : "", // className (preferred)
25+
twFlipForRtl: isRtl ? "-scale-x-100" : "", // className (preferred)
2626
isRtl,
2727
direction: isRtl ? "rtl" : "ltr",
2828
}

src/lib/types.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import type { AppProps } from "next/app"
44
import type { StaticImageData } from "next/image"
55
import type { SSRConfig } from "next-i18next"
66
import type { ReactElement, ReactNode } from "react"
7-
import resolveConfig from "tailwindcss/resolveConfig"
87
import type { Icon } from "@chakra-ui/react"
98

109
import type {
@@ -26,8 +25,8 @@ import allQuestionData from "@/data/quizzes/questionBank"
2625

2726
import { WALLETS_FILTERS_DEFAULT } from "./constants"
2827

29-
import tailwindConfig from "@/../tailwind.config"
3028
import { layoutMapping } from "@/pages/[...slug]"
29+
import twConfig from "@/styles/config"
3130

3231
// Credit: https://stackoverflow.com/a/52331580
3332
export type Unpacked<T> = T extends (infer U)[] ? U : T
@@ -829,6 +828,4 @@ export type EventCardProps = {
829828
imageUrl?: string
830829
}
831830

832-
const twConfig = resolveConfig(tailwindConfig)
833-
834831
export type BreakpointKey = keyof typeof twConfig.theme.screens

src/lib/utils/screen.ts

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1-
import resolveConfig from "tailwindcss/resolveConfig"
2-
31
import type { BreakpointKey } from "../types"
42

5-
import tailwindConfig from "@/../tailwind.config"
6-
7-
const fullConfig = resolveConfig(tailwindConfig)
3+
import twConfig from "@/styles/config"
84

9-
export const breakpointAsNumber = Object.entries(
10-
fullConfig.theme.screens
11-
).reduce((acc, curr) => {
12-
const [breakpoint, value] = curr
13-
acc[breakpoint] = +value.split("px")[0]
14-
return acc
15-
}, {}) as Record<BreakpointKey, number>
5+
export const breakpointAsNumber = Object.entries(twConfig.theme.screens).reduce(
6+
(acc, curr) => {
7+
const [breakpoint, value] = curr
8+
acc[breakpoint] = +value.split("px")[0]
9+
return acc
10+
},
11+
{}
12+
) as Record<BreakpointKey, number>

src/pages/index.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Fragment, lazy, Suspense } from "react"
22
import type { GetStaticProps, InferGetStaticPropsType } from "next"
33
import { serverSideTranslations } from "next-i18next/serverSideTranslations"
44
import { FaDiscord, FaGithub } from "react-icons/fa6"
5-
import { MdChevronRight } from "react-icons/md"
65

76
import type {
87
AllMetricData,
@@ -13,6 +12,7 @@ import type {
1312
} from "@/lib/types"
1413

1514
import SvgButtonLink from "@/components/Buttons/SvgButtonLink"
15+
import { ChevronNext } from "@/components/Chevron"
1616
import CodeModal from "@/components/CodeModal"
1717
import HomeHero from "@/components/Hero/HomeHero"
1818
import BentoCard from "@/components/Homepage/BentoCard"
@@ -189,7 +189,7 @@ const HomePage = ({
189189
/>
190190
<TranslatathonBanner pathname={asPath} />
191191
<HomeHero heroImg={Hero} className="w-full" />
192-
<div className="w-full space-y-32 lg:space-y-48">
192+
<div className="w-full space-y-32 px-4 md:mx-6 lg:space-y-48">
193193
<div className="my-20 grid w-full grid-cols-2 gap-x-4 gap-y-8 md:grid-cols-4 md:gap-x-10">
194194
{subHeroCTAs.map(({ label, description, href, className, Svg }) => (
195195
<Fragment key={label}>
@@ -329,7 +329,7 @@ const HomePage = ({
329329
<div className="flex justify-center py-8 md:justify-start">
330330
<ButtonLink href="/learn/" size="lg" variant="outline">
331331
{t("page-index:page-index-popular-topics-action")}{" "}
332-
<MdChevronRight />
332+
<ChevronNext />
333333
</ButtonLink>
334334
</div>
335335
</div>
@@ -356,7 +356,7 @@ const HomePage = ({
356356
<div className="flex flex-wrap gap-6 py-8">
357357
<ButtonLink href="/developers/" size="lg" className="w-fit">
358358
{t("page-index:page-index-builders-action-primary")}{" "}
359-
<MdChevronRight />
359+
<ChevronNext />
360360
</ButtonLink>
361361
<ButtonLink
362362
href="/developers/docs/"
@@ -430,7 +430,7 @@ const HomePage = ({
430430
</div>
431431
<div className="flex flex-wrap gap-3 py-8">
432432
<ButtonLink href="/community/" size="lg">
433-
{t("page-index:page-index-community-action")} <MdChevronRight />
433+
{t("page-index:page-index-community-action")} <ChevronNext />
434434
</ButtonLink>
435435
<div className="flex gap-3">
436436
<ButtonLink
@@ -623,7 +623,7 @@ const HomePage = ({
623623
</div>
624624
<div className="flex justify-center py-8 md:justify-start">
625625
<ButtonLink href="/community/events/" size="lg" className="mx-auto">
626-
{t("page-index:page-index-events-action")} <MdChevronRight />
626+
{t("page-index:page-index-events-action")} <ChevronNext />
627627
</ButtonLink>
628628
</div>
629629
</Section>

0 commit comments

Comments
 (0)