Skip to content

Commit

Permalink
🎨 improve footer style
Browse files Browse the repository at this point in the history
  • Loading branch information
@AntoineKM
AntoineKM committed Jan 13, 2024
1 parent 5295140 commit 7cd1c90
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 180 deletions.
268 changes: 148 additions & 120 deletions docs/components/Footer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -41,14 +109,8 @@ const navigation = {
href: "https://github.com/tonightpass",
},
{
name: "Contact Sales",
href: "mailto:[email protected]",
},
],
legal: [
{
name: "License",
href: "https://github.com/tonightpass/kitchen/blob/master/LICENSE",
name: "Partners",
href: "https://tonightpass.com/partners",
},
{
name: "Privacy",
Expand All @@ -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 (
<Container bg={"darker"}>
{menu && (
<Container
maxWidth={"laptop"}
py={"small"}
px={"normal"}
mx={"auto"}
w={"100%"}
row
>
<ThemeSwitch />
</Container>
)}
const CustomFooter = () => {
const { storedTheme, setTheme } = useTheme();
const [mounted, setMounted] = React.useState(false);

<Footer subfooter={"© 2023 Tonight Pass. All rights reserved."}>
<StyledContainer
mt={"small"}
align={"flex-start"}
justify={"flex-start"}
gap={"normal"}
>
<Link href={"/"}>
<Logo />
</Link>
React.useEffect(() => {
setMounted(true);
}, []);

return (
<Footer subfooter={"© 2023 Tonight Pass. All rights reserved."}>
<Container mt={"small"} align={"flex-start"} justify={"flex-start"}>
<Link href={"/"}>
<Logo />
</Link>

<Link
href={"https://vercel.com/?utm_source=tonightpass&utm_campaign=oss"}
>
<Vercel
px={"small"}
py={"tiny"}
bga={"dark"}
align={"center"}
br={"square"}
row
{mounted && (
<Container my={"normal"}>
<Select
value={storedTheme}
onChange={(e) => setTheme(e.target.value)}
size={"small"}
>
{"Deployed by"}{" "}
<span role={"img"} aria-label={"Vercel logo"}>
{"â–²\r"}
</span>{" "}
{"Vercel\r"}
</Vercel>
<option value={"system"}>{"System"}</option>
<option value={"dark"}>{"Dark"}</option>
<option value={"light"}>{"Light"}</option>
</Select>
</Container>
)}
<Container mt={"auto"} mb={"small"} gap={"small"} row>
<Link href={"https://linkedin.com/company/tonightpass"}>
<Icon icon={RiLinkedinFill} />
</Link>
</StyledContainer>

<FooterGroup title={"Ressources"}>
{navigation.kitchen.map((item, i) => (
<FooterLink key={i} href={item.href}>
{item.name}
</FooterLink>
))}
</FooterGroup>
<Link href={"https://instagram.com/tonightpass"}>
<Icon icon={RiInstagramFill} />
</Link>
<Link href={"https://x.com/tonightpass"}>
<Icon icon={RiTwitterXFill} />
</Link>
<Link href={"https://discord.gg/VvvAkPqQ98"}>
<Icon icon={RiDiscordFill} />
</Link>
<Link href={"https://github.com/tonightpass"}>
<Icon icon={RiGithubFill} />
</Link>
</Container>
</Container>

<FooterGroup title={"Company"}>
{navigation.compagny.map((item, i) => (
<FooterLink key={i} href={item.href}>
{item.name}
</FooterLink>
))}
</FooterGroup>
<FooterGroup title={"Products"}>
{navigation.products.map((item, i) => (
<FooterLink key={i} href={item.href}>
{item.name}
</FooterLink>
))}
</FooterGroup>

<FooterGroup title={"Legal"}>
{navigation.legal.map((item, i) => (
<FooterLink key={i} href={item.href}>
{item.name}
</FooterLink>
))}
</FooterGroup>
<FooterGroup title={"Ressources"}>
{navigation.ressources.map((item, i) => (
<FooterLink key={i} href={item.href}>
{item.name}
</FooterLink>
))}
</FooterGroup>

<FooterGroup title={"Support"}>
{navigation.support.map((item, i) => (
<FooterLink key={i} href={item.href}>
{item.name}
</FooterLink>
))}
</FooterGroup>
</Footer>
</Container>
<FooterGroup title={"Company"}>
{navigation.compagny.map((item, i) => (
<FooterLink key={i} href={item.href}>
{item.name}
</FooterLink>
))}
</FooterGroup>
</Footer>
);
};

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;
61 changes: 38 additions & 23 deletions packages/kitchen/src/components/Footer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)`};
}
`;

Expand All @@ -50,26 +64,27 @@ type GroupProps = {
title: string;
};
export type FooterGroupProps = KitchenComponent<GroupProps>;
export const FooterGroup = styled(({ title, children }: FooterGroupProps) => {
const { isMobile } = useBreakpoint();
if (isMobile) {
return (
<Collapse title={title}>
<FooterList>{children}</FooterList>
</Collapse>
);
} else
return (
<div>
<label htmlFor={title}>
<GroupTitle>{title}</GroupTitle>
</label>
<FooterList>{children}</FooterList>
</div>
);
})<FooterGroupProps>`
margin-right: 24px;
`;
export const FooterGroup = styled(
({ title, children, ...props }: FooterGroupProps) => {
const { isMobile } = useBreakpoint();
if (isMobile) {
return (
<Collapse title={title}>
<FooterList>{children}</FooterList>
</Collapse>
);
} else
return (
<div {...props}>
<label htmlFor={title}>
<GroupTitle>{title}</GroupTitle>
</label>
<FooterList>{children}</FooterList>
</div>
);
},
)<FooterGroupProps>``;

const GroupTitle = styled.h2`
margin: ${({ theme }) => theme.gap.small} 0;
font-weight: ${({ theme }) => theme.weight.medium};
Expand Down
Loading

1 comment on commit 7cd1c90

@vercel
Copy link

@vercel vercel bot commented on 7cd1c90 Jan 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

kitchen-workshop – ./workshop

kitchen-workshop.vercel.app
kitchen-workshop-tonightpass.vercel.app
kitchen-workshop-git-master-tonightpass.vercel.app

Please sign in to comment.