ui-landing-page 6.1.0

package/src/components/LandingPage/common/ui-kit/atomics/CopyClipboard.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+
+interface CopyClipboardProps {
+  text: string;
+  truncateLength?: number;
+  className?: string;
+  showIcon?: boolean;
+  successMessage?: string;
+  showLink?: boolean;
+  link?: string;
+}
+
+const CopyClipboard = ({
+  text,
+  truncateLength = 20,
+  className = "",
+  showIcon = true,
+  successMessage = "Copied!",
+  showLink = false,
+  link,
+}: CopyClipboardProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const truncatedText =
+    text.length > truncateLength ? `${text.slice(0, truncateLength)}...` : text;
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy text:", err);
+    }
+  };
+
+  return (
+    <div
+      className={`inline-flex items-center gap-2 cursor-pointer ${className}`}
+    >
+      {showLink ? (
+        <a href={link} target="_blank">
+          {truncatedText}
+        </a>
+      ) : (
+        <span className="select-none" title={text}>
+          {truncatedText}
+        </span>
+      )}
+      {showIcon && (
+        <div className="relative" onClick={handleCopy}>
+          {isCopied ? (
+            <Check className="w-4 h-4 text-green-500" />
+          ) : (
+            <Copy className="w-4 h-4 text-gray-500 hover:text-gray-700" />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CopyClipboard;

package/src/components/LandingPage/common/ui-kit/atomics/HesmanButton.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@phygitallabs/helpers";
+import BaseButton, { BaseButtonProps } from "./BaseButton";
+
+interface HesmanButtonProps extends BaseButtonProps {
+  children: React.ReactNode;
+}
+
+export default function HesmanButton({
+  className,
+  children,
+  ...rest
+}: HesmanButtonProps) {
+  return (
+    <BaseButton
+      {...rest}
+      className={cn(
+        "bg-gradient-to-b from-[#F8EC95] to-[#F8A54D] rounded-[4px] w-full",
+        !!className && className
+      )}>
+      {children}
+    </BaseButton>
+  );
+}

package/src/components/LandingPage/common/ui-kit/atomics/HesmanGradientText.tsx

@@ -0,0 +1,22 @@
+import { twMerge } from "tailwind-merge";
+
+interface Props {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const HesmanGradientText = (props: Props) => {
+  const { children, className = "" } = props;
+  return (
+    <span
+      style={{ color: "transparent" }}
+      className={twMerge(
+        "bg-gradient-to-b from-[#F8EC95] to-[#F8A54D] uppercase bg-clip-text",
+        className
+      )}>
+      {children}
+    </span>
+  );
+};
+
+export default HesmanGradientText;

package/src/components/LandingPage/common/ui-kit/atomics/Tag.tsx

@@ -0,0 +1,47 @@
+import { convertHexToRGBA } from "../../../utils/helper";
+import { Typography } from ".";
+import { ThemeConfig } from "../types/base";
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+
+interface Props
+  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  configTheme?: ThemeConfig;
+  children?: React.ReactNode;
+  variant?: "default" | "tag-outline";
+}
+
+const Tag = (props: Props) => {
+  const { configTheme, children, variant = "default", ...rest } = props;
+
+  return (
+    <div
+      className={
+        "flex h-full w-fit rounded-[100px] px-3 py-1 text-center items-center"
+      }
+      style={{
+        backgroundColor:
+          variant === "tag-outline"
+            ? convertHexToRGBA(configTheme?.primary_color || "#fff", 0.01)
+            : configTheme?.primary_color,
+        color:
+          variant === "tag-outline"
+            ? configTheme?.primary_color
+            : configTheme?.background_color,
+        border:
+          variant === "tag-outline"
+            ? `1px solid ${configTheme?.primary_color}`
+            : "none",
+      }}
+      {...rest}
+    >
+      <Typography
+        variant="span"
+        className="text-xs font-semibold uppercase whitespace-nowrap"
+      >
+        {children}
+      </Typography>
+    </div>
+  );
+};
+
+export default Tag;

package/src/components/LandingPage/common/ui-kit/atomics/Typography.tsx

@@ -0,0 +1,63 @@
+import { CSSProperties } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+  variant: keyof typeof THEME;
+  className?: string;
+  children: any;
+};
+
+const THEME = {
+  h1: {
+    component: "h1",
+    cn: "text-5xl",
+  },
+  h2: {
+    component: "h2",
+    cn: "text-4xl ",
+  },
+  h3: {
+    component: "h3",
+    cn: "text-3xl",
+  },
+  h4: {
+    component: "h4",
+    cn: "text-2xl",
+  },
+  h5: {
+    component: "h5",
+    cn: "text-xl",
+  },
+  h6: {
+    component: "h6",
+    cn: "text-lg",
+  },
+  p: {
+    component: "p",
+    cn: "text-base",
+  },
+  span: {
+    component: "span",
+    cn: "text-sm",
+  },
+};
+
+const Typography = ({
+  variant,
+  className = "",
+  children,
+  ...props
+}: Props & CSSProperties) => {
+  const type = THEME[variant];
+  const Component = type.component as any;
+  const cn = type.cn;
+  return (
+    <Component
+      className={twMerge(cn, !!className && className)}
+      style={{ ...props }}>
+      {children}
+    </Component>
+  );
+};
+
+export default Typography;

package/src/components/LandingPage/common/ui-kit/atomics/index.tsx

@@ -0,0 +1,4 @@
+import Typography from "./Typography";
+import BaseModal from "./ BaseModal";
+
+export { Typography, BaseModal };

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

@@ -0,0 +1,130 @@
+import { Pause, Play } from "@phosphor-icons/react";
+import React, { useEffect, useState } from "react";
+import { Slider } from "antd";
+import { twMerge } from "tailwind-merge";
+import { useMedia } from "../../../hooks/audio";
+
+interface AudioPlayerProps {
+  src: string;
+  className?: string;
+  audioRef: React.RefObject<HTMLAudioElement>;
+  id: string;
+}
+
+const AudioPlayer: React.FC<AudioPlayerProps> = ({
+  src,
+  className,
+  audioRef,
+  id,
+}) => {
+  const { registerMedia, unregisterMedia, play, pause, getMediaStatus } =
+    useMedia();
+  const [currentTime, setCurrentTime] = useState<number>(0);
+  const [duration, setDuration] = useState<number>(0);
+
+  const isPlaying = getMediaStatus(id) === "playing";
+
+  useEffect(() => {
+    const audio = audioRef?.current;
+    if (!audio) return;
+
+    registerMedia({
+      id,
+      type: "audio",
+      element: audio,
+    });
+
+    const handleLoadedMetadata = () => {
+      setDuration(audio.duration);
+    };
+
+    const handleTimeUpdate = () => {
+      setCurrentTime(audio.currentTime);
+    };
+
+    audio.addEventListener("loadedmetadata", handleLoadedMetadata);
+    audio.addEventListener("timeupdate", handleTimeUpdate);
+
+    return () => {
+      audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      audio.removeEventListener("timeupdate", handleTimeUpdate);
+      unregisterMedia(id);
+    };
+  }, []);
+
+  const togglePlayPause = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    if (isPlaying) {
+      pause(id);
+    } else {
+      play(id);
+    }
+  };
+
+  const handleProgressChange = (value: number) => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const newTime = value;
+    audio.currentTime = newTime;
+    setCurrentTime(newTime);
+  };
+
+  const formatTime = (time: number): string => {
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    const paddedSeconds = seconds < 10 ? `0${seconds}` : seconds.toString();
+    return `${minutes}:${paddedSeconds}`;
+  };
+
+  if (!src) return null;
+
+  return (
+    <div
+      className={twMerge(
+        "audio-player flex items-center gap-2 rounded-lg p-2 mt-2",
+        !!className && className
+      )}
+    >
+      <audio ref={audioRef} src={src} preload="metadata" />
+
+      <button
+        onClick={togglePlayPause}
+        className="p-2 bg-black rounded-full"
+        type="button"
+      >
+        {isPlaying ? (
+          <Pause color="white" size={16} weight="fill" />
+        ) : (
+          <Play color="white" size={16} weight="fill" />
+        )}
+      </button>
+
+      <Slider
+        min={0}
+        max={duration}
+        value={currentTime}
+        onChange={handleProgressChange}
+        className="flex-1"
+        classNames={{
+          rail: "!bg-[#262626]/20",
+          track: "!bg-[#262626]",
+          handle: "",
+        }}
+        tooltip={{
+          formatter: (value) => {
+            return `${formatTime(value!)}`;
+          },
+        }}
+      />
+
+      <div className="text-sm text-neutral-9">
+        {formatTime(currentTime)} / {formatTime(duration)}
+      </div>
+    </div>
+  );
+};
+
+export default AudioPlayer;

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

@@ -0,0 +1,26 @@
+import { Typography } from "../atomics";
+import { BaseFieldType } from "../types/base";
+
+const AuthorContext = ({ field }: BaseFieldType) => {
+  const { value } = field;
+  const { position, company_name } = value || {};
+
+  const isValid = !!company_name;
+
+  return (
+    isValid && (
+      <div className="flex gap-1.5 text-neutral-6">
+        {position && (
+          <Typography variant="span" className="font-thin">
+            {position}
+          </Typography>
+        )}
+        <Typography variant="span" className="font-semibold">
+          {company_name}
+        </Typography>
+      </div>
+    )
+  );
+};
+
+export default AuthorContext;

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

@@ -0,0 +1,147 @@
+import { useState } from "react";
+import { BaseModal, Typography } from "../atomics";
+import TickIconBlue from "../../icons/TickIconBlue";
+import { parse } from "@phygitallabs/helpers";
+import { BaseFieldType } from "../types/base";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+const Divider = () => {
+  return <div className="w-full border-t border-t-neutral-6" />;
+};
+
+interface AuthorModalProps extends BaseFieldType {
+  walletAddress: string;
+  explorerUrl: string;
+}
+
+const AuthorModal = ({
+  field,
+  hardCodeOption,
+  configTheme,
+  // walletAddress,
+  // explorerUrl,
+}: AuthorModalProps) => {
+  const isHPT = hardCodeOption?.isHPT;
+  const { value, style_config } = field;
+  const isValueString = typeof value === "string";
+
+  const colorText = style_config?.text_color || configTheme?.secondary_color;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleModal = () => setIsOpen((prev) => !prev);
+
+  const renderValue = () => {
+    if (isValueString && !!value) {
+      return (
+        <div
+          className="flex gap-1.5"
+          style={{
+            color: style_config?.text_color || configTheme?.secondary_color,
+          }}
+        >
+          <Typography
+            variant="span"
+            className="font-thin whitespace-nowrap"
+            color={colorText}
+          >
+            Sở hữu:
+          </Typography>
+          <Typography
+            variant="span"
+            className="font-semibold underline !text-black whitespace-nowrap"
+            color={colorText}
+          >
+            {value}
+          </Typography>
+          {!!value && <TickIconBlue />}
+        </div>
+      );
+    }
+    const { label, name, avatar, description } = value || {};
+    const isValidValue = !!name || !!label;
+
+    return (
+      <>
+        {isValidValue && (
+          <div className="flex gap-1.5 items-center" onClick={toggleModal}>
+            {!isHPT && avatar?.url && (
+              <Image
+                src={avatar?.url}
+                alt={name}
+                className="rounded-full object-contain w-7 h-7"
+                width={28}
+                height={28}
+              />
+            )}
+            <Typography
+              variant="span"
+              className="font-thin whitespace-nowrap"
+              color={colorText}
+            >
+              {label}
+            </Typography>
+            <Typography
+              variant="span"
+              className="font-semibold underline whitespace-nowrap truncate max-w-[300px]"
+              color={colorText}
+            >
+              {parse(name)}
+            </Typography>
+            <TickIconBlue />
+          </div>
+        )}
+        <BaseModal
+          isOpen={isOpen}
+          toggleModal={toggleModal}
+          className="backdrop-blur-2xl"
+          hasExitIcon
+        >
+          <div className="w-full space-y-5">
+            <div className="flex w-full flex-col items-center justify-center gap-4">
+              {avatar?.url && (
+                <div className="max-w-[150px] m-auto">
+                  <Image
+                    className="max-w-[150px]"
+                    src={avatar?.url}
+                    alt={name}
+                  />
+                </div>
+              )}
+              <div className="flex w-full items-center justify-center gap-2">
+                <Typography
+                  variant="span"
+                  className="font-semibold underline"
+                  color={colorText}
+                >
+                  {parse(name)}
+                </Typography>
+                <TickIconBlue />
+              </div>
+            </div>
+            <Divider />
+            {/* {walletAddress && (
+              <div className="flex items-center gap-2 justify-center w-full">
+                <a
+                  className="text-xs font-normal text-center text-white underline underline-offset-2"
+                  href={explorerUrl}
+                  target="_blank"
+                >
+                  Đã được định danh trên NDAChain - Nền tảng chuỗi khối Quốc gia
+                </a>
+              </div>
+            )} */}
+            {description && (
+              <div className="list-inside list-disc text-sm text-neutral-5">
+                {parse(description || "")}
+              </div>
+            )}
+          </div>
+        </BaseModal>
+      </>
+    );
+  };
+
+  return renderValue();
+};
+
+export default AuthorModal;

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

@@ -0,0 +1,91 @@
+import { useState } from "react";
+import { BaseModal, Typography } from "../atomics";
+import { getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { BaseFieldType } from "../types/base";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import TickIconGreen from "../../icons/TickIconGreen";
+
+// const Divider = () => {
+//   return <div className="w-full border-t border-t-neutral-6" />;
+// };
+
+const AuthorModalDeDo = ({ field }: BaseFieldType) => {
+  const { value } = field || {};
+  const isValueString = typeof value === "string";
+
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleModal = () => setIsOpen((prev) => !prev);
+
+  const renderValue = () => {
+    if (isValueString && !!value) {
+      return (
+        <div className="flex gap-1.5">
+          <Typography variant="span" className="font-thin">
+            Sở hữu:
+          </Typography>
+          <Typography variant="span" className="font-semibold underline">
+            {value}
+          </Typography>
+          {!!value && <TickIconGreen />}
+        </div>
+      );
+    }
+    const { name, logo, description } = value || {};
+    const isValidValue = !!name || !!logo?.url;
+
+    return (
+      <>
+        {isValidValue && (
+          <div
+            className="flex gap-1.5 w-full items-center"
+            onClick={toggleModal}
+          >
+            {logo?.url && (
+              <div className="max-w-[100px] flex-shrink-0 flex items-center justify-center">
+                <Image src={logo?.url} alt={name} />
+              </div>
+            )}
+            <div className="flex w-full items-center justify-center gap-2">
+              <Typography
+                variant="span"
+                className="text-white font-normal whitespace-nowrap underline"
+              >
+                {name}
+              </Typography>
+              <TickIconGreen />
+            </div>
+          </div>
+        )}
+        <BaseModal
+          isOpen={isOpen}
+          toggleModal={toggleModal}
+          className="z-[1000] bg-black border-none"
+          hasExitIcon
+          closeIconClassName="text-white bg-none border-none"
+        >
+          <div className="w-full">
+            <div className="flex w-full flex-col items-center justify-center gap-1">
+              {logo?.url && (
+                <div className="max-w-[200px] m-auto">
+                  <Image src={logo?.url} alt={name} />
+                </div>
+              )}
+              <div className="flex w-full items-center justify-center gap-2">
+                <Typography variant="span" className="font-normal text-white">
+                  {name}
+                </Typography>
+              </div>
+              <div className="list-inside list-disc text-sm leading-7 text-neutral-5">
+                {getContentFromLexicalValue(description || "")}
+              </div>
+            </div>
+          </div>
+        </BaseModal>
+      </>
+    );
+  };
+
+  return renderValue();
+};
+
+export default AuthorModalDeDo;

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

@@ -0,0 +1,23 @@
+import TickIconBlue from "../../icons/TickIconBlue";
+import { Typography } from "../atomics";
+import { BaseFieldType } from "../types/base";
+
+type AuthorLabelType = BaseFieldType;
+
+const AuthorLabel = ({ field }: AuthorLabelType) => {
+  const { value } = { ...field };
+  const { label, name } = value;
+  return (
+    <div className="flex gap-1.5">
+      <Typography variant="span" className="font-thin">
+        {label}
+      </Typography>
+      <Typography variant="span" className="font-semibold underline">
+        {name}
+      </Typography>
+      <TickIconBlue />
+    </div>
+  );
+};
+
+export default AuthorLabel;

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

@@ -0,0 +1,34 @@
+import { twMerge } from 'tailwind-merge';
+import { BackgroundImageField, BaseFieldType } from '../types/base';
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+type BackgroundImageType = BaseFieldType;
+
+const BackgroundImage = ({ field }: BackgroundImageType) => {
+    const { value } = { ...field };
+    const { image, is_overlay = false } = { ...value } as BackgroundImageField;
+    return (
+        <>
+            {image?.url && (
+                <div className="absolute z-100 h-full w-full pointer-events-none">
+                    <Image
+                        className="object-cover"
+                        src={image?.url}
+                        alt="home background"
+                    />
+                </div>
+            )}
+            {is_overlay && (
+                <div
+                    className={twMerge(
+                        'absolute inset-0 h-full w-full pointer-events-none'
+                    )}
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                    }}
+                />
+            )}
+        </>
+    );
+};
+
+export default BackgroundImage;