@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/_components/flex-box/flex-box.tsx

@@ -0,0 +1,9 @@
+import Box, { BoxProps } from "@mui/material/Box";
+
+export default function FlexBox({ children, ...props }: BoxProps) {
+  return (
+    <Box display="flex" {...props}>
+      {children}
+    </Box>
+  );
+}

package/src/components/_components/flex-box/flex-row-center.tsx

@@ -0,0 +1,9 @@
+import Box, { BoxProps } from "@mui/material/Box";
+
+export default function FlexRowCenter({ children, ...props }: BoxProps) {
+  return (
+    <Box display="flex" justifyContent="center" alignItems="center" {...props}>
+      {children}
+    </Box>
+  );
+}

package/src/components/_components/flex-box/index.ts

@@ -0,0 +1,5 @@
+import FlexBox from "./flex-box";
+import FlexBetween from "./flex-between";
+import FlexRowCenter from "./flex-row-center";
+
+export { FlexBox, FlexBetween, FlexRowCenter };

package/src/components/_components/footer/components/about-links.tsx

@@ -0,0 +1,23 @@
+import { Fragment } from "react";
+import { Heading, StyledLink } from "../styles/index";
+import { ABOUT_LINKS } from "../data/index";
+
+// ==============================================================
+type Props = { isDark?: boolean };
+// ==============================================================
+
+export default function AboutLinks({ isDark }: Props) {
+  return (
+    <Fragment>
+      <Heading>About Us</Heading>
+
+      <div>
+        {ABOUT_LINKS.map((item, ind) => (
+          <StyledLink isDark={isDark} href="/" key={ind}>
+            {item}
+          </StyledLink>
+        ))}
+      </div>
+    </Fragment>
+  );
+}

package/src/components/_components/footer/components/app-store.tsx

@@ -0,0 +1,38 @@
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENT
+import FlexBox from "@/components/_components/flex-box/flex-box";
+// CUSTOM ICON COMPONENTS
+import { PLAY_APP_STORE_DATA } from "../data/index";
+
+export default function AppStore() {
+  return (
+    <FlexBox flexWrap="wrap" m={-1}>
+      {PLAY_APP_STORE_DATA.map(({ icon: Icon, subtitle, title, url }) => (
+        <a href={url} key={title} target="_blank" rel="noreferrer noopener">
+          <Box
+            m={1}
+            gap={1}
+            p="10px 16px"
+            color="white"
+            display="flex"
+            bgcolor="#161d2b"
+            borderRadius="5px"
+            alignItems="center"
+          >
+            <Icon />
+
+            <div>
+              <Box fontSize="8px" fontWeight="600" lineHeight="1">
+                {subtitle}
+              </Box>
+
+              <Box fontSize="14px" fontWeight="700">
+                {title}
+              </Box>
+            </div>
+          </Box>
+        </a>
+      ))}
+    </FlexBox>
+  );
+}

package/src/components/_components/footer/components/customer-care-links.tsx

@@ -0,0 +1,21 @@
+import { Fragment } from "react";
+import { Heading, StyledLink } from "../styles/index";
+import { CUSTOMER_CARE_LINKS } from "../data/index";
+
+// ==============================================================
+type Props = { isDark?: boolean };
+// ==============================================================
+
+export default function CustomerCareLinks({ isDark }: Props) {
+  return (
+    <Fragment>
+      <Heading>Customer Care</Heading>
+
+      {CUSTOMER_CARE_LINKS.map((item, ind) => (
+        <StyledLink isDark={isDark} href="/" key={ind}>
+          {item}
+        </StyledLink>
+      ))}
+    </Fragment>
+  );
+}

package/src/components/_components/footer/components/logo.tsx

@@ -0,0 +1,23 @@
+import { Fragment } from "react";
+import Link from "next/link";
+import AppStore from "./app-store";
+import Image from "@/components/_components/BazaarImage";
+import { Paragraph } from "@/components/_components/Typography";
+
+export default function LogoSection() {
+  return (
+    <Fragment>
+      <Link href="/">
+        <Image mb={2.5} src="/assets/images/logo.svg" alt="logo" />
+      </Link>
+
+      <Paragraph mb={2.5} color="grey.500">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Auctor libero
+        id et, in gravida. Sit diam duis mauris nulla cursus. Erat et lectus vel
+        ut sollicitudin elit at amet.
+      </Paragraph>
+
+      <AppStore />
+    </Fragment>
+  );
+}

package/src/components/_components/footer/components/social-links.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import IconButton from "@mui/material/IconButton";
+import styled from "@mui/material/styles/styled";
+// GLOBAL CUSTOM COMPONENT
+import FlexBox from "@/components/_components/flex-box/flex-box";
+// DATA
+import { SOCIAL_ICON_LINKS } from "../data/index";
+
+// STYLED COMPONENTS
+const StyledIconButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== "variant",
+})<Props>(({ variant, theme }) => ({
+  margin: 4,
+  fontSize: 12,
+  padding: "10px",
+  ...(variant === "light" && {
+    backgroundColor: "rgba(0,0,0,0.2)",
+  }),
+  ...(variant === "dark" && {
+    backgroundColor: theme.palette.grey[700],
+    ":hover": { backgroundColor: theme.palette.grey[800] },
+  }),
+  ".icon": { color: "white" },
+}));
+
+// ==============================================================
+type Props = { variant?: "light" | "dark" };
+// ==============================================================
+
+export default function SocialLinks({ variant = "light" }: Props) {
+  return (
+    <FlexBox className="flex" mx={-0.625}>
+      {SOCIAL_ICON_LINKS.map(({ Icon, url }, ind) => (
+        <a href={url} target="_blank" rel="noreferrer noopenner" key={ind}>
+          <StyledIconButton variant={variant}>
+            <Icon fontSize="inherit" className="icon" />
+          </StyledIconButton>
+        </a>
+      ))}
+    </FlexBox>
+  );
+}

package/src/components/_components/footer/data/index.ts

@@ -0,0 +1,54 @@
+// CUSTOM ICON COMPONENTS
+// import Google from "icons/Google";
+// import Twitter from "icons/Twitter";
+// import Youtube from "icons/Youtube";
+// import Facebook from "icons/Facebook";
+// import Instagram from "icons/Instagram";
+// import PlayStore from "icons/PlayStore";
+// import AppleStore from "icons/AppleStore";
+
+import FallbackIcon from "@/components/Blocks/Icons/Components/FallbackIcon";
+
+const Google = FallbackIcon;
+const Twitter = FallbackIcon;
+const Youtube = FallbackIcon;
+const Facebook = FallbackIcon;
+const Instagram = FallbackIcon;
+const PlayStore = FallbackIcon;
+const AppleStore = FallbackIcon;
+
+export const ABOUT_LINKS = [
+  "Careers",
+  "Our Stores",
+  "Our Cares",
+  "Terms & Conditions",
+  "Privacy Policy",
+];
+
+export const CUSTOMER_CARE_LINKS = [
+  "Help Center",
+  "Track Your Order",
+  "Corporate & Bulk Purchasing",
+  "Returns & Refunds",
+];
+
+export const SOCIAL_ICON_LINKS = [
+  { Icon: Facebook, url: "https://www.facebook.com/UILibOfficial" },
+  { Icon: Twitter, url: "https://twitter.com/uilibofficial" },
+  {
+    Icon: Youtube,
+    url: "https://www.youtube.com/channel/UCsIyD-TSO1wQFz-n2Y4i3Rg",
+  },
+  { Icon: Google, url: "https://www.google.com/search?q=ui-lib.com" },
+  { Icon: Instagram, url: "https://www.instagram.com/uilibofficial/" },
+];
+
+export const PLAY_APP_STORE_DATA = [
+  { url: "/", icon: PlayStore, title: "Google Play", subtitle: "Get it on" },
+  {
+    url: "/",
+    icon: AppleStore,
+    title: "App Store",
+    subtitle: "Download on the",
+  },
+];

package/src/components/_components/footer/footer-1.tsx

@@ -0,0 +1,62 @@
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Container from "@mui/material/Container";
+// LOCAL CUSTOM COMPONENT
+import LogoSection from "./components/logo";
+import AboutLinks from "./components/about-links";
+import SocialLinks from "./components/social-links";
+import CustomerCareLinks from "./components/customer-care-links";
+// GLOBAL CUSTOM COMPONENTS
+import { Paragraph } from "@/components/_components/Typography";
+// STYLED COMPONENTS
+import { Heading } from "./styles/index";
+
+export default function Footer1() {
+  return (
+    <Box component="footer" bgcolor="#222935" mb={{ sm: 0, xs: 7 }}>
+      <Box
+        component={Container}
+        color="white"
+        overflow="hidden"
+        py={{ sm: 10, xs: 4 }}
+      >
+        <Grid container spacing={3}>
+          <Grid item lg={4} md={6} sm={6} xs={12}>
+            <LogoSection />
+          </Grid>
+
+          {/* ABOUT US LINKS */}
+          <Grid item lg={2} md={6} sm={6} xs={12}>
+            <AboutLinks />
+          </Grid>
+
+          {/* CUSTOMER CARE LINKS */}
+          <Grid item lg={3} md={6} sm={6} xs={12}>
+            <CustomerCareLinks />
+          </Grid>
+
+          {/* CONTACT & SOCIAL LINKS */}
+          <Grid item lg={3} md={6} sm={6} xs={12}>
+            {/* CONTACT INFORMATION */}
+            <Heading>Contact Us</Heading>
+
+            <Paragraph py={0.6} color="grey.500">
+              70 Washington Square South, New York, NY 10012, United States
+            </Paragraph>
+
+            <Paragraph py={0.6} color="grey.500">
+              Email: uilib.help@gmail.com
+            </Paragraph>
+
+            <Paragraph py={0.6} mb={2} color="grey.500">
+              Phone: +1 1123 456 780
+            </Paragraph>
+
+            {/* SOCIAL LINKS WITH ICON */}
+            <SocialLinks />
+          </Grid>
+        </Grid>
+      </Box>
+    </Box>
+  );
+}

package/src/components/_components/footer/footer-2.tsx

@@ -0,0 +1,57 @@
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+// LOCAL CUSTOM COMPONENTS
+import AppStore from "./components/app-store";
+import SocialLinks from "./components/social-links";
+// GLOBAL CUSTOM COMPONENTS
+import BazaarImage from "@/components/_components/BazaarImage";
+import { Paragraph } from "@/components/_components/Typography";
+// DATA
+import { CUSTOMER_CARE_LINKS } from "./data/index";
+// STYLED COMPONENTS
+import { StyledFooter, StyledLink } from "./styles/index";
+
+export default function Footer2() {
+  return (
+    <StyledFooter
+      sx={{
+        padding: 5,
+        color: "white",
+        borderRadius: 2,
+        bgcolor: "#141850",
+        mb: { md: 2, xs: 10 },
+      }}
+    >
+      <Grid container spacing={6}>
+        <Grid size={{ sm: 3, xs: 12 }}>
+          <Link href="/">
+            <BazaarImage mb={2.5} src="/assets/images/logo.svg" alt="logo" />
+          </Link>
+
+          <Paragraph mb={2.5} color="grey.500" maxWidth="370px">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Auctor
+            libero id et, in gravida. Sit diam duis mauris nulla cursus. Erat et
+            lectus vel ut sollicitudin elit at amet.
+          </Paragraph>
+
+          <AppStore />
+        </Grid>
+
+        <Grid size={{ sm: 6, xs: 12 }}>
+          {/* CUSTOMER CARE LINKS */}
+          <Box mb={2} mt={{ md: 6, xs: 2 }}>
+            {CUSTOMER_CARE_LINKS.map((item, ind) => (
+              <StyledLink href="/" key={ind}>
+                {item}
+              </StyledLink>
+            ))}
+          </Box>
+
+          {/* SOCIAL LINKS WITH ICON */}
+          <SocialLinks />
+        </Grid>
+      </Grid>
+    </StyledFooter>
+  );
+}

package/src/components/_components/footer/footer-3.tsx

@@ -0,0 +1,53 @@
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+// import { SxProps } from "@mui/material/styles"; // 'SxProps' is declared but its value is never read.
+import Container from "@mui/material/Container";
+// LOCAL CUSTOM COMPONENT
+import AppStore from "./components/app-store";
+import SocialLinks from "./components/social-links";
+// GLOBAL CUSTOM COMPONENTS
+import BazaarImage from "@/components/_components/BazaarImage";
+import { Paragraph } from "@/components/_components/Typography";
+// DATA
+import { CUSTOMER_CARE_LINKS } from "./data/index";
+// STYLED COMPONENTS
+import { StyledRoot, StyledLink } from "./styles/index";
+
+export default function Footer3() {
+  return (
+    <StyledRoot>
+      <Container>
+        <Grid container spacing={6}>
+          <Grid size={{ md: 7, xs: 12 }}>
+            <Link href="/">
+              <BazaarImage mb={2.5} src="/assets/images/logo.svg" alt="logo" />
+            </Link>
+
+            <Paragraph mb={2.5} color="grey.300" maxWidth="370px">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Auctor
+              libero id et, in gravida. Sit diam duis mauris nulla cursus. Erat
+              et lectus vel ut sollicitudin elit at amet.
+            </Paragraph>
+
+            <AppStore />
+          </Grid>
+
+          <Grid size={{ md: 5, xs: 12 }}>
+            {/* CUSTOMER CARE LINKS */}
+            <Box mb={2} mt={{ md: 6, xs: 2 }}>
+              {CUSTOMER_CARE_LINKS.map((item, ind) => (
+                <StyledLink href="/" key={ind} sx={{ color: "grey.300" }}>
+                  {item}
+                </StyledLink>
+              ))}
+            </Box>
+
+            {/* SOCIAL LINKS WITH ICON */}
+            <SocialLinks />
+          </Grid>
+        </Grid>
+      </Container>
+    </StyledRoot>
+  );
+}

package/src/components/_components/footer/footer-4.tsx

@@ -0,0 +1,71 @@
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import Divider from "@mui/material/Divider";
+import Container from "@mui/material/Container";
+// LOCAL CUSTOM COMPONENT
+import AboutLinks from "./components/about-links";
+import SocialLinks from "./components/social-links";
+import CustomerCareLinks from "./components/customer-care-links";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@/components/_components/LazyImage";
+import { Paragraph } from "@/components/_components/Typography";
+import FlexBetween from "@/components/_components/flex-box/flex-between";
+// STYLED COMPONENT
+import { Heading } from "./styles/index";
+
+export default function Footer4() {
+  return (
+    <Box component="footer" bgcolor="white" pt={12}>
+      <Container>
+        <Grid container spacing={3}>
+          <Grid size={{ lg: 4, md: 4, sm: 6, xs: 12 }}>
+            <Box maxWidth={100}>
+              <LazyImage
+                src={require("../../../public/assets/images/logo2.svg")}
+                alt="logo"
+              />
+            </Box>
+
+            <Paragraph mb={2.5} maxWidth={{ xl: 400 }}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Auctor
+              libero id et, in gravida. Sit diam duis mauris nulla cursus. Erat
+              et lectus vel ut sollicitudin elit at amet.
+            </Paragraph>
+          </Grid>
+
+          {/* ABOUT US LINKS */}
+          <Grid size={{ lg: 2, md: 2, sm: 6, xs: 12 }}>
+            <AboutLinks isDark />
+          </Grid>
+
+          {/* CUSTOMER CARE LINKS */}
+          <Grid size={{ lg: 3, md: 3, sm: 6, xs: 12 }}>
+            <CustomerCareLinks isDark />
+          </Grid>
+
+          {/* CONTACT INFORMATION */}
+          <Grid size={{ lg: 3, md: 3, sm: 6, xs: 12 }}>
+            <Heading>Contact Us</Heading>
+
+            <Paragraph py={0.6}>
+              70 Washington Square South, New York, NY 10012, United States
+            </Paragraph>
+
+            <Paragraph py={0.6}>Email: uilib.help@gmail.com</Paragraph>
+
+            <Paragraph py={0.6} mb={2}>
+              Phone: +1 1123 456 780
+            </Paragraph>
+          </Grid>
+        </Grid>
+
+        <Box component={Divider} mt={{ md: 8, xs: 3 }} />
+
+        <FlexBetween pt={2} pb={{ sm: 10, md: 2 }}>
+          <Paragraph>© 2023 By UI Lib. All rights reserved.</Paragraph>
+          <SocialLinks variant="dark" />
+        </FlexBetween>
+      </Container>
+    </Box>
+  );
+}

package/src/components/_components/footer/index.ts

@@ -0,0 +1,4 @@
+export { default as Footer1 } from "./footer-1";
+export { default as Footer2 } from "./footer-2";
+export { default as Footer3 } from "./footer-3";
+export { default as Footer4 } from "./footer-4";

package/src/components/_components/footer/styles/index.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import Link from "next/link";
+import styled from "@mui/material/styles/styled";
+import getPaletteColor from "@/lib/get-palette-color";
+
+// ==============================================================
+type LinkProps = { isDark?: boolean };
+// ==============================================================
+
+export const StyledLink = styled(Link, {
+  shouldForwardProp: (prop) => prop !== "isDark",
+})<LinkProps>(({ theme, isDark }) => ({
+  borderRadius: 4,
+  display: "block",
+  cursor: "pointer",
+  position: "relative",
+  padding: "0.3rem 0rem",
+  ...(!isDark && {
+    color: theme.palette.grey[500],
+    "&:hover": { color: theme.palette.grey[100] },
+  }),
+}));
+
+export const StyledFooter = styled("footer")(({ theme }) => ({
+  [theme.breakpoints.down("md")]: { marginBottom: "4rem" },
+}));
+
+export const StyledRoot = styled("footer")(({ theme }) => ({
+  padding: 40,
+  color: "white",
+  borderRadius: 8,
+  background: getPaletteColor(theme, "primary", 600),
+  [theme.breakpoints.down("md")]: { marginBottom: "6rem !important" },
+}));
+
+export const Heading = styled("h6")({
+  fontSize: 18,
+  lineHeight: 1,
+  fontWeight: 600,
+  marginBottom: 12,
+});

package/src/components/_components/header/components/categories-menu.tsx

@@ -0,0 +1,23 @@
+import Button from "@mui/material/Button";
+// MUI ICON COMPONENT
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+// CUSTOM ICON COMPONENTS
+import Category from "@/components/_components/icons/category";
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox } from "@/components/_components/flex-box/index";
+import CategoryMenu from "@/components/_components/categories/category-menu";
+
+export default function CategoriesMenu() {
+  return (
+    <CategoryMenu
+      render={(handler) => (
+        <FlexBox color="grey.600" alignItems="center" ml={2}>
+          <Button color="inherit" onClick={(e) => handler(e)}>
+            <Category fontSize="small" color="inherit" />
+            <KeyboardArrowDown fontSize="small" color="inherit" />
+          </Button>
+        </FlexBox>
+      )}
+    />
+  );
+}

package/src/components/_components/header/components/mobile-header.tsx

@@ -0,0 +1,72 @@
+import { Fragment } from "react";
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import { useTranslations } from "next-intl";
+// CUSTOM COMPONENTS
+import { Paragraph } from "@/components/_components/Typography";
+import { SearchInput } from "@/components/_components/search-box/index";
+import { MobileMenu } from "@/components/_components/navbar/mobile-menu/index";
+import { FlexBetween, FlexBox } from "@/components/_components/flex-box/index";
+import SiteLogo from "@/components/_components/site-logo";
+import MiniCartClient from "../../MiniCartClient";
+import User from "./user";
+// ICONS
+import { MdClear as Clear } from "react-icons/md";
+import Search from "@/components/_components/icons/search";
+// API
+import { Cart } from "@/schemas/cart.schema";
+
+import useHeader from "../hooks/use-header";
+
+interface Props {
+  cart: Cart;
+}
+
+export default function MobileHeader({ cart }: Props) {
+  const { searchBarOpen, toggleSearchBar } = useHeader();
+
+  const t = useTranslations("Search");
+
+  return (
+    <Fragment>
+      <FlexBetween width="100%">
+        {/* Left content - navigation icon */}
+        <Box flex={1}>
+          <MobileMenu />
+        </Box>
+
+        {/* Middle content - logo */}
+        <SiteLogo height="2.125rem" />
+
+        {/* Right content - search, account, cart icons */}
+        <FlexBox justifyContent="end" flex={1}>
+          <IconButton onClick={toggleSearchBar}>
+            <Search style={{ fontSize: "1.25rem" }} />
+          </IconButton>
+          <User mobile={true} />
+          {cart && <MiniCartClient cart={cart} mobile={true} />}
+        </FlexBox>
+      </FlexBetween>
+
+      {/* Search form drawer */}
+      <Drawer
+        open={searchBarOpen}
+        anchor="top"
+        onClose={toggleSearchBar}
+        sx={{ zIndex: 9999 }}
+      >
+        <Box width="auto" padding={2} height="100vh">
+          <FlexBetween mb={1}>
+            <Paragraph>{t("searchHeading")}</Paragraph>
+            <IconButton onClick={toggleSearchBar}>
+              <Clear />
+            </IconButton>
+          </FlexBetween>
+
+          <SearchInput handleCloseDrawer={toggleSearchBar} />
+        </Box>
+      </Drawer>
+    </Fragment>
+  );
+}