ui-landing-page 6.1.0

package/src/components/LandingPage/common/ui-kit/moleculars/ButtonCommingSoon.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { BaseModal } from "../atomics";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const ButtonCommingSoon = (props: Props) => {
+  const { children } = props;
+  const [isOpenOwner, setIsOpenOwner] = useState(false);
+  const toggleModal = () => setIsOpenOwner((pre) => !pre);
+  return (
+    <>
+      <BaseModal
+        isOpen={isOpenOwner}
+        toggleModal={toggleModal}
+        className="rounded-lg border-none p-6">
+        <div className="flex min-h-[150px] items-center justify-center text-lg font-semibold text-neutral-4">
+          Coming Soon!
+        </div>
+      </BaseModal>
+
+      <div
+        className="flex-1 rounded-xl border-white gap-1 border py-1"
+        onClick={toggleModal}>
+        <div className="flex w-full items-center justify-center gap-2">
+          {children}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ButtonCommingSoon;

package/src/components/LandingPage/common/ui-kit/moleculars/CollasibleText.tsx

@@ -0,0 +1,109 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { parse } from "@phygitallabs/helpers";
+import {
+  forwardRef,
+  MutableRefObject,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { getPrimaryStyling } from "../../../utils/helper";
+import { FadeInMotion } from "../../FadeInMotion";
+import { BaseFieldType, FieldConfig, ThemeConfig } from "../types/base";
+
+type CollasibleTextType = BaseFieldType & {
+  sectionId: string;
+  expandedComponent: React.ComponentElement<any, any>;
+};
+
+const getTextContent = (element: any): string => {
+  if (typeof element === "string") return element;
+  if (Array.isArray(element)) return element.map(getTextContent).join("");
+  if (typeof element === "object" && element !== null) {
+    if (element.type === "br") return "\n";
+    if (element.props && element.props.children) {
+      return getTextContent(element.props.children);
+    }
+  }
+  return "";
+};
+
+// eslint-disable-next-line react/display-name
+const CollasibleText = forwardRef<HTMLDivElement, CollasibleTextType>(
+  (props, ref) => {
+    const containerRef = ref as MutableRefObject<HTMLDivElement>;
+    const contentRef = useRef<HTMLDivElement>(null);
+    const { field, expandedComponent, configTheme } = props;
+    const { value, style_config: configField } = { ...field };
+
+    const [isTextOverflow, setIsTextOverflow] = useState(false);
+
+    // Check for overflow by comparing scroll height vs client height
+    const checkOverflow = () => {
+      if (!containerRef.current || !contentRef.current) return;
+
+      const container = containerRef.current;
+      const content = contentRef.current;
+
+      // Allow some buffer for line height calculations
+      const hasOverflow = content.scrollHeight > container.clientHeight + 5;
+      setIsTextOverflow(hasOverflow);
+    };
+
+    useEffect(() => {
+      if (!containerRef.current || !contentRef.current) return;
+
+      // Check overflow after content is rendered
+      const timer = setTimeout(checkOverflow, 100);
+
+      // Also check on resize
+      const resizeObserver = new ResizeObserver(checkOverflow);
+      resizeObserver.observe(containerRef.current);
+
+      return () => {
+        clearTimeout(timer);
+        resizeObserver.disconnect();
+      };
+    }, [containerRef, field, value]);
+
+    const parsedContent = parse(value || "");
+
+    return (
+      <FadeInMotion duration={0.5} delay={0.5} className="h-full">
+        <div
+          className="relative h-full w-full overflow-hidden"
+          style={{
+            ...getPrimaryStyling(
+              configTheme as ThemeConfig,
+              configField as FieldConfig
+            ),
+          }}
+        >
+          <div
+            ref={contentRef}
+            style={
+              {
+                "--max-lines":
+                  Math.floor((containerRef.current?.clientHeight || 0) / 22) -
+                  1,
+              } as any
+            }
+          >
+            {parsedContent}
+          </div>
+          {/* Gradient overlay and read more button */}
+          {isTextOverflow && (
+            <>
+              <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-black via-black/80 to-transparent"></div>
+              <div className="absolute bottom-3 right-0 z-10">
+                {expandedComponent}
+              </div>
+            </>
+          )}
+        </div>
+      </FadeInMotion>
+    );
+  }
+);
+
+export default CollasibleText;

package/src/components/LandingPage/common/ui-kit/moleculars/ContactCard.tsx

@@ -0,0 +1,167 @@
+import { Envelope, Phone, MapPinArea, Globe } from "@phosphor-icons/react";
+import { twMerge } from "tailwind-merge";
+import {
+  ContactType,
+  ContactTypeEnum,
+  ContactValueTypeEnum,
+} from "../../../models/general";
+import { Typography } from "../atomics";
+
+const FaxIcon = () => (
+  <svg
+    width="16"
+    height="18"
+    viewBox="0 0 16 18"
+    fill="none"
+    fontSize={24}
+    xmlns="http://www.w3.org/2000/svg"
+    className="w-6 h-6"
+  >
+    <path
+      d="M14.5044 3.1948C15.0134 3.28384 15.079 3.36234 15.0796 3.87374C15.0814 4.71963 15.0796 5.56553 15.0796 6.42723C15.1581 6.45301 15.2278 6.47996 15.2999 6.49812C15.6906 6.5977 15.9156 6.84198 15.9736 7.24325C15.99 7.35807 15.9987 7.47523 15.9987 7.5918C15.9999 10.6186 16.0023 13.6448 15.9952 16.6717C15.9952 16.9101 15.9777 17.1667 15.8898 17.3834C15.7182 17.8064 15.3602 17.9698 14.908 17.9686C13.0592 17.9639 11.2104 17.9686 9.36225 17.9686C8.05826 17.9686 6.75486 17.9727 5.45088 17.9598C4.68114 17.9522 4.21836 17.4871 4.21719 16.7185C4.21074 13.663 4.21602 10.6069 4.21192 7.55138C4.21133 7.07688 4.431 6.75001 4.84633 6.56314C5.0332 6.47878 5.07069 6.36631 5.06835 6.18471C5.06074 5.43548 5.06484 4.68624 5.06484 3.93642C5.06484 3.34652 5.10877 3.29322 5.69984 3.19539C5.69984 2.62014 5.69984 2.03902 5.69984 1.45791C5.69984 1.21481 5.68871 0.97053 5.70687 0.728595C5.73909 0.299792 6.02144 0.0361827 6.45376 0.0355969C8.43903 0.0314963 10.4237 0.0244667 12.409 0.0455554C12.648 0.0478986 12.918 0.17033 13.1166 0.315022C13.4839 0.583318 13.8114 0.906678 14.1506 1.21188C14.4042 1.44034 14.5114 1.73148 14.5056 2.07183C14.4991 2.44088 14.5038 2.81052 14.5038 3.19598L14.5044 3.1948ZM12.4049 0.489004C12.2696 0.481975 12.1747 0.472602 12.0792 0.472602C10.2597 0.472602 8.43962 0.472602 6.62013 0.473773C6.17551 0.473773 6.14446 0.505407 6.14388 0.959985C6.14388 2.86734 6.14388 4.7747 6.14388 6.68264C6.14388 6.78516 6.15383 6.88826 6.15969 7.00014H14.0445V2.02321C13.6714 2.02321 13.3135 2.03024 12.9567 2.02145C12.5783 2.01208 12.4113 1.83927 12.4055 1.46084C12.4008 1.14275 12.4043 0.82408 12.4043 0.489004H12.4049ZM10.1209 10.1881C11.1319 10.1881 12.1436 10.1904 13.1547 10.1869C13.5407 10.1857 13.7042 10.0229 13.7147 9.63975C13.7229 9.35798 13.7229 9.07563 13.7206 8.79386C13.7171 8.38966 13.5413 8.20747 13.1289 8.20689C11.1167 8.20396 9.10391 8.20513 7.0917 8.20923C6.71386 8.20982 6.53636 8.38497 6.52347 8.75988C6.51351 9.04165 6.51879 9.324 6.52347 9.60577C6.53109 10.0164 6.70097 10.1851 7.11571 10.1863C8.11743 10.1892 9.11856 10.1869 10.1203 10.1881H10.1209ZM7.82394 16.7818C8.21408 16.7853 8.53159 16.4719 8.52924 16.0841C8.52749 15.7045 8.2299 15.4005 7.85148 15.3905C7.45255 15.38 7.14735 15.6723 7.1409 16.0718C7.13446 16.4707 7.43087 16.7783 7.82394 16.7818ZM10.798 11.9613C10.7998 11.5776 10.5034 11.263 10.1291 11.2519C9.73833 11.2401 9.41673 11.55 9.41321 11.9431C9.40911 12.3356 9.6944 12.6349 10.0793 12.6431C10.4799 12.6519 10.7963 12.352 10.798 11.9613ZM10.7975 16.1251C10.8197 15.7332 10.5245 15.4063 10.1349 15.3911C9.74243 15.3759 9.43957 15.6453 9.41438 16.032C9.38861 16.4332 9.66218 16.7525 10.057 16.7812C10.4471 16.8093 10.774 16.5194 10.7969 16.1251H10.7975ZM7.1409 11.9361C7.13856 12.3479 7.41681 12.6373 7.82219 12.642C8.21643 12.6472 8.5269 12.3438 8.52983 11.9507C8.53276 11.5694 8.2012 11.2384 7.82453 11.2472C7.44435 11.256 7.14325 11.5594 7.1409 11.9361ZM11.6896 11.9179C11.672 12.3268 11.9491 12.632 12.3492 12.6443C12.7511 12.6566 13.0557 12.3731 13.0715 11.9724C13.0867 11.5881 12.7821 11.2659 12.3902 11.2519C12.0153 11.2378 11.7072 11.5313 11.6902 11.9179H11.6896ZM7.85558 13.335C7.45782 13.3268 7.15145 13.6033 7.13915 13.9811C7.12626 14.3871 7.41037 14.6987 7.80813 14.7145C8.19241 14.7297 8.52163 14.4175 8.53276 14.0285C8.5433 13.6536 8.24045 13.3432 7.85616 13.335H7.85558ZM13.0668 16.0876C13.0668 15.684 12.7646 15.3835 12.3645 15.3905C11.9749 15.3976 11.6908 15.6887 11.689 16.0829C11.6873 16.4866 11.9901 16.7894 12.3873 16.7818C12.7728 16.7742 13.0657 16.4748 13.0662 16.0876H13.0668ZM10.0986 14.7122C10.501 14.7087 10.8051 14.4035 10.7992 14.0092C10.7934 13.612 10.4852 13.3215 10.0793 13.3303C9.69088 13.3391 9.4097 13.6349 9.41438 14.0297C9.41907 14.4181 9.71724 14.7157 10.0986 14.7122ZM13.0668 14.0151C13.068 13.6255 12.7733 13.3279 12.3873 13.3297C11.9825 13.3314 11.675 13.6343 11.6814 14.0239C11.6885 14.424 11.9931 14.7186 12.3955 14.7145C12.7739 14.7104 13.0651 14.407 13.0662 14.0145L13.0668 14.0151Z"
+      fill="black"
+    />
+    <path
+      d="M3.3577 12.294C3.3577 13.8206 3.3577 15.3471 3.3577 16.8743C3.3577 17.5609 2.98865 17.9463 2.30795 17.9616C1.92894 17.9698 1.54934 17.9686 1.17033 17.9604C0.477334 17.9457 0.0127967 17.4988 0.0110393 16.8116C0.00108072 13.7579 -0.00184827 10.7047 0.00108072 7.65094C0.00166652 6.99016 0.373062 6.55257 1.0233 6.48637C1.4644 6.44185 1.91957 6.44537 2.35892 6.50219C3.02673 6.5883 3.35594 7.01183 3.35653 7.68492C3.3577 9.22146 3.35653 10.758 3.35653 12.2946L3.3577 12.294Z"
+      fill="black"
+    />
+    <path
+      d="M11.0039 5.64684C10.8803 5.65621 10.7942 5.65738 10.7098 5.67027C10.4737 5.706 10.356 5.60876 10.3167 5.37151C10.2962 5.24674 10.2453 5.05518 10.1638 5.02823C9.99747 4.97317 9.79888 4.99426 9.61787 5.01828C9.56867 5.02472 9.51946 5.14891 9.49837 5.22623C9.36246 5.72006 9.36481 5.72065 8.8042 5.63805C8.84228 5.47168 8.87567 5.3059 8.91843 5.14305C9.09944 4.46001 9.28924 3.77931 9.46264 3.09393C9.50013 2.94514 9.55519 2.8684 9.7116 2.88421C9.7403 2.88714 9.76959 2.88187 9.79888 2.88129C10.3079 2.86664 10.305 2.86723 10.4298 3.35695C10.5944 4.00426 10.7643 4.64981 10.9306 5.29711C10.9564 5.39846 10.974 5.50214 11.0039 5.64742V5.64684ZM10.1545 4.54729C10.0748 4.16887 9.99923 3.8127 9.92424 3.45712L9.85805 3.46181C9.78424 3.81563 9.71101 4.16945 9.63252 4.54788H10.1545V4.54729Z"
+      fill="black"
+    />
+    <path
+      d="M13.2754 5.62716C13.2274 5.65352 13.2186 5.66172 13.2098 5.66231C12.8294 5.68067 12.5656 5.51196 12.4184 5.15618C12.3598 5.015 12.3018 4.87383 12.2145 4.66353C12.1284 4.89374 12.0634 5.06538 11.9995 5.23761C11.8191 5.72323 11.8039 5.73085 11.2163 5.62716C11.3926 5.24464 11.5531 4.86445 11.7435 4.4995C11.8408 4.31322 11.8314 4.1615 11.7412 3.98224C11.5637 3.63018 11.402 3.2705 11.2386 2.92371C12.0815 2.63784 12.0071 3.39293 12.2707 3.82701C12.3416 3.62784 12.3973 3.46733 12.4547 3.30799C12.6281 2.82939 12.6533 2.81592 13.2338 2.92488C13.0715 3.25937 12.9227 3.59093 12.7517 3.9096C12.6322 4.13162 12.6046 4.31966 12.7452 4.55632C12.9456 4.89374 13.0973 5.26104 13.2748 5.62658L13.2754 5.62716Z"
+      fill="black"
+    />
+    <path
+      d="M7.10703 2.89343H8.58617V3.35856H7.73618V4.04687H8.53286V4.53191H7.71333C7.71333 4.80723 7.71333 5.04683 7.71333 5.287C7.71333 5.68417 7.71333 5.68534 7.31089 5.67011C7.24528 5.66777 7.18026 5.64961 7.10645 5.63731V2.89343H7.10703Z"
+      fill="black"
+    />
+  </svg>
+);
+
+const CellPhone = () => (
+  <svg
+    width="12"
+    height="18"
+    viewBox="0 0 12 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className="w-6 h-6"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.85714 0.357147H9.14286C10.4447 0.357147 11.5 1.41248 11.5 2.71429V15.2857C11.5 16.5875 10.4447 17.6429 9.14286 17.6429H2.85714C1.55533 17.6429 0.5 16.5875 0.5 15.2857V2.71429C0.5 1.41248 1.55533 0.357147 2.85714 0.357147ZM9.92858 3.49988C9.92858 3.06594 9.5768 2.71416 9.14287 2.71416H2.85715C2.42321 2.71416 2.07144 3.06594 2.07144 3.49988V14.4999C2.07144 14.9338 2.42321 15.2856 2.85715 15.2856H9.14287C9.5768 15.2856 9.92858 14.9338 9.92858 14.4999V3.49988Z"
+      fill="#2D2D2D"
+    />
+  </svg>
+);
+
+interface ContactCardProps {
+  primaryColor?: string;
+  value: ContactType;
+  className?: string;
+}
+
+export default function ContactCard({
+  value,
+  className,
+  primaryColor,
+}: ContactCardProps) {
+  console.log(value);
+
+  const renderIcon = (
+    type: ContactTypeEnum,
+    valueType: ContactValueTypeEnum
+  ) => {
+    let IconComponent: React.ElementType | null = null;
+    switch (type) {
+      case ContactTypeEnum.Phone:
+        switch (valueType) {
+          case ContactValueTypeEnum.Home:
+            IconComponent = Phone;
+            break;
+          case ContactValueTypeEnum.Work:
+            IconComponent = FaxIcon;
+            break;
+          default:
+            IconComponent = CellPhone;
+            break;
+        }
+        break;
+      case ContactTypeEnum.Email:
+        IconComponent = Envelope;
+        break;
+      case ContactTypeEnum.Address:
+        IconComponent = MapPinArea;
+        break;
+      case ContactTypeEnum.Website:
+        IconComponent = Globe;
+        break;
+      default:
+        break;
+    }
+
+    return (
+      <div
+        className="p-2 rounded-md"
+        style={{ backgroundColor: `${primaryColor}40` }}
+      >
+        {IconComponent && (
+          <IconComponent size={24} weight="fill" color="black" />
+        )}
+      </div>
+    );
+  };
+
+  const formatWebsiteLink = (link: string) => {
+    return link.startsWith("http") ? link : `https://${link}`;
+  };
+
+  const renderContactByType = (type: ContactTypeEnum) => {
+    switch (type) {
+      case ContactTypeEnum.Phone:
+        return <a href={`tel:${value.value}`}>{value.value}</a>;
+      case ContactTypeEnum.Email:
+        return <a href={`mailto:${value.value}`}>{value.value}</a>;
+      case ContactTypeEnum.Website:
+        return (
+          <a target="_blank" href={formatWebsiteLink(value.value || "")}>
+            {value.value}
+          </a>
+        );
+      default:
+        return <p>{value.value}</p>;
+    }
+  };
+
+  // const renderSubType = (type: ContactValueTypeEnum): string => {
+  //   switch (type) {
+  //     case ContactValueTypeEnum.Work:
+  //       return "Work";
+  //     case ContactValueTypeEnum.Home:
+  //       return "Home";
+  //     case ContactValueTypeEnum.Other:
+  //       return "Other";
+  //     default:
+  //       return "";
+  //   }
+  // };
+
+  return (
+    <div
+      className={twMerge("flex items-center gap-2", !!className && className)}
+    >
+      {renderIcon(value.contact_type, value.type)}
+      <div className="flex flex-col gap-1 justify-center h-full">
+        <Typography variant="p" className="leading-tight">
+          {renderContactByType(value.contact_type)}
+        </Typography>
+        {/* <Typography variant="span" className="text-xs text-[#BBB] font-medium">
+          {renderSubType(value.type)}
+        </Typography> */}
+      </div>
+    </div>
+  );
+}

package/src/components/LandingPage/common/ui-kit/moleculars/DidInfoModal.tsx

@@ -0,0 +1,73 @@
+import { FC, useState } from "react";
+import { BaseModal } from "../../../common/ui-kit/atomics";
+import { Field, ThemeConfig } from "../types/base";
+import { BlockChainDisplayInfo } from "../../../../../types/NFT";
+import NdachainIcon from "../../icons/icons-v2/NdachainIcon";
+
+// hardcode for co vat hue on dev only
+export interface NftInfo {
+  label: string;
+  value: string;
+  url: string;
+}
+
+export type BlockchainInfo = {
+  collection: string;
+  contractAddress: string;
+  tokenStandard: string;
+  chain: string;
+  owner: string;
+  tokenId: number;
+};
+
+export type DidInfoModalProps = {
+  field: Field;
+  configTheme: ThemeConfig;
+};
+
+const DidInfoModal: FC<BlockChainDisplayInfo & DidInfoModalProps> = (props) => {
+  const { explorerUrl, nftId } = props;
+  const [open, setOpen] = useState<boolean>(false);
+
+  const toggleModal = () => setOpen((pre) => !pre);
+  return (
+    <>
+      <BaseModal
+        className="bg-black/80 p-0"
+        toggleModal={toggleModal}
+        isOpen={open}
+      >
+        <div className="flex flex-col w-full justify-center items-center">
+          <NdachainIcon className="w-[150px] h-[150px]" />
+          <div className="w-full border-b-[1px] border-neutral-8 text-white p-4 text-center font-semibold">
+            Đã được định danh trên NDAChain <br /> Nền tảng Chuỗi khối Quốc gia
+          </div>
+        </div>
+
+        <div className="flex w-full flex-col gap-[10px] p-[12px]">
+          <div className="text- flex items-center justify-between">
+            <p className="text-xs font-medium text-neutral-6">
+              Mã định danh Phi tập trung DID
+            </p>
+            <a
+              href={explorerUrl}
+              target="_blank"
+              className="text-sm font-semibold text-white underline"
+            >
+              {nftId}
+            </a>
+          </div>
+        </div>
+      </BaseModal>
+      <div
+        className="flex gap-1 flex-shrink-0 items-center text-black text-[10px] tracking-tighter rounded-full p-1 px-2 bg-white"
+        onClick={toggleModal}
+      >
+        <NdachainIcon className="w-5 h-5" />
+        <p className="font-medium text-xs uppercase">Định danh</p>
+      </div>
+    </>
+  );
+};
+
+export default DidInfoModal;

package/src/components/LandingPage/common/ui-kit/moleculars/ImageWithBackground.tsx

@@ -0,0 +1,39 @@
+import useImageOrientation from "../../../hooks/useImageOrientation";
+import { twMerge } from "tailwind-merge";
+import { BaseFieldType } from "../types/base";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+type ImageWithBackgroundType = BaseFieldType & {
+  fullScreen?: boolean;
+};
+
+const ImageWithBackground = ({
+  field,
+  fullScreen = false,
+}: ImageWithBackgroundType) => {
+  const { value } = { ...field };
+  const { orientation } = useImageOrientation(value?.url);
+  return (
+    <>
+      {(orientation === "horizontal" || fullScreen) && (
+        <div
+          className="absolute inset-0 z-5 h-full w-full bg-cover bg-center blur"
+          style={{ backgroundImage: `url(${value?.url})` }}
+        />
+      )}
+      {value?.url && (
+        <Image
+          src={value?.url}
+          alt="Culture"
+          className={twMerge(
+            "h-full w-full object-contain z-8 absolute inset-0",
+            orientation === "horizontal" ? "object-contain" : "object-cover",
+            fullScreen && "object-scale-down"
+          )}
+        />
+      )}
+    </>
+  );
+};
+
+export default ImageWithBackground;

package/src/components/LandingPage/common/ui-kit/moleculars/LexicalParagraph.tsx

@@ -0,0 +1,15 @@
+import { parse } from "@phygitallabs/helpers";
+import { twMerge } from "tailwind-merge";
+
+interface Props {
+  content: string;
+  className?: string;
+}
+
+export default function LexicalParagraph(props: Props) {
+  const { content, className } = props;
+  const parsedData = JSON.parse(content || "{}");
+  const htmlContent = parsedData?.htmlContent || "";
+
+  return <p className={twMerge(className)}>{parse(htmlContent)}</p>;
+}

package/src/components/LandingPage/common/ui-kit/moleculars/ListButton.tsx

@@ -0,0 +1,51 @@
+import { cn } from "@phygitallabs/helpers";
+import { BaseFieldType } from "../types/base";
+
+interface ButtonItem {
+  label: string;
+  link?: string;
+}
+
+interface ListButtonProps extends BaseFieldType {
+  classNameWrapper?: string;
+  classNameItem?: string;
+}
+
+const ListButton = ({
+  field,
+  configTheme,
+  classNameWrapper,
+  classNameItem,
+}: ListButtonProps) => {
+  const { value = [] } = { ...field };
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-2 gap-3",
+        !!classNameWrapper && classNameWrapper
+      )}
+    >
+      {value?.map((item: ButtonItem, index: number) => {
+        return (
+          <a
+            className={cn(
+              "flex h-full w-full items-center justify-center rounded-md px-3 py-3",
+              !!classNameItem && classNameItem
+            )}
+            href={item.link}
+            target="_blank"
+            key={index}
+            style={{
+              backgroundColor: configTheme?.primary_color,
+              color: configTheme?.background_color,
+            }}
+          >
+            <p className="text-center">{item.label}</p>
+          </a>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ListButton;

package/src/components/LandingPage/common/ui-kit/moleculars/ListContactSocial.tsx

@@ -0,0 +1,103 @@
+import { ProfileSocialType } from "../../../../LandingPage/models/general";
+import {
+  FacebookLogo,
+  InstagramLogo,
+  LinkedinLogo,
+  TelegramLogo,
+  ThreadsLogo,
+  TiktokLogo,
+  TwitterLogo,
+  YoutubeLogo,
+  Phone,
+} from "@phosphor-icons/react";
+import { twMerge } from "tailwind-merge";
+
+interface ListContactProps {
+  contactList: Partial<Record<ProfileSocialType, string>>;
+  className?: string;
+  sizeIcon?: number;
+}
+
+export const DEFAULT_ORDER_CONTACT = [
+  ProfileSocialType.Phone,
+  ProfileSocialType.Facebook,
+  ProfileSocialType.Instagram,
+  ProfileSocialType.Twitter,
+  ProfileSocialType.Tiktok,
+  ProfileSocialType.Telegram,
+  ProfileSocialType.Threads,
+  ProfileSocialType.Youtube,
+  ProfileSocialType.Linkedin,
+];
+
+const RenderIcon = (type: ProfileSocialType, sizeIcon = 24) => {
+  let IconComponent: React.ElementType | null = null;
+  switch (type) {
+    case ProfileSocialType.Phone:
+      IconComponent = Phone;
+      break;
+    case ProfileSocialType.Facebook:
+      IconComponent = FacebookLogo;
+      break;
+    case ProfileSocialType.Instagram:
+      IconComponent = InstagramLogo;
+      break;
+    case ProfileSocialType.Twitter:
+      IconComponent = TwitterLogo;
+      break;
+    case ProfileSocialType.Tiktok:
+      IconComponent = TiktokLogo;
+      break;
+    case ProfileSocialType.Telegram:
+      IconComponent = TelegramLogo;
+      break;
+    case ProfileSocialType.Threads:
+      IconComponent = ThreadsLogo;
+      break;
+    case ProfileSocialType.Youtube:
+      IconComponent = YoutubeLogo;
+      break;
+    case ProfileSocialType.Linkedin:
+      IconComponent = LinkedinLogo;
+      break;
+    default:
+      break;
+  }
+  return IconComponent && <IconComponent size={sizeIcon} weight="fill" />;
+};
+
+const getHref = (type: ProfileSocialType, value: string) => {
+  if (type === ProfileSocialType.Phone) {
+    return `tel:${value}`;
+  } else {
+    let inputUrl = value;
+    if (!inputUrl.trim().match(/^(http:\/\/|https:\/\/)/)) {
+      // Prefix with https:// if no protocol is found
+      inputUrl = `https://${inputUrl}`;
+    }
+    return inputUrl;
+  }
+};
+
+export default function ListContactSocial({
+  contactList,
+  className,
+  sizeIcon = 24,
+}: ListContactProps) {
+  return (
+    <div className={twMerge("flex gap-3", !!className && className)}>
+      {DEFAULT_ORDER_CONTACT.map(
+        (item, index) =>
+          Boolean((contactList as any)?.[item]) && (
+            <a
+              href={getHref(item, contactList[item] ?? "")}
+              key={index}
+              target="_blank"
+            >
+              <div>{RenderIcon(item, sizeIcon)}</div>
+            </a>
+          )
+      )}
+    </div>
+  );
+}

package/src/components/LandingPage/common/ui-kit/moleculars/MetaInfo.tsx

@@ -0,0 +1,76 @@
+// import { useProductStory } from "@/hooks/useProductStory";
+import { FunctionComponent } from "react";
+import { Typography } from "../atomics";
+import Title from "./Title";
+import { ThemeConfig } from "../types/base";
+
+export type MetaInfoType = {
+  label: string;
+  value: string;
+  description?: string;
+  Icon: any;
+};
+
+type MetaInfoProps = {
+  productDetail: MetaInfoType[];
+  configTheme?: ThemeConfig;
+};
+
+const returnValue = (value: string | string[]) => {
+  if (Array.isArray(value)) {
+    return (
+      <ul className="ml-5 flex flex-col">
+        {value.map((el, index) => (
+          <li className="list-disc" key={index}>
+            {el}
+          </li>
+        ))}
+      </ul>
+    );
+  } else return value;
+};
+
+const MetaInfo: FunctionComponent<MetaInfoProps> = ({
+  productDetail,
+  configTheme,
+}: MetaInfoProps) => {
+  return (
+    <div className="flex flex-col gap-5 pt-3">
+      <div className="relative flex items-center justify-center gap-[16px]">
+        <Title
+          field={{
+            value: "THÔNG TIN SẢN PHẨM",
+          }}
+          lineText
+          configTheme={configTheme}
+        />
+      </div>
+      {productDetail.map((item, index) => {
+        if (!item.value || item.value === " x  x ") {
+          return null;
+        }
+        return (
+          <div key={index} className="flex ">
+            <div className="flex items-center gap-[12px] px-[24px]">
+              <div>{item.Icon}</div>
+              <div className="flex flex-col gap-[2px]">
+                <Typography variant="p" color={configTheme?.secondary_color}>
+                  {item.label}
+                </Typography>
+                <div className="flex">
+                  <Typography
+                    variant="span"
+                    color={configTheme?.secondary_color}>
+                    {returnValue(item.value)}
+                  </Typography>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default MetaInfo;