Merge pull request #13852 from ethereum/refactor-screens-config

Refactor: reuse `screens` config file

Author: wackerow

src/hooks/useBreakpointValue.ts

@@ -1,4 +1,4 @@
-import { screens } from "../../tailwind/screens"
+import { screens } from "@/lib/utils/screen"
 
 import { useMediaQuery } from "./useMediaQuery"
 

src/lib/types.ts

@@ -23,10 +23,10 @@ import type { SimulatorNav } from "@/components/Simulator/interfaces"
 import allQuizData from "@/data/quizzes"
 import allQuestionData from "@/data/quizzes/questionBank"
 
+import { screens } from "./utils/screen"
 import { WALLETS_FILTERS_DEFAULT } from "./constants"
 
 import { layoutMapping } from "@/pages/[...slug]"
-import twConfig from "@/styles/config"
 
 // Credit: https://stackoverflow.com/a/52331580
 export type Unpacked<T> = T extends (infer U)[] ? U : T
@@ -858,4 +858,4 @@ export type EventCardProps = {
   imageUrl?: string
 }
 
-export type BreakpointKey = keyof typeof twConfig.theme.screens
+export type BreakpointKey = keyof typeof screens

src/lib/utils/screen.ts

@@ -1,8 +1,16 @@
+import type { ScreensConfig } from "tailwindcss/types/config"
+
 import type { BreakpointKey } from "../types"
 
-import twConfig from "@/styles/config"
+export const screens = {
+  sm: "480px",
+  md: "768px",
+  lg: "992px",
+  xl: "1280px",
+  "2xl": "1536px",
+} satisfies ScreensConfig
 
-export const breakpointAsNumber = Object.entries(twConfig.theme.screens).reduce(
+export const breakpointAsNumber = Object.entries(screens).reduce(
   (acc, curr) => {
     const [breakpoint, value] = curr
     acc[breakpoint] = +value.split("px")[0]

src/styles/config.ts

@@ -1,7 +1,7 @@
 import type { Config } from "tailwindcss"
 import plugin from "tailwindcss/plugin"
 
-import { screens } from "./tailwind/screens"
+import { screens } from "./src/lib/utils/screen"
 
 const config = {
   // TODO: Move to "class" strategy after removing Chakra