From ca0f06f9f5da12ad46a3bf51789c62b7f48cb60a Mon Sep 17 00:00:00 2001 From: Zach Berwaldt Date: Thu, 9 Sep 2021 20:42:07 -0400 Subject: [PATCH 1/2] cryptobilla's style refactor --- components/Footer.tsx | 82 +++++++------- components/Navbar.tsx | 4 +- components/NextPrevPost.tsx | 197 ++++++++++++++++++++++++---------- components/RelatedPosts.tsx | 2 +- components/SearchModal.tsx | 6 +- components/SocialIcons.tsx | 2 +- pages/_app.tsx | 9 +- theme/colors.ts | 2 + theme/components/app.ts | 22 ++++ theme/components/button.ts | 6 +- theme/components/footer.ts | 126 ++++++++++++++++++++++ theme/components/guild-tag.ts | 4 +- theme/fontWeights.ts | 3 + theme/fonts.ts | 8 +- theme/index.ts | 29 +++-- theme/styles.ts | 173 ++++------------------------- 16 files changed, 399 insertions(+), 276 deletions(-) create mode 100644 theme/components/app.ts create mode 100644 theme/components/footer.ts create mode 100644 theme/fontWeights.ts diff --git a/components/Footer.tsx b/components/Footer.tsx index 44ce0b4..014e830 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -5,65 +5,61 @@ import { Image, ListItem, UnorderedList, + useMultiStyleConfig, } from '@chakra-ui/react'; import Link from './Link'; import SocialIcons from './SocialIcons'; -export default function Footer(): JSX.Element { +export default function Footer(props): JSX.Element { + const { size } = props; + + const footerStyles = useMultiStyleConfig('Footer', { size }); + + const footerLinks = [ + { url: 'https://discord.gg/bjPz2w9Zts', text: 'Discord' }, + { + url: 'https://www.notion.so/BanklessDAO-Wiki-82ba81e7da1c42adb7c4ab67a4f22e8f', + text: 'Wiki', + }, + { url: 'https://forum.bankless.community/', text: 'Forum' }, + { url: 'https://snapshot.org/#/banklessvault.eth', text: 'Vote' }, + ]; + return ( - - - - - - Bankless DAO logo + + + + + + Bankless DAO logo - + A decentralized autonomous organization that acts as a steward of the Bankless Movement progressing the world towards a future of greater freedom. - + - - - - - Discord - - - - - - - - Wiki - - - - - - - - Forum - - - - - - - - Vote - - - - + + {footerLinks.map((footerLink, id) => ( + + + + {footerLink.text} + + + + ))} - + GoBankless © 2021. All Rights Reserved. Published with{' '} Ghost diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 6ef20fe..2e9ac21 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -82,7 +82,7 @@ export default function Navbar() { placement="right" onClose={onMobileMenuClose}> - + @@ -180,4 +180,4 @@ function ConnectionButton({ ...props }) { {text} ); -} +} \ No newline at end of file diff --git a/components/NextPrevPost.tsx b/components/NextPrevPost.tsx index 746413b..1a67505 100644 --- a/components/NextPrevPost.tsx +++ b/components/NextPrevPost.tsx @@ -22,64 +22,151 @@ const NextPrevSection = ({ newerPost, olderPost }: NextPrevSectionProps) => { as="aside" width="100%" margin="10vh auto 16vh" - borderTop="var(--border) var(--color-three)" - borderBottom="var(--border) var(--color-three)" + borderTop="var(--border) var(--chakra-colors-steel-400)" + borderBottom="var(--border) var(--chakra-colors-steel-400)" height="200px"> {newerPost && ( - - {newerPost.feature_image_alt} - - - - Newer post - - - - {newerPost.title} - - - + as="aside" + width="100%" + margin="10vh auto 16vh" + borderTop="var(--border) var(--chakra-colors-steel-400)" + borderBottom="var(--border) var(--chakra-colors-steel-400)" + height="200px" + > + { + newerPost && + + + {newerPost.feature_image_alt} + + + + Newer post + + + + {newerPost.title} + + + + + } + { + olderPost && + + + Older post + + + {olderPost.title} + + + + + {olderPost.feature_image_alt} + + + } )} {olderPost && ( diff --git a/components/RelatedPosts.tsx b/components/RelatedPosts.tsx index c13ebe2..3bfa55b 100644 --- a/components/RelatedPosts.tsx +++ b/components/RelatedPosts.tsx @@ -10,7 +10,7 @@ export default function RelatedPosts({ relatedPages }: PinnedPagesProps) { + borderTop="4px solid var(--chakra-colors-red-500)"> You might also like diff --git a/components/SearchModal.tsx b/components/SearchModal.tsx index 0a5de96..b2ab04e 100644 --- a/components/SearchModal.tsx +++ b/components/SearchModal.tsx @@ -130,7 +130,7 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) { - + }> @@ -192,7 +192,7 @@ const HelpBox = chakra(Box, { baseStyle: { fontFamily: 'mono', background: 'red', - color: 'var(--color-font-two)', + color: 'var(--chakra-colors-steel-900)', padding: '8px 20px', fontSize: 'small', }, diff --git a/components/SocialIcons.tsx b/components/SocialIcons.tsx index 84099ee..4ebf58c 100644 --- a/components/SocialIcons.tsx +++ b/components/SocialIcons.tsx @@ -56,7 +56,7 @@ const SocialLink = chakra(Link, { transition: 'fill .15s ease-in-out', fill: 'white', _hover: { - fill: 'var(--color-details)', + fill: 'var(--chakra-colors-red-500)', }, }, }, diff --git a/pages/_app.tsx b/pages/_app.tsx index 6d857b9..11061c7 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -5,16 +5,19 @@ import '@fontsource/spartan/700.css'; // normal imports import type { AppProps } from 'next/app'; -import { chakra, ChakraProvider, Container } from '@chakra-ui/react'; +import { chakra, ChakraProvider, useMultiStyleConfig } from '@chakra-ui/react'; import theme from '../theme'; import { getSettings } from '../lib/settings'; import '../styles/Mobile.css'; function MyApp({ Component, pageProps }: AppProps) { + const { size } = pageProps; + const styles = useMultiStyleConfig('App', { size }); + return ( - - + + diff --git a/theme/colors.ts b/theme/colors.ts index 8ba9984..a007cc2 100644 --- a/theme/colors.ts +++ b/theme/colors.ts @@ -9,6 +9,8 @@ const colors: Colors = { '400': '#485b73', '900': '#f7f9f9', }, + "bg-nav": "#242d39", + announcements: "#fed672" }; export default colors; diff --git a/theme/components/app.ts b/theme/components/app.ts new file mode 100644 index 0000000..3f0190d --- /dev/null +++ b/theme/components/app.ts @@ -0,0 +1,22 @@ +export default { + parts: ['wrapper', 'content'], + baseStyle: { + wrapper: { + height: "100%" + }, + content: { + display: "flex", + position: "relative", + flexDirection: "column", + paddingRight: "6%", + paddingLeft: "6%", + height: "100%", + maxW: "unset" + } + }, + sizes: { + content: { + padding: "0 55px" + } + } +} \ No newline at end of file diff --git a/theme/components/button.ts b/theme/components/button.ts index 38f30e6..cf8091c 100644 --- a/theme/components/button.ts +++ b/theme/components/button.ts @@ -24,13 +24,13 @@ const Button: ComponentSingleStyleConfig = { transitionTimingFunction: 'cubic-bezier(.39,.07,.68,1.7)', transitionDuration: '.25s', transitionProperty: 'transform,background-color', - border: '10px solid var(--color-details)', + border: '10px solid var(--chakra-colors-red-500)', borderRadius: '50px', outline: '0', - backgroundColor: 'var(--color-body)', + backgroundColor: 'var(--chakra-colors-steel-100)', _hover: { transform: 'scale(.6)', - backgroundColor: 'var(--color-details)', + backgroundColor: 'var(--chakra-colors-red-500)', }, }, }, diff --git a/theme/components/footer.ts b/theme/components/footer.ts new file mode 100644 index 0000000..0ff5415 --- /dev/null +++ b/theme/components/footer.ts @@ -0,0 +1,126 @@ +export default { + parts: [ + 'section', + 'wrapper', + 'data', + 'logo', + 'isImg', + 'icons', + 'nav', + 'navColumn', + 'navList', + 'navItem', + 'copyright', + 'description', + ], + baseStyle: { + section: { + paddingTop: '7vh', + paddingBottom: '6vh', + borderTop: '1px dashed #485b73', + width: '100%', + maxW: '1200px', + marginRight: 'auto', + marginLeft: 'auto', + flexShrink: '0', + }, + wrapper: { + width: '100%', + margin: '0 auto', + alignItems: 'flex-start', + boxSizing: 'border-box', + flexWrap: 'wrap', + }, + data: { + boxSizing: 'border-box', + paddingRight: '5%', + flex: '999 0 30%', + }, + logo: { + marginBottom: '15px', + maxWidth: '350px', + }, + isImg: { + maxW: '150px', + maxH: '45px', + }, + icons: { + marginTop: '30px', + marginBottom: '30px', + maxW: '340px', + }, + nav: { + flex: '1 0 auto', + flexWrap: 'nowrap', + }, + navColumn: { + width: '150px', + marginBottom: '30px', + }, + navList: { + margin: 0, + paddingLeft: '15%', + }, + navItem: { + fontFamily: 'spartan', + fontSize: '13px', + lineHeight: '2', + marginBottom: '16px', + listStyle: 'none', + }, + copyright: { + display: 'block', + height: '25px', + marginTop: '30px', + padding: 0, + fontFamily: 'mono', + fontSize: '13px', + }, + description: { + margin: '0', + maxW: '350px', + fontFamily: 'mono', + fontSize: '13px', + }, + }, + sizes: { + wrapper: { + lg: { + flexWrap: 'nowrap', + }, + }, + data: { + md: { + flexBasis: '100%', + }, + }, + nav: { + sm: { + flexWrap: 'wrap', + }, + md: { + maxW: '100%', + flexWrap: 'wrap', + }, + }, + navColumn: { + sm: { + flex: '1 0 50%', + }, + md: { + width: '100%', + }, + }, + navList: { + md: { + paddingRight: '20px', + paddingLeft: 0, + }, + }, + navItem: { + lg: { + fontSize: '12px', + }, + }, + }, +}; diff --git a/theme/components/guild-tag.ts b/theme/components/guild-tag.ts index 1fbe91e..3714428 100644 --- a/theme/components/guild-tag.ts +++ b/theme/components/guild-tag.ts @@ -16,7 +16,7 @@ export default { sm: '6px', md: '10px', }, - border: 'var(--border) var(--color-three)', + border: 'var(--border) var(--chakra-colors-steel-400)', borderRadius: '100%', marginBottom: '2vh', }, @@ -33,7 +33,7 @@ export default { }, }, postcount: { - fontFamily: 'four', + fontFamily: 'mono', fontSize: '13px', boxSizing: { sm: 'content-box', diff --git a/theme/fontWeights.ts b/theme/fontWeights.ts new file mode 100644 index 0000000..b7af326 --- /dev/null +++ b/theme/fontWeights.ts @@ -0,0 +1,3 @@ +export default { + medium: 500 +} \ No newline at end of file diff --git a/theme/fonts.ts b/theme/fonts.ts index 582fe97..7752d7e 100644 --- a/theme/fonts.ts +++ b/theme/fonts.ts @@ -1,5 +1,5 @@ export default { - spartan: 'Spartan', - mulish: 'Mulish', - mono: 'Source Code Pro', -}; + spartan: 'Spartan', + mulish: 'Mulish', + mono: 'Source Code Pro', +} \ No newline at end of file diff --git a/theme/index.ts b/theme/index.ts index bb1b594..8401d79 100644 --- a/theme/index.ts +++ b/theme/index.ts @@ -6,8 +6,11 @@ import breakpoints from './breakpoints'; import colors from './colors'; import styles from './styles'; import fonts from './fonts'; +import fontWeights from './fontWeights'; // Import component overrides. +import App from './components/app'; +import Footer from './components/footer' import Button from './components/button'; import List from './components/list'; import Link from './components/link'; @@ -21,13 +24,27 @@ const overrides: any = { styles, breakpoints, fonts, + fontWeights, + colors: { + "bg-nav": "#242d39", + "accent": "#ff1a1a", + "body": "#182029", + "details": "#ff1a1a", + "two": "#f7f9f9", + "dots": "#485b73", + "three": "#485b73", + "font-two": "#182029", + "announcements": "#fed672" + }, components: { - Button, - List, - Link, - Input, - Menu, - GuildTag, + App, + Footer, + Button, + List, + Link, + Input, + Menu, + GuildTag, }, }; diff --git a/theme/styles.ts b/theme/styles.ts index 46130c4..04177c8 100644 --- a/theme/styles.ts +++ b/theme/styles.ts @@ -1,25 +1,11 @@ /* TODO: TURN MOST OF THESE STYLES INTO NON-GLOBAL STYLES BY USING COMPONENTS OR STYLE MIXINS - PLEASE TRY NOT TO ADD ANYTHING TO THIS FILE. */ export default { global: { ':root': { - '--bg-nav': '#242d39', - '--accent-color': '#ff1a1a', - '--color-body': '#182029', - '--color-details': '#ff1a1a', - '--color-two': '#f7f9f9', - '--color-dots': '#485b73', - '--color-three': '#485b73', '--border': '1px dashed', - '--font-weight-four-medium': '500', - '--color-font-two': '#182029', - '--color-announcements': '#fed672', - }, - '.global-wrap': { - height: '100%', }, '.global-button': { fontFamily: 'spartan', @@ -28,12 +14,12 @@ export default { zIndex: 0, cursor: 'pointer', letterSpacing: '1px', - color: 'var(--color-font-two)', + color: 'var(--chakra-colors-steel-100)', border: 0, outline: 0, _before: { zIndex: -1, - background: 'var(--color-details)', + background: 'var(--chakra-colors-red-500)', position: 'absolute', top: 0, right: 0, @@ -50,20 +36,6 @@ export default { content: "''", }, }, - '.global-content': { - base: { - display: 'flex', - position: 'relative', - flexDirection: 'column', - paddingRight: '6%', - paddingLeft: '6%', - height: '100%', - maxW: 'unset', - }, - md: { - padding: '0 55px', - }, - }, '.global-main': { width: '100%', maxW: '1200px', @@ -74,7 +46,7 @@ export default { paddingBottom: '.2%', transition: 'background-size .6s ease-out', background: - 'linear-gradient(var(--accent-color), var(--accent-color)) no-repeat left 123%/0 40%', + 'linear-gradient(var(--chakra-colors-red-500), var(--chakra-colors-red-500)) no-repeat left 123%/0 40%', }, '.global-underline:hover': { backgroundSize: '97% 40%', @@ -82,7 +54,7 @@ export default { '.global-special': { base: { paddingTop: '10px', - borderTop: '4px solid var(--color-details)', + borderTop: '4px solid var(--chakra-colors-red-500)', flexGrow: 1, position: 'relative', flexWrap: 'wrap', @@ -127,7 +99,7 @@ export default { top: '-30px', left: '-1px', color: 'black', - background: 'var(--color-details)', + background: 'var(--chakra-colors-red-500)', textTransform: 'capitalize', }, '.global-image': { @@ -278,7 +250,7 @@ export default { content: "''", transition: 'transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1) .2s', - background: 'var(--color-two)', + background: 'var(--chakra-colors-steel-900)', }, '& .bar:nth-of-type(1)': { top: '-10px', @@ -294,7 +266,7 @@ export default { sm: { flexWrap: 'wrap', marginBottom: '4vh', - border: 'var(--border) var(--color-three)', + border: 'var(--border) var(--chakra-colors-steel-500)', padding: '35px 5% 0', }, lg: { @@ -309,7 +281,7 @@ export default { '.pinned-pages': { base: { boxSizing: 'content-box', - borderColor: 'var(--color-announcements)', + borderColor: 'var(--chakra-colors-announcements)', }, sm: { maxW: '100%', @@ -414,7 +386,7 @@ export default { top: '-3.1vh', right: 0, bottom: '-4vh', - background: 'radial-gradient(var(--color-dots) 6%, transparent 0)', + background: 'radial-gradient(steel.400 6%, transparent 0)', position: 'absolute', content: "''", backgroundSize: '28px 28px', @@ -432,10 +404,10 @@ export default { }, }, '.item.is-odd &': { - borderLeft: 'var(--border) var(--color-three)', + borderLeft: 'var(--border) var(--chakra-colors-steel-400)', }, '.item.is-even &': { - borderLeft: 'var(--border) var(--color-three)', + borderLeft: 'var(--border) var(--chakra-colors-steel-400)', }, }, }, @@ -540,7 +512,7 @@ export default { zIndex: -2, right: 0, bottom: '10px', - background: 'radial-gradient(var(--color-dots) 6%, transparent 0)', + background: 'radial-gradient(var(--chakra-colors-steel-400) 6%, transparent 0)', position: 'absolute', top: '-35px', left: '35px', @@ -633,8 +605,8 @@ export default { paddingRight: '10px', paddingLeft: '10px', wordBreak: 'normal', - color: 'var(--color-body)', - background: 'var(--color-two)', + color: 'var(--chakra-colors-steel-100)', + background: 'var(--chakra-colors-steel-900)', flex: '1 1 auto', fontSize: '16px', padding: '0 20px', @@ -706,111 +678,6 @@ export default { marginLeft: 'auto', flexShrink: '0', }, - '.footer-section': { - paddingTop: '7vh', - paddingBottom: '6vh', - borderTop: '1px dashed #485b73', - }, - '.footer-wrap': { - base: { - width: '100%', - margin: '0 auto', - alignItems: 'flex-start', - boxSizing: 'border-box', - flexWrap: 'wrap', - }, - lg: { - flexWrap: 'nowrap', - }, - }, - '.footer-data': { - base: { - boxSizing: 'border-box', - paddingRight: '5%', - flex: '999 0 30%', - }, - md: { - flexBasis: '100%', - }, - }, - '.footer-logo': { - marginBottom: '15px', - maxWidth: '350px', - '& .is-image img': { - maxW: '150px', - maxH: '45px', - }, - }, - '.footer-icons': { - base: { - marginTop: '30px', - marginBottom: '30px', - maxW: '340px', - }, - }, - '.footer-nav': { - base: { - flex: '1 0 auto', - flexWrap: 'nowrap', - }, - sm: { - flexWrap: 'wrap', - }, - md: { - maxW: '100%', - flexWrap: 'wrap', - }, - }, - '.footer-nav-column': { - base: { - width: '150px', - marginBottom: '30px', - }, - sm: { - flex: '1 0 50%', - }, - md: { - width: '100%', - }, - '& ul': { - base: { - margin: 0, - paddingLeft: '15%', - }, - md: { - paddingRight: '20px', - paddingLeft: 0, - }, - }, - '& li': { - base: { - fontFamily: 'spartan', - fontSize: '13px', - lineHeight: '2', - marginBottom: '16px', - listStyle: 'none', - }, - lg: { - fontSize: '12px', - }, - }, - }, - '.footer-copyright': { - base: { - display: 'block', - height: '25px', - marginTop: '30px', - padding: 0, - fontFamily: 'mono', - fontSize: '13px', - }, - }, - '.footer-description': { - margin: '0', - maxW: '350px', - fontFamily: 'mono', - fontSize: '13px', - }, '.post-share-section': { '& a': { display: 'flex', @@ -823,11 +690,11 @@ export default { }, '& a:first-of-type': { paddingLeft: '10px', - borderLeft: 'var(--border) var(--color-three)', + borderLeft: 'var(--border) var(--chakra-colors-steel-400)', }, '& a:last-of-type': { paddingRight: '10px', - borderRight: 'var(--border) var(--color-three)', + borderRight: 'var(--border) var(--chakra-colors-steel-400)', }, }, body: { @@ -873,7 +740,7 @@ export default { }, '.global-special &:not(:first-of-type):not(:last-of-type), .global-special &:last-of-type': { - borderLeft: 'var(--border) var(--color-three)', + borderLeft: 'var(--border) var(--chakra-colors-steel-400)', }, '.global-special &:first-of-type:last-of-type': { borderLeft: 'none', @@ -962,13 +829,13 @@ export default { margin: 0, transform: 'translateY(-100%)', letterSpacing: 0, - color: 'var(--color-font-two)', + color: 'var(--chakra-colors-steel-100)', }, '.global-special & span': { - background: 'var(--color-details)', + background: 'var(--chakra-colors-red-500)', }, '.pinned-pages & span': { - background: 'var(--color-announcements)', + background: 'var(--chakra-colors-announcements)', }, '&.item-title': { fontSize: '24px', From 88e4158dab63c8dca16467945823ea18f2028576 Mon Sep 17 00:00:00 2001 From: Moshe Date: Fri, 10 Sep 2021 01:20:11 -0400 Subject: [PATCH 2/2] working mheader and footer --- components/Footer.tsx | 14 ++--- components/Navbar.tsx | 58 ++++++++++++++++--- pages/_app.tsx | 11 +--- pages/index.tsx | 71 +++++++++++++---------- theme/components/app.ts | 38 ++++++------ theme/components/footer.ts | 109 ++++++++++++++++------------------- theme/components/header.tsx | 98 +++++++++++++++++++++++++++++++ theme/index.ts | 31 ++++------ theme/styles.ts | 112 +----------------------------------- 9 files changed, 276 insertions(+), 266 deletions(-) create mode 100644 theme/components/header.tsx diff --git a/components/Footer.tsx b/components/Footer.tsx index 014e830..b797f97 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -26,16 +26,12 @@ export default function Footer(props): JSX.Element { ]; return ( - + - Bankless DAO logo + Bankless DAO logo @@ -47,11 +43,11 @@ export default function Footer(props): JSX.Element { - + {footerLinks.map((footerLink, id) => ( - - + + {footerLink.text} diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 2e9ac21..e56ed6f 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -14,6 +14,7 @@ import { DrawerContent, DrawerBody, DrawerCloseButton, + useMultiStyleConfig, } from '@chakra-ui/react'; import { HamburgerIcon, Search2Icon } from '@chakra-ui/icons'; import SearchModal from './SearchModal'; @@ -28,6 +29,8 @@ import React, { useState } from 'react'; import Link from './Link'; export default function Navbar() { + const styles = useMultiStyleConfig('Header', {}); + const { isOpen: searchModalIsOpen, onOpen: onSearchModalOpen, @@ -43,16 +46,19 @@ export default function Navbar() { onSearchModalOpen(); }); return ( - + - + - + ul+ul': { + display: { + xl: 'flex', + }, + alignItems: { + xl: 'center', + }, + flex: { + xl: '0 0 auto', + }, + }, + '& li, & a': { + fontSize: '14px', + display: 'inline-block', + }, + '& a, & .signin a, & .signout a, & .signup': { + marginRight: '18px', + }, + '& .signup a': { + fontFamily: 'spartan', + fontSize: '12px', + marginRight: 0, + padding: '10px 12px 8px', + letterSpacing: '.5px', + lineHeight: '18px', + }, + }}> - + @@ -180,4 +222,4 @@ function ConnectionButton({ ...props }) { {text} ); -} \ No newline at end of file +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 11061c7..2fe2000 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -5,22 +5,15 @@ import '@fontsource/spartan/700.css'; // normal imports import type { AppProps } from 'next/app'; -import { chakra, ChakraProvider, useMultiStyleConfig } from '@chakra-ui/react'; +import { ChakraProvider } from '@chakra-ui/react'; import theme from '../theme'; import { getSettings } from '../lib/settings'; import '../styles/Mobile.css'; function MyApp({ Component, pageProps }: AppProps) { - const { size } = pageProps; - const styles = useMultiStyleConfig('App', { size }); - return ( - - - - - + ); } diff --git a/pages/index.tsx b/pages/index.tsx index 2de50c4..5b0b6bf 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,14 @@ import { useState } from 'react'; import { GetStaticProps, GetStaticPaths, InferGetStaticPropsType } from 'next'; import Head from 'next/head'; -import { Button, Box, Text, Flex, chakra } from '@chakra-ui/react'; +import { + useMultiStyleConfig, + Button, + Box, + Text, + Flex, + chakra, +} from '@chakra-ui/react'; import { Pagination } from '@tryghost/content-api'; import { getFeaturedPosts, getPaginatedPosts } from '../lib/posts'; import { getFeaturedPages } from '../lib/pages'; @@ -29,6 +36,8 @@ export default function Home({ setPosts((prevPosts) => [...prevPosts, ...newPosts]); setPagination(newPosts.meta.pagination); }; + const styles = useMultiStyleConfig('App', {}); + return ( <> @@ -36,34 +45,38 @@ export default function Home({ - - - - - {posts.map((post: PostOrPage, index: number) => { - const Article = index % 5 === 0 ? MainArticle : SubArticle; - return
; - })} - - {pagination.next && ( - - -