From 7cd1c904fb4a511e35fbb6968da865fa32bd9448 Mon Sep 17 00:00:00 2001 From: Antoine Kingue Date: Sat, 13 Jan 2024 01:18:25 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20improve=20footer=20style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/Footer/index.tsx | 268 ++++++++++-------- .../kitchen/src/components/Footer/index.tsx | 61 ++-- workshop/pages/footer.tsx | 37 --- 3 files changed, 186 insertions(+), 180 deletions(-) diff --git a/docs/components/Footer/index.tsx b/docs/components/Footer/index.tsx index d95c759a1..631b49f5e 100644 --- a/docs/components/Footer/index.tsx +++ b/docs/components/Footer/index.tsx @@ -5,32 +5,100 @@ import kitchen, { Footer, FooterGroup, FooterLink, + useTheme, + Icon, + Select, } from "@tonightpass/kitchen"; -import { ThemeSwitch } from "nextra-theme-docs"; +import React from "react"; +import { + RiDiscordFill, + RiGithubFill, + RiInstagramFill, + RiLinkedinFill, + RiTwitterXFill, +} from "react-icons/ri"; const navigation = { - kitchen: [ + products: [ { - name: "Documentation", - href: "/docs", + name: "Ticketing", + href: "https://tonightpass.com/ticketing", }, { - name: "Components", - href: "/docs/components", + name: "Order Kiosk", + href: "https://tonightpass.com/order-kiosk", }, { - name: "Showcase", - href: "/showcase", + name: "Agency", + href: "https://tonightpass.com/agency", }, { - name: "Roadmap", - href: "https://github.com/orgs/tonightpass/projects/2", + name: "Social", + href: "https://tonightpass.com/social", + }, + { + name: "Jobs", + href: "https://tonightpass.com/jobs", + }, + { + name: "Artists", + href: "https://tonightpass.com/artists", + }, + { + name: "Promoters", + href: "https://tonightpass.com/promoters", + }, + { + name: "Suppliers", + href: "https://tonightpass.com/suppliers", + }, + { + name: "Venues", + href: "https://tonightpass.com/venues", + }, + { + name: "Developers", + href: "https://tonightpass.com/developers", + }, + ], + ressources: [ + { + name: "Help Center", + href: "https://tonightpass.com/help-center", + }, + { + name: "Community", + href: "https://tonightpass.com/community", + }, + { + name: "Design", + href: "/docs/brands/tonightpass", + }, + { + name: "Status", + href: "https://status.tonightpass.com", + }, + { + name: "Comparison", + href: "https://tonightpass.com/comparison", }, ], compagny: [ { - name: "Tonight Pass", - href: "https://tonightpass.com", + name: "About", + href: "https://tonightpass.com/about", + }, + { + name: "News", + href: "https://tonightpass.com/news", + }, + { + name: "Careers", + href: "https://tonightpass.com/careers", + }, + { + name: "Contact Us", + href: "https://tonightpass.com/contact", }, { name: "onRuntime Studio", @@ -41,14 +109,8 @@ const navigation = { href: "https://github.com/tonightpass", }, { - name: "Contact Sales", - href: "mailto:sales@tonightpass.com", - }, - ], - legal: [ - { - name: "License", - href: "https://github.com/tonightpass/kitchen/blob/master/LICENSE", + name: "Partners", + href: "https://tonightpass.com/partners", }, { name: "Privacy", @@ -58,119 +120,85 @@ const navigation = { name: "Terms", href: "https://tonightpass.com/terms", }, - ], - support: [ - { - name: "GitHub", - href: "https://github.com/tonightpass/kitchen", - }, { - name: "Discord", - href: "https://discord.gg/VvvAkPqQ98", + name: "Company Details", + href: "https://tonightpass.com/company-details", }, ], }; -const CustomFooter = ({ menu }: { menu: boolean }) => { - return ( - - {menu && ( - - - - )} +const CustomFooter = () => { + const { storedTheme, setTheme } = useTheme(); + const [mounted, setMounted] = React.useState(false); -
- - - - + React.useEffect(() => { + setMounted(true); + }, []); + + return ( +
+ + + + - - + + + )} + + + - - - - {navigation.kitchen.map((item, i) => ( - - {item.name} - - ))} - + + + + + + + + + + + + + + - - {navigation.compagny.map((item, i) => ( - - {item.name} - - ))} - + + {navigation.products.map((item, i) => ( + + {item.name} + + ))} + - - {navigation.legal.map((item, i) => ( - - {item.name} - - ))} - + + {navigation.ressources.map((item, i) => ( + + {item.name} + + ))} + - - {navigation.support.map((item, i) => ( - - {item.name} - - ))} - -
- + + {navigation.compagny.map((item, i) => ( + + {item.name} + + ))} + +
); }; -const Vercel = kitchen(Container)` - display: inline-block; - color: ${({ theme }) => theme.colors.accent.light}; - span { - color: ${({ theme }) => theme.colors.accent.light}; - } -`; - -const StyledContainer = kitchen(Container)` - color: ${({ theme }) => theme.colors.accent.light}; - - @media (max-width: ${({ theme }) => theme.breakpoint.mobile}) { - align-items: center; - justify-content: space-between; - flex-direction: row; - margin: ${({ theme }) => theme.gap.small} 0; - } -`; - export default CustomFooter; diff --git a/packages/kitchen/src/components/Footer/index.tsx b/packages/kitchen/src/components/Footer/index.tsx index e27cfb202..dc9f5e0c0 100644 --- a/packages/kitchen/src/components/Footer/index.tsx +++ b/packages/kitchen/src/components/Footer/index.tsx @@ -35,12 +35,26 @@ const FooterComponent = styled( const Nav = styled.nav` max-width: ${({ theme }) => theme.breakpoint.laptop}; margin: 0 auto; - display: flex; flex-wrap: nowrap; - justify-content: space-between; padding: 0 ${({ theme }) => theme.gap.normal}; + display: grid; + grid-template-columns: ${({ children }) => + `repeat(${Math.min(React.Children.count(children), 4)}, 1fr)`}; + gap: ${({ theme }) => theme.gap.normal}; + + @media (max-width: ${({ theme }) => theme.breakpoint.laptop}) { + grid-template-columns: ${({ children }) => + `repeat(${Math.min(React.Children.count(children), 3)}, 1fr)`}; + } + + @media (max-width: ${({ theme }) => theme.breakpoint.tablet}) { + grid-template-columns: ${({ children }) => + `repeat(${Math.min(React.Children.count(children), 2)}, 1fr)`}; + } + @media (max-width: ${({ theme }) => theme.breakpoint.mobile}) { - flex-direction: column; + grid-template-columns: ${({ children }) => + `repeat(${Math.min(React.Children.count(children), 1)}, 1fr)`}; } `; @@ -50,26 +64,27 @@ type GroupProps = { title: string; }; export type FooterGroupProps = KitchenComponent; -export const FooterGroup = styled(({ title, children }: FooterGroupProps) => { - const { isMobile } = useBreakpoint(); - if (isMobile) { - return ( - - {children} - - ); - } else - return ( -
- - {children} -
- ); -})` - margin-right: 24px; -`; +export const FooterGroup = styled( + ({ title, children, ...props }: FooterGroupProps) => { + const { isMobile } = useBreakpoint(); + if (isMobile) { + return ( + + {children} + + ); + } else + return ( +
+ + {children} +
+ ); + }, +)``; + const GroupTitle = styled.h2` margin: ${({ theme }) => theme.gap.small} 0; font-weight: ${({ theme }) => theme.weight.medium}; diff --git a/workshop/pages/footer.tsx b/workshop/pages/footer.tsx index d0f72f97f..934c103d9 100644 --- a/workshop/pages/footer.tsx +++ b/workshop/pages/footer.tsx @@ -120,43 +120,6 @@ const FooterPage: NextPage = () => { - - {"multi-group columns"} - - - );