This repository has been archived by the owner on Jan 18, 2025. It is now read-only.
forked from saleor/storefront
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Saleor 6298/footer tailwind theme (saleor#179)
* Taliwnd config and <Box /> component * Added footer menu query and refactor max-w to container * Code review fixes * Removed unused comment line and import * Removed null return in footer
- Loading branch information
1 parent
3e9ff1f
commit 918f913
Showing
27 changed files
with
332 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| .box { | ||
| @apply bg-white border-2 border-main shadow-decorative-center sm:shadow-decorative; | ||
| padding: calc(theme("spacing.10") - theme("borderWidth.2")) | ||
| calc(theme("spacing.6") - theme("borderWidth.2")); | ||
| } | ||
|
|
||
| @screen sm { | ||
| .box { | ||
| padding: calc(theme("spacing.10") - theme("borderWidth.2")); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import clsx from "clsx"; | ||
| import { HTMLAttributes } from "react"; | ||
|
|
||
| import styles from "./Box.module.css"; | ||
|
|
||
| export interface BoxProps extends HTMLAttributes<HTMLDivElement> { | ||
| shadowless?: boolean; | ||
| } | ||
|
|
||
| export function Box({ className, ...rest }: BoxProps) { | ||
| return <div className={clsx(styles.box, className)} {...rest} />; | ||
| } | ||
|
|
||
| export default Box; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export type { BoxProps } from "./Box"; | ||
| export { Box } from "./Box"; | ||
| export { default } from "./Box"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| .footer { | ||
| @apply sm:container mb-18 sm:mb-15 mt-16; | ||
| } | ||
|
|
||
| .footer-inner { | ||
| @apply px-6 border-l-0 border-r-0 sm:border-l-2 sm:border-r-2; | ||
| } | ||
|
|
||
| @screen sm { | ||
| .footer-inner { | ||
| padding: calc(theme("spacing.10") - theme("borderWidth.2")); | ||
| } | ||
| } | ||
|
|
||
| .menu { | ||
| @apply list-none mb-8; | ||
| } | ||
|
|
||
| .menu li + li { | ||
| @apply mt-2; | ||
| } | ||
|
|
||
| .menu-link { | ||
| @apply text-base cursor-pointer hover:underline; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import clsx from "clsx"; | ||
| import Image from "next/image"; | ||
| import Link from "next/link"; | ||
| import { HTMLAttributes } from "react"; | ||
|
|
||
| import { getLinkPath } from "@/lib/menus"; | ||
| import { usePaths } from "@/lib/paths"; | ||
| import { useFooterMenuQuery } from "@/saleor/api"; | ||
|
|
||
| import { Box } from "../Box"; | ||
| import { useRegions } from "../RegionsProvider"; | ||
| import styles from "./Footer.module.css"; | ||
|
|
||
| export type FooterProps = HTMLAttributes<HTMLElement>; | ||
|
|
||
| export function Footer({ className, ...rest }: FooterProps) { | ||
| const paths = usePaths(); | ||
| const { query, currentChannel, currentLocale } = useRegions(); | ||
|
|
||
| const { data, error } = useFooterMenuQuery({ variables: { ...query } }); | ||
|
|
||
| if (error) { | ||
| console.error("Footer component error", error.message); | ||
| } | ||
|
|
||
| const menu = data?.menu?.items || []; | ||
|
|
||
| return ( | ||
| <footer className={clsx(styles.footer, className)} {...rest}> | ||
| <Box className={styles["footer-inner"]}> | ||
| <div className="flex mb-14 sm:mb-10"> | ||
| <Link href={paths.$url()} passHref> | ||
| <a href="pass" className="hidden sm:inline-block"> | ||
| <div className="mt-px group block h-16 w-28 relative grayscale"> | ||
| <Image src="/saleor.svg" alt="Saleor logo" layout="fill" /> | ||
| </div> | ||
| </a> | ||
| </Link> | ||
| <div className="grid grid-cols-2 gap-[2rem] w-full sm:w-auto sm:flex sm:flex-wrap sm:justify-end sm:ml-auto"> | ||
| {menu.map((item) => ( | ||
| <div className="sm:ml-14" key={item?.id}> | ||
| <Link href={getLinkPath(item!, currentChannel.slug, currentLocale)} passHref> | ||
| <a | ||
| href="pass" | ||
| className="block text-md font-bold mb-4 cursor-pointer hover:underline" | ||
| > | ||
| {item?.name} | ||
| </a> | ||
| </Link> | ||
| <ul className={styles.menu}> | ||
| {item?.children?.map((sub) => ( | ||
| <li key={sub?.id}> | ||
| <Link href={getLinkPath(sub!, currentChannel.slug, currentLocale)} passHref> | ||
| <a href="pass" className={styles["menu-link"]}> | ||
| {sub?.name} | ||
| </a> | ||
| </Link> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| <p className="text-sm text-main-3"> | ||
| © Copyright 2018 - {new Date().getFullYear()} Saleor Commerce | ||
| </p> | ||
| </Box> | ||
| </footer> | ||
| ); | ||
| } | ||
|
|
||
| export default Footer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from "./Footer"; | ||
| export { default } from "./Footer"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| query FooterMenu($locale: LanguageCodeEnum!, $channel: String!) { | ||
| menu(slug: "footer", channel: $channel) { | ||
| id | ||
| items { | ||
| children { | ||
| ...MenuItemFragment | ||
| } | ||
| ...MenuItemFragment | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { pagesPath } from "@/lib/$path"; | ||
| import { MenuItemFragment } from "@/saleor/api"; | ||
|
|
||
| export const getLinkPath = (item: MenuItemFragment, channel: string, locale: string) => { | ||
| const paths = pagesPath._channel(channel)._locale(locale); | ||
|
|
||
| if (item.category) { | ||
| return paths.category._slug(item.category?.slug).$url(); | ||
| } | ||
| if (item.collection) { | ||
| return paths.collection._slug(item.collection?.slug).$url(); | ||
| } | ||
| if (item.page) { | ||
| return paths.page._slug(item.page?.slug).$url(); | ||
| } | ||
| return paths.$url(); | ||
| }; | ||
|
|
||
| export default getLinkPath; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.