Skip to content

Commit

Permalink
🎨 improve footer with grids
Browse files Browse the repository at this point in the history
  • Loading branch information
@AntoineKM
AntoineKM committed Jan 12, 2024
1 parent c2c10aa commit c56e0e8
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 54 deletions.
85 changes: 48 additions & 37 deletions packages/kitchen/src/components/Footer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,28 @@ import styled from "styled-components";
import useBreakpoint from "../../hooks/useBreakpoint";
import { KitchenComponent } from "../../types";
import Collapse from "../Collapse";
import Link from "../Link";
import Link, { LinkProps } from "../Link";

type Props = {
/**
* The subfooter of the footer.
*/
subfooter?: string;

subfooter?: React.ReactNode;
children?: React.ReactNode;
};

export type FooterProps = KitchenComponent<Props>;

const Footer = styled(({ children, subfooter, ...props }: FooterProps) => {
return (
<footer {...props}>
<Nav>{children}</Nav>
{subfooter && <Subfooter>{subfooter}</Subfooter>}
</footer>
);
})<FooterProps>`
export const Footer = styled(
({ children, subfooter, ...props }: FooterProps) => {
return (
<footer {...props}>
<Nav>{children}</Nav>
{subfooter && <SubFooter>{subfooter}</SubFooter>}
</footer>
);
},
)<FooterProps>`
position: relative;
box-sizing: border-box;
padding: ${({ theme }) => theme.gap.normal} 0;
Expand Down Expand Up @@ -52,17 +53,17 @@ export const FooterGroup = styled(({ title, children }: FooterGroupProps) => {
const { isMobile } = useBreakpoint();
if (isMobile) {
return (
<FooterCollapse title={title}>
<List>{children}</List>
</FooterCollapse>
<Collapse title={title}>
<FooterList>{children}</FooterList>
</Collapse>
);
} else
return (
<div>
<label htmlFor={title}>
<GroupTitle>{title}</GroupTitle>
</label>
<List>{children}</List>
<FooterList>{children}</FooterList>
</div>
);
})<FooterGroupProps>`
Expand All @@ -73,37 +74,47 @@ const GroupTitle = styled.h2`
font-weight: ${({ theme }) => theme.weight.medium};
`;

const List = styled.ul`
list-style-type: none;
const FooterList = styled.ul`
color: ${({ theme }) => theme.colors.text.light};
display: flex;
flex-direction: column;
`;

const FooterCollapse = styled(Collapse)``;
display: grid;
grid-template-columns: 1fr 1fr;
list-style-type: none;
margin: 0;
padding: 0;
gap: ${({ theme }) => theme.gap.tiny} ${({ theme }) => theme.gap.small};
export const FooterLink = styled(Link)`
color: ${({ theme }) => theme.colors.text.lighter};
text-decoration: none;
margin: ${({ theme }) => theme.gap.tiny} 0;
@media (max-width: ${({ theme }) => theme.breakpoint.mobile}) {
grid-template-columns: 1fr;
}
`;

export const ListItem = styled(({ children }) => {
return (
<li>
<FooterLink>{children}</FooterLink>
</li>
);
})`
margin-top: 24px;
export type FooterLinkProps = KitchenComponent<
{
href: LinkProps["href"];
},
React.HTMLProps<HTMLLIElement>
>;

export const FooterLink = styled(
({ children, href, ...props }: FooterLinkProps) => {
return (
<li {...props}>
<Link href={href}>{children}</Link>
</li>
);
},
)`
${Link} {
color: ${({ theme }) => theme.colors.text.lighter};
font-size: 14px;
text-decoration: none;
}
`;

const Subfooter = styled.section`
export const SubFooter = styled.section`
font-size: ${({ theme }) => theme.size.small};
max-width: ${({ theme }) => theme.breakpoint.laptop};
margin: 0 auto;
margin-top: ${({ theme }) => theme.gap.normal};
padding: 0 ${({ theme }) => theme.gap.normal};
`;

export default Footer;
18 changes: 8 additions & 10 deletions packages/kitchen/src/components/Select/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const Select = styled(
...props
}: SelectProps) => {
return (
<Container size={size}>
<Container size={size} {...props}>
{label && <Label>{label}</Label>}
<SelectorContainer>
{prefix && <Prefix>{prefix}</Prefix>}
Expand All @@ -59,7 +59,6 @@ const Select = styled(
placeholder={placeholder}
disabled={disabled}
defaultValue={placeholder}
{...props}
>
{placeholder && (
<option disabled value={placeholder}>
Expand All @@ -72,14 +71,7 @@ const Select = styled(
</Container>
);
},
)<SelectProps>`
outline: none;
transition: border-color 0.2s ease-in-out;
border-radius: ${({ theme }) => theme.radius.square};
background-color: ${({ theme, disabled }) =>
disabled ? theme.colors.layout.darker : theme.colors.layout.darkest};
appearance: none;
`;
)<SelectProps>``;

const Container = styled.label<{
size: SelectProps["size"];
Expand Down Expand Up @@ -152,6 +144,12 @@ const Selector = styled.select<SelectProps>`
}
}};
font-size: inherit;
outline: none;
transition: border-color 0.2s ease-in-out;
appearance: none;
border-radius: ${({ theme }) => theme.radius.square};
background-color: ${({ theme, disabled }) =>
disabled ? theme.colors.layout.darker : theme.colors.layout.darkest};
border: 1px solid ${({ theme }) => theme.colors.layout.dark};
${({ theme, prefix }) => prefix && `padding-left: ${theme.gap.large};`}
${({ theme, suffix }) => suffix && `padding-right: ${theme.gap.large};`}
Expand Down
8 changes: 1 addition & 7 deletions packages/kitchen/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,7 @@ export type { DrawerProps } from "./components/Drawer";
export { default as Error } from "./components/Error";
export type { ErrorProps } from "./components/Error";

export {
default as Footer,
FooterGroup,
FooterLink,
FooterColumn,
} from "./components/Footer";
export type { FooterProps } from "./components/Footer";
export * from "./components/Footer";

export { default as Icon } from "./components/Icon";
export type { IconProps } from "./components/Icon";
Expand Down
37 changes: 37 additions & 0 deletions workshop/pages/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,43 @@ const FooterPage: NextPage = () => {
</FooterGroup>
</Footer>
</Container>

<Text>{"multi-group columns"}</Text>
<Container gap={10}>
<Footer>
<FooterGroup title={"Company"}>
<FooterLink href={"#"}>{"Home"}</FooterLink>
<FooterLink href={"#"}>{"About"}</FooterLink>
<FooterLink href={"#"}>{"Careers"}</FooterLink>
<FooterLink href={"#"}>{"Partners"}</FooterLink>
<FooterLink href={"#"}>{"Blog"}</FooterLink>
<FooterLink href={"#"}>{"Next.js Conf"}</FooterLink>
</FooterGroup>

<FooterGroup title={"Product"}>
<FooterLink href={"#"}>{"Pricing"}</FooterLink>
<FooterLink href={"#"}>{"Vercel for GitHub"}</FooterLink>
<FooterLink href={"#"}>{"Vercel for GitLab"}</FooterLink>
<FooterLink href={"#"}>{"Vercel for Bitbucket"}</FooterLink>
<FooterLink href={"#"}>{"Vercel Edge Network"}</FooterLink>
<FooterLink href={"#"}>{"Integrations Marketplace"}</FooterLink>
<FooterLink href={"#"}>{"Command-Line"}</FooterLink>
</FooterGroup>

<FooterColumn>
<FooterGroup title={"Education"}>
<FooterLink href={"#"}>{"Documentation"}</FooterLink>
<FooterLink href={"#"}>{"Guides"}</FooterLink>
<FooterLink href={"#"}>{"Support"}</FooterLink>
</FooterGroup>

<FooterGroup title={"More"}>
<FooterLink href={"#"}>{"Open Source Software"}</FooterLink>
<FooterLink href={"#"}>{"Design System"}</FooterLink>
</FooterGroup>
</FooterColumn>
</Footer>
</Container>
</Container>
</>
);
Expand Down

2 comments on commit c56e0e8

@vercel
Copy link

@vercel vercel bot commented on c56e0e8 Jan 12, 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-tonightpass.vercel.app
kitchen-workshop.vercel.app
kitchen-workshop-git-master-tonightpass.vercel.app

@vercel
Copy link

@vercel vercel bot commented on c56e0e8 Jan 12, 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-docs – ./docs

kitchen.tonightpass.com
kitchen-wine.vercel.app
kitchen-docs-tonightpass.vercel.app
kitchen-docs-git-master-tonightpass.vercel.app

Please sign in to comment.