@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/_components/product-cards/product-card-14/product-card.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import Link from "next/link";
+import { Fragment } from "react";
+import Button from "@mui/material/Button";
+import ButtonBase from "@mui/material/ButtonBase";
+import clsx from "clsx";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@/components/_components/LazyImage";
+import { FlexBox } from "@/components/_components/flex-box/index";
+import { H6, Paragraph } from "@/components/_components/Typography";
+// LOCAL CUSTOM HOOKS
+import useProduct from "../use-product";
+// CUSTOM UTILS LIBRARY FUNCTIONS
+import { calculateDiscount, currency } from "@/lib/lib";
+// STYLED COMPONENTS
+import { Content, PriceText } from "./styles/index";
+// CUSTOM DATA MODEL
+import { Product } from "@/components/_components/bazaar-types";
+
+// ==============================================================
+interface Props {
+  product: Product;
+  btnSmall?: boolean;
+}
+// ==============================================================
+
+export default function ProductCard14({ product, btnSmall = false }: Props) {
+  const { id, slug, title, thumbnail, price, discount } = product || {};
+
+  const { cartItem, handleCartAmountChange } = useProduct(slug);
+
+  const handleIncrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      name: title,
+      imgUrl: thumbnail,
+      qty: (cartItem?.Quantity || 0) + 1,
+    };
+    product;
+    handleCartAmountChange();
+  };
+
+  const handleDecrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      name: title,
+      imgUrl: thumbnail,
+      qty: (cartItem?.Quantity || 0) - 1,
+    };
+    product;
+    handleCartAmountChange("remove");
+  };
+
+  return (
+    <Fragment>
+      <Link href={`/products/${slug}`}>
+        <FlexBox bgcolor="grey.50" borderRadius={3} mb={2}>
+          <LazyImage alt={title} width={260} height={280} src={thumbnail} />
+        </FlexBox>
+      </Link>
+
+      <Content>
+        <H6 fontSize={17} fontWeight={700}>
+          {title}
+        </H6>
+
+        <Paragraph color="grey.600" fontWeight={600}>
+          12 pcs
+        </Paragraph>
+
+        <PriceText>
+          {calculateDiscount(price, discount)}
+          {discount ? (
+            <span className="base-price">{currency(price)}</span>
+          ) : null}
+        </PriceText>
+
+        <div className={clsx({ "button-small": btnSmall })}>
+          {!cartItem?.Quantity ? (
+            <Button
+              fullWidth
+              disableElevation
+              color="primary"
+              variant="contained"
+              onClick={handleIncrementQuantity}
+            >
+              Add To Cart
+            </Button>
+          ) : (
+            <div className="button-group">
+              <ButtonBase
+                className="base-button"
+                onClick={handleDecrementQuantity}
+              >
+                <Remove fontSize="small" />
+              </ButtonBase>
+
+              <Paragraph flex={1} fontWeight="600" lineHeight={1.75}>
+                {cartItem?.Quantity}
+              </Paragraph>
+
+              <ButtonBase
+                className="base-button"
+                onClick={handleIncrementQuantity}
+              >
+                <Add fontSize="small" />
+              </ButtonBase>
+            </div>
+          )}
+        </div>
+      </Content>
+    </Fragment>
+  );
+}

package/src/components/_components/product-cards/product-card-14/styles/index.ts

@@ -0,0 +1,40 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+import getPaletteColor from "@/lib/get-palette-color";
+
+export const PriceText = styled("p")(({ theme }) => ({
+  gap: 8,
+  fontSize: 17,
+  fontWeight: 700,
+  marginBottom: 8,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.primary.main,
+  ".base-price": {
+    fontSize: 15,
+    // marginLeft: 8,
+    fontWeight: 600,
+    textDecoration: "line-through",
+    color: theme.palette.grey[600],
+  },
+}));
+
+export const Content = styled("div")(({ theme }) => ({
+  textAlign: "center",
+  ".button-group": {
+    color: "white",
+    display: "flex",
+    overflow: "hidden",
+    borderRadius: "6px",
+    alignItems: "center",
+    backgroundColor: theme.palette.primary.main,
+    ".base-button": {
+      padding: "8px 16px",
+      backgroundColor: getPaletteColor(theme, "primary", 800),
+    },
+  },
+  ".button-small": { maxWidth: 170, margin: "auto" },
+  ".MuiButton-containedPrimary": { color: "white" },
+}));

package/src/components/_components/product-cards/product-card-15/index.ts

@@ -0,0 +1 @@
+export { default } from "./product-card";

package/src/components/_components/product-cards/product-card-15/product-card.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import Link from "next/link";
+import Button from "@mui/material/Button";
+import ButtonBase from "@mui/material/ButtonBase";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@/components/_components/LazyImage";
+import { H6, Paragraph } from "@/components/_components/Typography";
+// LOCAL CUSTOM HOOKS
+import useProduct from "../use-product";
+// CUSTOM UTILS LIBRARY FUNCTIONS
+import { calculateDiscount, currency } from "@/lib/lib";
+// STYLED COMPONENTS
+import { Content, PriceText, StyledRoot } from "./styles/index";
+// CUSTOM DATA MODEL
+import { Product } from "@/components/_components/bazaar-types";
+
+// ==============================================================
+interface Props {
+  product: Product;
+}
+// ==============================================================
+
+export default function ProductCard14({ product }: Props) {
+  const { id, slug, title, thumbnail, price, discount } = product || {};
+
+  const { cartItem, handleCartAmountChange } = useProduct(slug);
+
+  const handleIncrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      name: title,
+      imgUrl: thumbnail,
+      qty: (cartItem?.Quantity || 0) + 1,
+    };
+    product;
+    handleCartAmountChange();
+  };
+
+  const handleDecrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      name: title,
+      imgUrl: thumbnail,
+      qty: (cartItem?.Quantity || 0) - 1,
+    };
+    product;
+    handleCartAmountChange("remove");
+  };
+
+  return (
+    <StyledRoot>
+      <Link href={`/products/${slug}`}>
+        <LazyImage alt={title} width={260} height={280} src={thumbnail} />
+      </Link>
+
+      <Content>
+        <div>
+          <H6 fontSize={17} fontWeight={700}>
+            {title}
+          </H6>
+
+          <Paragraph color="grey.600" mb={2}>
+            10% off
+          </Paragraph>
+
+          <PriceText>
+            {calculateDiscount(price, discount)}
+            {discount ? (
+              <span className="base-price">{currency(price)}</span>
+            ) : null}
+          </PriceText>
+        </div>
+
+        <div>
+          {!cartItem?.Quantity ? (
+            <Button
+              fullWidth
+              disableElevation
+              color="primary"
+              variant="contained"
+              onClick={handleIncrementQuantity}
+            >
+              Add To Cart
+            </Button>
+          ) : (
+            <div className="button-group">
+              <ButtonBase
+                className="base-button"
+                onClick={handleDecrementQuantity}
+              >
+                <Remove fontSize="small" />
+              </ButtonBase>
+
+              <Paragraph flex={1} fontWeight="600" lineHeight={1.75}>
+                {cartItem?.Quantity}
+              </Paragraph>
+
+              <ButtonBase
+                className="base-button"
+                onClick={handleIncrementQuantity}
+              >
+                <Add fontSize="small" />
+              </ButtonBase>
+            </div>
+          )}
+        </div>
+      </Content>
+    </StyledRoot>
+  );
+}

package/src/components/_components/product-cards/product-card-15/styles/index.ts

@@ -0,0 +1,57 @@
+"use client";
+
+import getPaletteColor from "@/lib/get-palette-color";
+import styled from "@mui/material/styles/styled";
+
+export const StyledRoot = styled("div")(({ theme }) => ({
+  borderRadius: 8,
+  border: `1px solid ${theme.palette.divider}`,
+  transition: "all 300ms ease-in-out",
+  ":hover": { boxShadow: theme.shadows[2] },
+}));
+
+export const PriceText = styled("p")(({ theme }) => ({
+  gap: 8,
+  fontSize: 17,
+  lineHeight: 1,
+  fontWeight: 700,
+  display: "flex",
+  alignItems: "center",
+  color: theme.palette.primary.main,
+  ".base-price": {
+    fontSize: 15,
+    fontWeight: 500,
+    textDecoration: "line-through",
+    color: getPaletteColor(theme, "grey", 500),
+  },
+}));
+
+export const Content = styled("div")(({ theme }) => ({
+  padding: 18,
+  display: "flex",
+  alignItems: "end",
+  justifyContent: "space-between",
+  ".button-group": {
+    color: "white",
+    display: "flex",
+    overflow: "hidden",
+    borderRadius: "6px",
+    alignItems: "center",
+    backgroundColor: theme.palette.primary.main,
+    ".base-button": {
+      padding: "8px 16px",
+      backgroundColor: getPaletteColor(theme, "primary", 800),
+    },
+  },
+  ".button-small": { maxWidth: 170, margin: "auto" },
+  ".MuiButton-containedPrimary": { color: "white" },
+}));
+
+// Extend PaletteColor to include numeric indices
+// interface ExtendedPaletteColor {
+//   main: string;
+//   light: string;
+//   dark: string;
+//   contrastText: string;
+//   [key: string]: string; // Allow numeric keys as string indices
+// }

package/src/components/_components/product-cards/product-card-16/components/quantity-buttons.tsx

@@ -0,0 +1,56 @@
+import { Fragment } from "react";
+import Button from "@mui/material/Button";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox } from "@/components/_components/flex-box/index";
+import { Paragraph } from "@/components/_components/Typography";
+
+// ==============================================================
+interface Props {
+  quantity: number;
+  handleDecrement: () => void;
+  handleIncrement: () => void;
+}
+// ==============================================================
+
+export default function QuantityButtons(props: Props) {
+  const { quantity, handleDecrement, handleIncrement } = props || {};
+
+  return (
+    <FlexBox
+      width="30px"
+      alignItems="center"
+      className="add-cart"
+      flexDirection="column-reverse"
+      justifyContent={quantity ? "space-between" : "flex-start"}
+    >
+      <Button
+        color="primary"
+        variant="outlined"
+        onClick={handleIncrement}
+        sx={{ padding: "3px" }}
+      >
+        <Add fontSize="small" />
+      </Button>
+
+      {quantity ? (
+        <Fragment>
+          <Paragraph color="text.primary" fontWeight="600">
+            {quantity}
+          </Paragraph>
+
+          <Button
+            color="primary"
+            variant="outlined"
+            onClick={handleDecrement}
+            sx={{ padding: "3px" }}
+          >
+            <Remove fontSize="small" />
+          </Button>
+        </Fragment>
+      ) : null}
+    </FlexBox>
+  );
+}

package/src/components/_components/product-cards/product-card-16/index.ts

@@ -0,0 +1 @@
+export { default } from "./product-card";

package/src/components/_components/product-cards/product-card-16/product-card.tsx

@@ -0,0 +1,114 @@
+import Link from "next/link";
+import Rating from "@mui/material/Rating";
+// GLOBAL CUSTOM COMPONENTS
+import { H6 } from "@/components/_components/Typography";
+import { FlexBetween, FlexBox } from "@/components/_components/flex-box/index";
+import ImageWithFallback from "../../../ImageWithFallback";
+// CUSTOM UTILS LIBRARY FUNCTIONS
+import { calculateDiscount, currency } from "@/lib/lib";
+// STYLED COMPONENTS
+import { PriceText } from "./styles/index";
+// LOCAL COMPONENTS
+import DiscountChip from "../discount-chip";
+import QuantityButtons from "./components/quantity-buttons";
+// LOCAL CUSTOM HOOKS
+import useProduct from "../use-product";
+
+import buildDetailUrl from "@/lib/build-detail-url";
+
+type Props = {
+  title: string;
+  slug: string;
+  price: number;
+  imgUrl: string;
+  rating?: number;
+  discount?: number;
+  id: number;
+  // show or hide
+  showAddToCart?: boolean;
+};
+
+export default function ProductCard16({
+  title,
+  slug,
+  price,
+  imgUrl,
+  rating,
+  discount = 0,
+  id,
+  showAddToCart = true,
+}: Props) {
+  const { cartItem, handleCartAmountChange } = useProduct(slug);
+
+  const handleIncrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      name: title,
+      imgUrl,
+      qty: (cartItem?.Quantity || 0) + 1,
+    };
+    product;
+    handleCartAmountChange();
+  };
+
+  const handleDecrementQuantity = () => {
+    const product = {
+      id,
+      slug,
+      price,
+      name: title,
+      imgUrl,
+      qty: (cartItem?.Quantity || 0) - 1,
+    };
+    product;
+    handleCartAmountChange("remove");
+  };
+
+  return (
+    <div>
+      <Link href={buildDetailUrl(title, id)}>
+        <FlexBox position="relative" bgcolor="grey.50" borderRadius={3} mb={2}>
+          <ImageWithFallback
+            alt={title ?? "Product Image"}
+            width={380}
+            height={379}
+            src={imgUrl}
+            style={{ borderRadius: "12px" }}
+          />
+          {discount ? (
+            <DiscountChip discount={discount} sx={{ left: 20, top: 20 }} />
+          ) : null}
+        </FlexBox>
+      </Link>
+
+      <FlexBetween alignItems="flex-end">
+        <div>
+          <Link href={buildDetailUrl(title, id)}>
+            <H6 fontWeight={700} mb={1}>
+              {title}
+            </H6>
+          </Link>
+
+          <Rating readOnly value={rating} size="small" precision={0.5} />
+
+          <PriceText>
+            {discount ? (
+              <span className="base-price">{currency(price)}</span>
+            ) : null}
+            {calculateDiscount(price, discount)}
+          </PriceText>
+        </div>
+        {/* PRODUCT QUANTITY HANDLER BUTTONS */}
+        {showAddToCart && (
+          <QuantityButtons
+            quantity={cartItem?.Quantity || 0}
+            handleIncrement={handleIncrementQuantity}
+            handleDecrement={handleDecrementQuantity}
+          />
+        )}
+      </FlexBetween>
+    </div>
+  );
+}

package/src/components/_components/product-cards/product-card-16/styles/index.ts

@@ -0,0 +1,18 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+
+export const PriceText = styled("p")(({ theme }) => ({
+  fontSize: 17,
+  lineHeight: 1,
+  fontWeight: 700,
+  marginTop: ".75rem",
+  color: theme.palette.primary.main,
+  ".base-price": {
+    fontSize: 15,
+    marginRight: 8,
+    fontWeight: 600,
+    textDecoration: "line-through",
+    color: theme.palette.grey[600],
+  },
+}));

package/src/components/_components/product-cards/product-card-2/components/favorite-button.tsx

@@ -0,0 +1,29 @@
+import Button from "@mui/material/Button";
+// MUI ICON COMPONENTS
+import Favorite from "@mui/icons-material/Favorite";
+import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+
+// ==============================================================
+interface Props {
+  isFavorite: boolean;
+  handleClick: () => void;
+}
+// ==============================================================
+
+export default function FavoriteButton({ isFavorite, handleClick }: Props) {
+  const STYLES = {
+    height: 0,
+    alignItems: "flex-start",
+    "&:hover": { backgroundColor: "transparent" },
+  };
+
+  return (
+    <Button disableRipple disableElevation onClick={handleClick} sx={STYLES}>
+      {isFavorite ? (
+        <Favorite fontSize="small" color="primary" />
+      ) : (
+        <FavoriteBorder fontSize="small" sx={{ opacity: 0.5 }} />
+      )}
+    </Button>
+  );
+}

package/src/components/_components/product-cards/product-card-2/components/product-price.tsx

@@ -0,0 +1,26 @@
+import Box from "@mui/material/Box";
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox } from "@/components/_components/flex-box/index";
+import { Paragraph } from "@/components/_components/Typography";
+// CUSTOM UTILS LIBRARY FUNCTIONS
+import { calculateDiscount, currency } from "@/lib/lib";
+
+// ==============================================================
+type Props = { price: number; off: number };
+// ==============================================================
+
+export default function ProductPrice({ price, off }: Props) {
+  return (
+    <FlexBox gap={1} alignItems="center">
+      <Paragraph fontWeight="600" color="primary.main">
+        {calculateDiscount(price, off)}
+      </Paragraph>
+
+      {off ? (
+        <Box component="del" fontWeight="600" color="grey.600">
+          {currency(price)}
+        </Box>
+      ) : null}
+    </FlexBox>
+  );
+}

package/src/components/_components/product-cards/product-card-2/index.ts

@@ -0,0 +1 @@
+export { default as ProductCard2 } from "./product-card";

package/src/components/_components/product-cards/product-card-2/product-card.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import Rating from "@mui/material/Rating";
+// LOCAL CUSTOM COMPONENTS
+import ProductPrice from "./components/product-price";
+import FavoriteButton from "./components/favorite-button";
+// GLOBAL CUSTOM COMPONENTS
+import HoverBox from "@/components/_components/HoverBox";
+import { H6 } from "@/components/_components/Typography";
+import LazyImage from "@/components/_components/LazyImage";
+import { FlexBetween } from "@/components/_components/flex-box/index";
+
+// ========================================================
+interface Props {
+  off?: number;
+  slug: string;
+  title: string;
+  price: number;
+  imgUrl: string;
+  rating: number;
+  hideReview?: boolean;
+  hideFavoriteIcon?: boolean;
+}
+// ========================================================
+
+export default function ProductCard2({
+  slug,
+  title,
+  price,
+  imgUrl,
+  rating,
+  off = 20,
+  hideReview,
+  hideFavoriteIcon,
+}: Props) {
+  const [favorite, setFavorite] = useState(false);
+
+  return (
+    <div>
+      <Link href={`/products/${slug}`}>
+        <HoverBox overflow="hidden" borderRadius={2}>
+          <LazyImage width={270} height={270} alt={title} src={imgUrl} />
+        </HoverBox>
+      </Link>
+
+      <FlexBetween mt={2}>
+        <div>
+          <H6 mb={0.5} title={title} ellipsis>
+            {title}
+          </H6>
+
+          {!hideReview ? (
+            <Rating size="small" value={rating} color="warn" readOnly />
+          ) : null}
+
+          <ProductPrice price={price} off={off} />
+        </div>
+
+        {!hideFavoriteIcon ? (
+          <FavoriteButton
+            isFavorite={favorite}
+            handleClick={() => setFavorite((state) => !state)}
+          />
+        ) : null}
+      </FlexBetween>
+    </div>
+  );
+}