diff --git a/components/typography/Body.tsx b/components/typography/Body.tsx index 2454010..4a29245 100644 --- a/components/typography/Body.tsx +++ b/components/typography/Body.tsx @@ -1,6 +1,6 @@ -import { VIEWPORTS } from "@constants"; import { WindowSize } from "@components/hooks"; import { ReactNode } from "react"; +import { responsive } from "@utils"; type BodyPreset = "p1" | "p2" | "p3" | "b1" | "b2" | "b3"; @@ -44,13 +44,11 @@ export const BodyResponsive = ({ windowSize, ...props }: BodyResponsiveProps) => { - let presetResponsive: BodyPreset; - if (windowSize.width >= VIEWPORTS.DESKTOP && presetDesktop) { - presetResponsive = presetDesktop; - } else if (windowSize.width >= VIEWPORTS.TABLET && presetTablet) { - presetResponsive = presetTablet; - } else { - presetResponsive = preset; - } + const presetResponsive = responsive( + windowSize, + preset, + presetTablet, + presetDesktop + ); return ; }; diff --git a/components/typography/Header.tsx b/components/typography/Header.tsx index 646691c..a5ff203 100644 --- a/components/typography/Header.tsx +++ b/components/typography/Header.tsx @@ -1,6 +1,6 @@ import { ReactNode } from "react"; -import { useWindowSize, WindowSize } from "@components/hooks/useWindowsSize"; -import { VIEWPORTS } from "@constants"; +import { WindowSize } from "@components/hooks/"; +import { responsive } from "utils"; type HeaderPreset = | "decorative" @@ -65,13 +65,11 @@ export const HeaderResponsive = ({ windowSize, ...props }: HeaderResponsiveProps) => { - let presetResponsive: HeaderPreset; - if (windowSize.width >= VIEWPORTS.DESKTOP && presetDesktop) { - presetResponsive = presetDesktop; - } else if (windowSize.width >= VIEWPORTS.TABLET && presetTablet) { - presetResponsive = presetTablet; - } else { - presetResponsive = preset; - } + const presetResponsive = responsive( + windowSize, + preset, + presetTablet, + presetDesktop + ); return
; }; diff --git a/pages/arutala.tsx b/pages/arutala.tsx index ac71c9c..8657778 100644 --- a/pages/arutala.tsx +++ b/pages/arutala.tsx @@ -20,8 +20,9 @@ import { ArrowDownIcon, } from "@heroicons/react/outline"; import { InputField, SelectField, FormLabel } from "@components/input-field"; -import { Checkbox, Divider, FormControl, Stack } from "@chakra-ui/react"; +import { Checkbox, FormControl, Stack } from "@chakra-ui/react"; import { ChevronUpIcon } from "@heroicons/react/outline"; +import { responsive } from "@utils"; const Arutala: NextPage = () => { const errorToast = Toast({ @@ -566,9 +567,12 @@ function TypographyResponsiveSection({ presetTablet="p2" presetDesktop="p1" > - Ukuran teks ini akan berganti sesuai dengan viewport. Lorem ipsum dolor - sit amet consectetur adipisicing elit. Doloremque iure officiis ex - laboriosam, eius illo? Ipsum quod obcaecati quidem maiores? + {responsive( + windowSize, + "This is Mobile", + "This is Tablet", + "This is Desktop" + )} ); diff --git a/tsconfig.json b/tsconfig.json index cd8bd54..4a231c7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,11 @@ { "compilerOptions": { "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -16,19 +20,50 @@ "incremental": true, "baseUrl": ".", "paths": { - "@api/*": ["api/*"], - "@components": ["components"], - "@components/*": ["components/*"], - "@constants": ["constants"], - "@icons/*": ["public/assets/icons/*"], - "@images/*": ["public/assets/images/*"], - "@models": ["models"], - "@styles/*": ["styles/*"], - "@pages/*": ["pages/*"], - "@hooks": ["components/hooks"], - "@hooks/*": ["components/hooks/*"] + "@api/*": [ + "api/*" + ], + "@components": [ + "components" + ], + "@components/*": [ + "components/*" + ], + "@constants": [ + "constants" + ], + "@icons/*": [ + "public/assets/icons/*" + ], + "@images/*": [ + "public/assets/images/*" + ], + "@models": [ + "models" + ], + "@styles/*": [ + "styles/*" + ], + "@utils": [ + "utils" + ], + "@pages/*": [ + "pages/*" + ], + "@hooks": [ + "components/hooks" + ], + "@hooks/*": [ + "components/hooks/*" + ] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], - "exclude": ["node_modules"] -} + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx" + ], + "exclude": [ + "node_modules" + ] +} \ No newline at end of file diff --git a/utils/index.tsx b/utils/index.tsx new file mode 100644 index 0000000..7409ff7 --- /dev/null +++ b/utils/index.tsx @@ -0,0 +1 @@ +export * from "./responsive"; diff --git a/utils/responsive.tsx b/utils/responsive.tsx new file mode 100644 index 0000000..7e87a0f --- /dev/null +++ b/utils/responsive.tsx @@ -0,0 +1,20 @@ +import { WindowSize } from "@components/hooks"; +import { VIEWPORTS } from "@constants"; + +/** Return responsive value according to viewport.*/ +export function responsive( + windowSize: WindowSize, + mobile: Type, + tablet?: Type, + desktop?: Type +): Type { + let value: Type; + if (windowSize.width >= VIEWPORTS.DESKTOP && desktop) { + value = desktop; + } else if (windowSize.width >= VIEWPORTS.TABLET && tablet) { + value = tablet; + } else { + value = mobile; + } + return value; +}