property-practice-ui 0.0.1

package/src/components/TableRow/TableRow.tsx

@@ -0,0 +1,343 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useMemo, useState } from 'react';
+import { tv } from 'tailwind-variants';
+import AppDialog from '../../../../../apps/admin-frontend/components/dialog';
+import {
+  ClockIcon,
+  HomeIcon,
+  TrashIcon,
+} from '../../../../property-practice-icons/src';
+import { TableHeaderConfig } from '../Table/Table';
+
+type PaginationOptionsType = {
+  perPage?: 10 | 25 | 50 | 100;
+};
+
+interface TableRowItem {
+  id: string;
+  [key: string]: any;
+}
+
+export interface TableRowProps {
+  data: TableRowItem[];
+  headers: TableHeaderConfig[];
+  paginationOptions?: PaginationOptionsType;
+  onDelete?: (id: string) => void;
+  variant?: 'Primary' | 'Secondary';
+}
+
+const itemContainer = tv({
+  base: 'rounded-2xl mb-2 px-8 py-3 flex flex-wrap items-center justify-between gap-4',
+  variants: {
+    variant: {
+      Primary: 'border border-gray-200',
+      Secondary: 'border-none',
+    },
+  },
+  defaultVariants: {
+    variant: 'Primary',
+  },
+});
+
+const formatDate = (value: string | Date) => {
+  const date = new Date(value);
+  return date.toLocaleString('default', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour12: false,
+    hour: 'numeric',
+    minute: 'numeric',
+  });
+};
+
+const getStatusBadge = (status: string, transactionType?: string) => {
+  const base = 'px-3 rounded-xl py-1 text-gray-400 text-xs font-bold uppercase';
+  switch (status) {
+    case 'DRAFT':
+      return <span className={`${base} bg-purple-400`}>Draft</span>;
+    case 'PENDING':
+      return (
+        <span className={`${base} bg-yellow-200`}>
+          {transactionType?.toUpperCase() === 'LEASE'
+            ? 'Awaiting Lessor Information'
+            : 'Awaiting Seller Information'}
+        </span>
+      );
+    case 'ACTIVE':
+      return <span className={`${base} bg-blue-400`}>Active</span>;
+    case 'FINALISED':
+      return <span className={`${base} bg-green-400`}>Finalised</span>;
+    case 'ARCHIVED':
+      return <span className={`${base} bg-red-400`}>Archived</span>;
+    default:
+      return <span className={`${base} bg-gray-200`}>{status}</span>;
+  }
+};
+
+const RowCell = ({
+  header,
+  item,
+}: {
+  header: TableHeaderConfig;
+  item: TableRowItem;
+}) => (
+  <div className="flex-1 min-w-[120px]">
+    <p className="font-semibold text-gray-300 text-sm tracking-wide flex items-center gap-1">
+      {header.filterAccessor === 'status' && <ClockIcon />}
+      {header.heading}
+    </p>
+    <p className="text-base font-medium text-gray-400 flex items-center gap-1">
+      {header.filterAccessor === 'formattedAddress' && <HomeIcon />}
+      {header.filterAccessor === 'formattedAddress' ? (
+        <span className="truncate max-w-[200px] block">
+          {item[header.filterAccessor]}
+        </span>
+      ) : header.filterAccessor === 'status' ? (
+        getStatusBadge(item[header.filterAccessor], item.transactionType)
+      ) : header.filterAccessor === 'createdAt' ? (
+        formatDate(item[header.filterAccessor])
+      ) : header.filterAccessor === '-' ? (
+        '-'
+      ) : (
+        item[header.filterAccessor]
+      )}
+    </p>
+  </div>
+);
+
+const DeleteDialog = ({
+  open,
+  onClose,
+  onConfirm,
+  isDeleting,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  isDeleting: boolean;
+}) => (
+  <AppDialog
+    open={open}
+    onClose={onClose}
+    title="Delete Transaction"
+    buttonText={isDeleting ? 'Deleting...' : 'Confirm'}
+    buttonHandler={onConfirm}
+    secondaryText="Cancel"
+    secondaryHandler={onClose}
+  >
+    <div className="flex flex-col items-center text-center">
+      <TrashIcon />
+      <p className="text-sm text-gray-600 mb-4">
+        Are you sure you want to delete this transaction? This will remove the
+        property from the list (soft delete).
+      </p>
+    </div>
+  </AppDialog>
+);
+
+export const TableRow = ({
+  data,
+  headers,
+  paginationOptions = {},
+  onDelete,
+  variant = 'Primary',
+}: TableRowProps) => {
+  const [perPage, setPerPage] = useState<number>(
+    paginationOptions.perPage ?? 10,
+  );
+  const [page, setPage] = useState(0);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [selectedTransactionId, setSelectedTransactionId] = useState<
+    string | null
+  >(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const totalPages = useMemo(
+    () => Math.ceil(data.length / perPage),
+    [data, perPage],
+  );
+  const paginatedData = useMemo(
+    () => data.slice(page * perPage, (page + 1) * perPage),
+    [data, page, perPage],
+  );
+
+  useEffect(() => {
+    if (paginationOptions.perPage) {
+      setPerPage(paginationOptions.perPage);
+    }
+    setPage(0);
+  }, [paginationOptions.perPage, data]);
+
+  const confirmDelete = async () => {
+    if (!selectedTransactionId || !onDelete) return;
+    setIsDeleting(true);
+    try {
+      onDelete(selectedTransactionId);
+      setIsDialogOpen(false);
+      setSelectedTransactionId(null);
+    } catch {
+      alert('Failed to delete transaction. Please try again.');
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handlePrevPage = () => {
+    if (page > 0) setPage(page - 1);
+  };
+
+  const handleNextPage = () => {
+    if (page < totalPages - 1) setPage(page + 1);
+  };
+
+  const handleRowsPerPageChange = (value: number) => {
+    setPerPage(value);
+    setPage(0);
+  };
+
+  return (
+    <div className="flex flex-col">
+      {paginatedData.map((item, idx) => (
+        <div
+          key={item.id}
+          className={`${itemContainer({ variant })} ${idx % 2 === 0 ? 'bg-gray-50 dark:bg-gray-600' : ''}`}
+        >
+          {headers.map((header) => (
+            <RowCell key={header.filterAccessor} header={header} item={item} />
+          ))}
+
+          <div className="flex flex-col items-start gap-1">
+            <p className="font-semibold text-[#033c89] text-sm tracking-wide">
+              <Link
+                href={`${item.url}`}
+                className="text-[#033c89] hover:underline"
+              >
+                View Details
+              </Link>
+            </p>
+            {onDelete && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setSelectedTransactionId(item.id);
+                  setIsDialogOpen(true);
+                }}
+                className="flex items-center gap-1 text-red-500 hover:text-red-700"
+              >
+                <TrashIcon />
+                <span className="text-sm font-medium">Delete</span>
+              </button>
+            )}
+          </div>
+        </div>
+      ))}
+
+      <div className="flex flex-wrap items-center px-6 pt-8 border-t border-gray-400">
+        <div className="w-full sm:w-auto mb-4 sm:mb-0 mr-auto">
+          <div className="flex items-center gap-2">
+            <button
+              disabled
+              className="flex items-center justify-center h-6 w-11 bg-gray-100 dark:bg-gray-600 rounded-full"
+            >
+              <div className="h-5 w-5 rounded-full dark:bg-gray-400 bg-gray-50" />
+              <div className="h-5 w-5 rounded-full bg-transparent" />
+            </button>
+            <span className="text-sm text-gray-200 dark:text-gray-400 font-medium">
+              Dense
+            </span>
+          </div>
+        </div>
+        <div className="w-full sm:w-auto mb-6 sm:mb-0 sm:mr-6">
+          <div className="flex items-center justify-end ml-auto">
+            <div className="sm:mr-8 flex items-center gap-2">
+              <span className="text-sm text-gray-400 font-medium">
+                Rows per page
+              </span>
+              <select
+                value={perPage}
+                onChange={(e) =>
+                  handleRowsPerPageChange(Number(e.target.value))
+                }
+                className="text-sm text-gray-200 font-medium bg-transparent outline-none"
+              >
+                {[5, 10, 20].map((size) => (
+                  <option key={size} value={size}>
+                    {size}
+                  </option>
+                ))}
+              </select>
+              <span className="hidden sm:inline text-sm text-gray-400 font-medium">
+                {page * perPage + 1}-
+                {Math.min((page + 1) * perPage, data.length)} of {data.length}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div className="w-full sm:w-auto mb-6 sm:mb-0">
+          <div className="flex items-center justify-end">
+            <a
+              onClick={(e) => {
+                e.preventDefault();
+                handlePrevPage();
+              }}
+              className={`inline-flex items-center justify-center h-8 w-12 p-1 mr-3 text-xs font-semibold rounded-lg transition duration-200 ${
+                page === 0
+                  ? 'bg-gray-600 text-gray-400 cursor-not-allowed'
+                  : 'text-gray-400 bg-gray-600 hover:bg-gray-700'
+              }`}
+              href="#"
+            >
+              <svg
+                width={6}
+                height={8}
+                viewBox="0 0 6 8"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2.52655 3.99988L4.88655 1.63988C5.01072 1.51498 5.08041 1.34601 5.08041 1.16988C5.08041 0.993761 5.01072 0.824793 4.88655 0.699884C4.82457 0.637399 4.75084 0.587802 4.6696 0.553957C4.58836 0.520111 4.50122 0.502686 4.41321 0.502686C4.32521 0.502686 4.23807 0.520111 4.15683 0.553957C4.07559 0.587802 4.00186 0.637399 3.93988 0.699884L1.11321 3.52655C1.05073 3.58853 1.00113 3.66226 0.967287 3.7435C0.933441 3.82474 0.916016 3.91188 0.916016 3.99988C0.916016 4.08789 0.933441 4.17503 0.967287 4.25627C1.00113 4.33751 1.05073 4.41124 1.11321 4.47322L3.93988 7.33322C4.00217 7.39501 4.07605 7.44389 4.15728 7.47707C4.2385 7.51024 4.32548 7.52706 4.41321 7.52655C4.50095 7.52706 4.58793 7.51024 4.66915 7.47707C4.75038 7.44389 4.82425 7.39501 4.88655 7.33322C5.01072 7.20831 5.08041 7.03934 5.08041 6.86322C5.08041 6.68709 5.01072 6.51813 4.88655 6.39322L2.52655 3.99988Z"
+                  fill="#919EB0"
+                />
+              </svg>
+            </a>
+
+            <a
+              onClick={(e) => {
+                e.preventDefault();
+                handleNextPage();
+              }}
+              className={`inline-flex items-center justify-center h-8 w-12 p-1 text-xs font-semibold rounded-lg transition duration-200 ${
+                page >= totalPages - 1 || totalPages === 0
+                  ? 'bg-blue-500 text-blue-100 cursor-not-allowed'
+                  : 'bg-[#033c89] text-blue-50 hover:bg-blue-600'
+              }`}
+              href="#"
+            >
+              <svg
+                width={6}
+                height={10}
+                viewBox="0 0 6 10"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M5.36015 4.52661L1.58682 0.759943C1.52484 0.697457 1.45111 0.647861 1.36987 0.614016C1.28863 0.58017 1.20149 0.562744 1.11348 0.562744C1.02548 0.562744 0.938339 0.58017 0.8571 0.614016C0.77586 0.647861 0.702126 0.697457 0.640151 0.759943C0.515983 0.884851 0.446289 1.05382 0.446289 1.22994C0.446289 1.40607 0.515983 1.57503 0.640151 1.69994L3.94015 5.03328L0.640151 8.33328C0.515983 8.45818 0.446289 8.62715 0.446289 8.80328C0.446289 8.9794 0.515983 9.14837 0.640151 9.27328C0.701894 9.33627 0.775524 9.38638 0.856774 9.42071C0.938024 9.45504 1.02528 9.47291 1.11348 9.47328C1.20169 9.47291 1.28894 9.45504 1.37019 9.42071C1.45144 9.38638 1.52507 9.33627 1.58682 9.27328L5.36015 5.50661C5.42782 5.44418 5.48183 5.36841 5.51876 5.28408C5.5557 5.19975 5.57477 5.10868 5.57477 5.01661C5.57477 4.92454 5.5557 4.83347 5.51876 4.74914C5.48183 4.66481 5.42782 4.58904 5.36015 4.52661Z"
+                  fill="#F4F6FF"
+                />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+      <DeleteDialog
+        open={isDialogOpen}
+        onClose={() => setIsDialogOpen(false)}
+        onConfirm={confirmDelete}
+        isDeleting={isDeleting}
+      />
+    </div>
+  );
+};

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TransactionTypeEnum } from '../../../../property-practice-dtos';
+import { Tabs } from './Tabs';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+const mockSaleData = [
+  { id: '1', title: 'Luxury Apartment Sale', price: 'R1,200,000' },
+  { id: '2', title: 'Modern Villa Sale', price: 'R2,800,000' },
+];
+
+const mockLeaseData = [
+  { id: '3', title: 'Downtown Apartment Lease', price: 'R8,500/month' },
+  { id: '4', title: 'Suburban House Lease', price: 'R12,000/month' },
+];
+
+export const Default: Story = {
+  args: {
+    saleData: mockSaleData,
+    leaseData: mockLeaseData,
+    defaultTab: TransactionTypeEnum.enum.SALE,
+    onTabChange: (tab) => console.log('Tab changed:', tab),
+  },
+};
+
+export const LeaseDefault: Story = {
+  args: {
+    saleData: mockSaleData,
+    leaseData: mockLeaseData,
+    defaultTab: TransactionTypeEnum.enum.LEASE,
+  },
+};

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import {
+  TransactionTypeEnum,
+  TransactionTypeEnumType,
+} from '../../../../property-practice-dtos';
+
+interface TabsProps {
+  saleData: any[];
+  leaseData: any[];
+  defaultTab?: TransactionTypeEnumType;
+  onTabChange?: (tab: TransactionTypeEnumType) => void;
+}
+
+export const Tabs = ({
+  saleData,
+  leaseData,
+  defaultTab = TransactionTypeEnum.enum.SALE,
+  onTabChange,
+}: TabsProps) => {
+  const [tab, setTab] = useState<TransactionTypeEnumType>(defaultTab);
+
+  const displayedData = useMemo(
+    () => (tab === TransactionTypeEnum.enum.SALE ? saleData : leaseData),
+    [tab, saleData, leaseData],
+  );
+
+  const handleTabChange = (newTab: TransactionTypeEnumType) => {
+    setTab(newTab);
+    onTabChange?.(newTab);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="px-4 border-b border-gray-300 bg-white">
+        <div className="flex gap-x-10 py-3">
+          {Object.values(TransactionTypeEnum.enum).map((type) => (
+            <button
+              key={type}
+              type="button"
+              onClick={() => handleTabChange(type as TransactionTypeEnumType)}
+              className={`text-base font-semibold cursor-pointer px-6 py-2 rounded-t-lg border-b-4 transition-colors duration-200 ${
+                tab === type
+                  ? 'border-blue-600 text-[#033c89]'
+                  : 'border-transparent text-gray-400 dark:text-[#033c89]'
+              }`}
+            >
+              {type.charAt(0).toUpperCase() + type.slice(1).toLowerCase()}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/Toast.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import { useEffect } from 'react';
+import { tv } from 'tailwind-variants';
+import { ToastType } from '../../types';
+
+interface Props {
+  visible?: boolean;
+  setVisible?: (visible: boolean) => void;
+  duration?: number | null;
+  type: ToastType;
+  message?: string;
+  onClear?: () => void;
+}
+
+const toastVariants = tv({
+  base: 'z-[100] fixed left-0 bottom-0 p-4 transition-all duration-500 transform',
+  variants: {
+    show: {
+      true: 'translate-x-0',
+      false: '-translate-x-full',
+    },
+  },
+});
+
+const containerVariants = tv({
+  base: 'rounded-lg shadow overflow-hidden p-2',
+  variants: {
+    type: {
+      Default: 'bg-gray-700',
+      Success: 'bg-green-700',
+      Warning: 'bg-yellow-700',
+      Error: 'bg-red-700',
+      Message: 'bg-blue-700',
+    },
+  },
+});
+
+const iconVariants = tv({
+  base: 'flex-shrink-0 self-start inline-flex items-center justify-center w-10 h-10 mr-3 rounded-xl bg-opacity-20',
+  variants: {
+    type: {
+      Success: 'bg-green-500',
+      Warning: 'bg-yellow-500',
+      Error: 'bg-red-500',
+      Message: 'bg-blue-500',
+      Default: 'bg-gray-500',
+    },
+  },
+});
+
+export default function Toast({
+  type,
+  message,
+  visible,
+  setVisible,
+  duration = 5000,
+  onClear,
+}: Props) {
+  //const [show, setShow] = useState(visible);console.log(visible, show)
+
+  useEffect(() => {
+    //setShow(visible)
+    if (duration && visible) {
+      const timer = setTimeout(() => {
+        setVisible && setVisible(false);
+        onClear && onClear();
+      }, duration);
+      return () => clearTimeout(timer);
+    }
+  }, [duration, visible]);
+
+  const icon = () => {
+    switch (type) {
+      case 'Success':
+        return (
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            stroke="#a1a1a1"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M0 10C0 4.47715 4.47715 0 10 0C12.6522 0 15.1957 1.05357 17.0711 2.92893C18.9464 4.8043 20 7.34784 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM9.73 13.61L14.3 7.61V7.58C14.5179 7.29419 14.5668 6.91382 14.4283 6.58218C14.2897 6.25054 13.9848 6.01801 13.6283 5.97218C13.2718 5.92635 12.9179 6.07419 12.7 6.36L8.92 11.36L7.29 9.28C7.07028 8.99776 6.71668 8.85418 6.36239 8.90334C6.00811 8.9525 5.70696 9.18694 5.57239 9.51834C5.43783 9.84974 5.49028 10.2278 5.71 10.51L8.15 13.62C8.34082 13.8615 8.63222 14.0017 8.94 14C9.2495 13.9993 9.54121 13.8552 9.73 13.61Z"
+              fill="#54D62C"
+            ></path>
+          </svg>
+        );
+      case 'Warning':
+        return (
+          <svg
+            width="24"
+            height="20"
+            viewBox="0 0 24 21"
+            fill="none"
+            stroke="#a1a1a1"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12.0005 15C11.8027 15 11.6093 15.0586 11.4449 15.1685C11.2804 15.2784 11.1523 15.4346 11.0766 15.6173C11.0009 15.8 10.9811 16.0011 11.0197 16.1951C11.0583 16.3891 11.1535 16.5673 11.2933 16.7071C11.4332 16.847 11.6114 16.9422 11.8054 16.9808C11.9993 17.0194 12.2004 16.9996 12.3831 16.9239C12.5659 16.8482 12.722 16.72 12.8319 16.5556C12.9418 16.3911 13.0005 16.1978 13.0005 16C13.0005 15.7348 12.8951 15.4804 12.7076 15.2929C12.52 15.1054 12.2657 15 12.0005 15ZM22.6705 16.47L14.6205 2.47C14.3603 2.00351 13.9802 1.61495 13.5196 1.34447C13.0591 1.07398 12.5346 0.931366 12.0005 0.931366C11.4663 0.931366 10.9419 1.07398 10.4813 1.34447C10.0207 1.61495 9.64065 2.00351 9.38046 2.47L1.38046 16.47C1.11125 16.924 0.966598 17.441 0.9611 17.9688C0.955602 18.4966 1.08945 19.0165 1.34914 19.476C1.60883 19.9356 1.98516 20.3185 2.44014 20.586C2.89512 20.8536 3.41264 20.9964 3.94046 21H20.0605C20.5925 21.0052 21.1164 20.8689 21.5784 20.6049C22.0403 20.3409 22.4238 19.9588 22.6894 19.4978C22.9551 19.0368 23.0933 18.5134 23.09 17.9813C23.0866 17.4493 22.9418 16.9277 22.6705 16.47ZM20.9405 18.47C20.8528 18.6259 20.7249 18.7555 20.5701 18.8452C20.4154 18.9349 20.2393 18.9815 20.0605 18.98H3.94046C3.76157 18.9815 3.58556 18.9349 3.43077 18.8452C3.27599 18.7555 3.14811 18.6259 3.06046 18.47C2.97269 18.318 2.92648 18.1455 2.92648 17.97C2.92648 17.7945 2.97269 17.622 3.06046 17.47L11.0605 3.47C11.1444 3.3062 11.2719 3.16873 11.4289 3.07274C11.5859 2.97675 11.7664 2.92596 11.9505 2.92596C12.1345 2.92596 12.315 2.97675 12.472 3.07274C12.629 3.16873 12.7565 3.3062 12.8405 3.47L20.8905 17.47C20.9897 17.6198 21.0467 17.7936 21.0555 17.9731C21.0643 18.1526 21.0245 18.3312 20.9405 18.49V18.47ZM12.0005 7C11.7352 7 11.4809 7.10535 11.2933 7.29289C11.1058 7.48043 11.0005 7.73478 11.0005 8V12C11.0005 12.2652 11.1058 12.5196 11.2933 12.7071C11.4809 12.8946 11.7352 13 12.0005 13C12.2657 13 12.52 12.8946 12.7076 12.7071C12.8951 12.5196 13.0005 12.2652 13.0005 12V8C13.0005 7.73478 12.8951 7.48043 12.7076 7.29289C12.52 7.10535 12.2657 7 12.0005 7Z"
+              fill="#FFC107"
+            ></path>
+          </svg>
+        );
+      case 'Error':
+        return (
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            stroke="#a1a1a1"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 12C9.75278 12 9.5111 12.0733 9.30554 12.2107C9.09998 12.348 8.93976 12.5432 8.84516 12.7716C8.75055 13.0001 8.72579 13.2514 8.77402 13.4939C8.82225 13.7363 8.94131 13.9591 9.11612 14.1339C9.29094 14.3087 9.51367 14.4277 9.75614 14.476C9.99862 14.5242 10.25 14.4995 10.4784 14.4049C10.7068 14.3102 10.902 14.15 11.0393 13.9445C11.1767 13.7389 11.25 13.4972 11.25 13.25C11.25 12.9185 11.1183 12.6005 10.8839 12.3661C10.6495 12.1317 10.3315 12 10 12ZM10 10.5C10.2652 10.5 10.5196 10.3946 10.7071 10.2071C10.8946 10.0196 11 9.76522 11 9.5V6.5C11 6.23478 10.8946 5.98043 10.7071 5.79289C10.5196 5.60536 10.2652 5.5 10 5.5C9.73479 5.5 9.48043 5.60536 9.2929 5.79289C9.10536 5.98043 9 6.23478 9 6.5V9.5C9 9.76522 9.10536 10.0196 9.2929 10.2071C9.48043 10.3946 9.73479 10.5 10 10.5ZM10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34874 18.9425 4.80691 17.0678 2.93219C15.1931 1.05746 12.6513 0.00294858 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C17.9976 12.121 17.1539 14.1544 15.6542 15.6542C14.1544 17.1539 12.121 17.9976 10 18Z"
+              fill="#FF4842"
+            ></path>
+          </svg>
+        );
+      case 'Message':
+        return (
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            stroke="#a1a1a1"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 7.34784 18.9464 4.8043 17.0711 2.92893C15.1957 1.05357 12.6522 0 10 0ZM11 14C11 14.5523 10.5523 15 10 15C9.44771 15 9 14.5523 9 14V9C9 8.44771 9.44771 8 10 8C10.5523 8 11 8.44771 11 9V14ZM9 6C9 6.55228 9.44771 7 10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44771 5 9 5.44772 9 6Z"
+              fill="#1890FF"
+            ></path>
+          </svg>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const toast = () => {
+    switch (type) {
+      case 'Default':
+        return (
+          <div className="flex flex-wrap w-full h-full items-center justify-between">
+            <div className="w-full sm:w-auto px-4 py-4 sm:py-0 border-b border-gray-400 sm:border-transparent">
+              <span className="text-sm leading-5 text-gray-200 font-semibold">
+                {message}
+              </span>
+            </div>
+          </div>
+        );
+      default:
+        return (
+          <div className="flex flex-wrap w-full h-full items-center justify-between">
+            <div className="w-full sm:w-auto px-4 py-4 sm:py-0">
+              <div className="flex items-center pr-6">
+                <div className={iconVariants({ type })}>{icon()}</div>
+                <span className="text-sm leading-5 text-gray-200">
+                  {message}
+                </span>
+              </div>
+            </div>
+            <div className="w-20 h-16 border-l border-gray-800">
+              <button
+                onClick={() => {
+                  setVisible && setVisible(false);
+                  onClear && onClear();
+                }}
+                className="flex w-full h-full items-center justify-center text-center text-lg px-2 text-gray-50"
+              >
+                X
+              </button>
+            </div>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className={toastVariants({ show: visible })}>
+      <div className={containerVariants({ type })}>{toast()}</div>
+    </div>
+  );
+}