add domain records component

ui/app/actions/actions.ts

@@ -24,7 +24,7 @@ export async function saveName({
     body: JSON.stringify(payload),
     headers: {
       "Content-Type": "application/json",
-      "x-api-key": process.env.NEXT_PUBLIC_X_API_KEY,
+      "x-api-key": process.env.NEXT_PUBLIC_API_KEY,
     },
   });
   return await res.json();
@@ -50,7 +50,7 @@ export async function getAccountDomains({
     {
       headers: {
         "Content-Type": "application/json",
-        "x-api-key": process.env.NEXT_PUBLIC_X_API_KEY,
+        "x-api-key": process.env.NEXT_PUBLIC_API_KEY,
       },
     }
   );
@@ -73,7 +73,7 @@ export async function getDomains({
     {
       headers: {
         "Content-Type": "application/json",
-        "x-api-key": process.env.NEXT_PUBLIC_X_API_KEY,
+        "x-api-key": process.env.NEXT_PUBLIC_API_KEY,
       },
     }
   );
@@ -86,7 +86,7 @@ export async function getDomainsMetadata(id: string) {
     {
       headers: {
         "Content-Type": "application/json",
-        "x-api-key": process.env.NEXT_PUBLIC_X_API_KEY,
+        "x-api-key": process.env.NEXT_PUBLIC_API_KEY,
       },
     }
   );
@@ -99,7 +99,7 @@ export async function getAccountDomainDetails(
   const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/domains/${id}`, {
     headers: {
       "Content-Type": "application/json",
-      "x-api-key": process.env.NEXT_PUBLIC_X_API_KEY,
+      "x-api-key": process.env.NEXT_PUBLIC_API_KEY,
     },
   });
   return await res.json();

ui/app/names/[id]/page.tsx

@@ -4,6 +4,7 @@ import { getAccountDomainDetails } from "@/app/actions/actions";
 import { useEffect, useState } from "react";
 
 import DetailsNameHeader from "@/components/organisms/detailsNameHeader/detailsNameHeader";
+import DetailsNameTable from "@/components/organisms/detailsNameTable/detailsNameTable";
 
 export default function Page({ params }: { params: { id: string } }) {
   const [accountDomainDetails, setAccountDomainDetails] = useState(null);
@@ -22,6 +23,7 @@ export default function Page({ params }: { params: { id: string } }) {
   return (
     <div>
       <DetailsNameHeader accountDomainDetails={accountDomainDetails} />
+      <DetailsNameTable />
     </div>
   );
 }

ui/comman/types.ts

@@ -1,3 +1,5 @@
+import { TableTemplates } from "@/components/organisms/table/templates";
+
 export type View = {
   sm: number;
   md: number;
@@ -6,7 +8,7 @@ export type View = {
 export type LimitOptions = { text: string; value: number }[];
 export type TabSwitcherOptions = string[];
 
-export type DataTable = {
+export interface DataTable {
   data?: any[];
   content?: any[];
   size: number;
@@ -34,6 +36,26 @@ export type DataTable = {
   first: boolean;
   numberOfElements: number;
   empty: boolean;
+}
+
+export type TableConfig = {
+  colName: string;
+  headerText: string;
+  columnTemplate: TableTemplates;
+  fields: {
+    value?: string;
+    url?: string;
+    tooltipFromData?: string;
+    tooltipText?: string;
+    func?: (value: string) => void;
+    prefix?: string;
+    postfix?: string;
+    additionValue?: string;
+  };
+  sortBy?: SORT_BY;
+  style?: {
+    color?: string;
+  }
 };
 
 export enum SORT_BY {

ui/components/atoms/subHeader/index.module.css

@@ -0,0 +1,3 @@
+.subHeader {
+    font-size: 20px;
+}

ui/components/atoms/subHeader/index.ts

@@ -0,0 +1 @@
+export {default as SubHeader} from './subHeader'

ui/components/atoms/subHeader/subHeader.tsx

@@ -0,0 +1,20 @@
+import { interSemiBold } from "@/app/fonts";
+import classNames from "classnames";
+
+import style from "./index.module.css";
+
+const SubHeader = ({
+  header,
+  className,
+}: {
+  header: string;
+  className?: string;
+}): JSX.Element => {
+  return (
+    <div className={classNames(interSemiBold.className, style.subHeader,className)}>
+      {header}
+    </div>
+  );
+};
+
+export default SubHeader;

ui/components/organisms/accountConent/accountContent.tsx

@@ -7,6 +7,7 @@ import { Table } from "../table";
 import { ScoringConfig, mockData } from "./constants";
 import style from "./index.module.css";
 import { interSemiBold } from "@/app/fonts";
+import { ORDER_BY, SORT_BY } from "@/comman/types";
 
 const AccountContent = () => {
   const [typeView, setTypeView] = useState<TypeView>(TypeView.CARD);
@@ -15,7 +16,7 @@ const AccountContent = () => {
   };
 
   return (
-    <div>
+    <div className={style.wrapper}>
       <div className={style.header}>
         <div className={interSemiBold.className}>My Names</div>
         <ConnectWalletButton />
@@ -35,8 +36,8 @@ const AccountContent = () => {
           { text: "50", value: 50 },
           { text: "100", value: 100 },
         ]}
-        sortBy={"sortBy"}
-        orderBy={"orderBy"}
+        sortBy={SORT_BY.RESERVATION_TIMESTAMP}
+        orderBy={ORDER_BY.DESC}
         onChangePage={(data) => {
           console.log(data);
         }}

ui/components/organisms/accountConent/constants.ts

@@ -1,8 +1,8 @@
-import { SORT_BY } from "../../../comman/types";
+import { SORT_BY, TableConfig } from "../../../comman/types";
 import { TableTemplates } from "../table/templates";
 import iconMock from "./img/iconMock.svg";
 
-export const ScoringConfig = [
+export const ScoringConfig: TableConfig[] = [
   {
     colName: "names",
     headerText: "Registered Names",

ui/components/organisms/accountConent/index.module.css

@@ -2,8 +2,6 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 0 40px;
-  margin-left: 265px;
 }
 
 .header {

ui/components/organisms/detailsNameTable/constants.ts

@@ -0,0 +1,38 @@
+import { SORT_BY, TableConfig } from "@/comman/types";
+import { TableTemplates } from "../table/templates";
+
+
+export const mockData = {
+    data: [
+      { record: "Email", value: 'Set' },
+      { record: "Discord",value: 'Set' },
+      { record: "Github",  value: 'Set' },
+      { record: "Reddit", value: 'Set' },
+      { record: "X (Twitter)",  value: 'Set' },
+      { record: "Telegram",  value: 'Set'},
+    ],
+
+  };
+
+
+export const tableConfig: TableConfig[] = [
+  {
+    colName: "record",
+    headerText: "Record",
+    columnTemplate: TableTemplates.STRING,
+    fields: {
+      value: "record",
+    },
+  },
+  {
+    colName: "value",
+    columnTemplate: TableTemplates.STRING,
+    headerText: "Value",
+    fields: {
+      value: "value",
+    },
+    style: {
+      color: '#7191FC'
+    }
+  },
+];

ui/components/organisms/detailsNameTable/detailsNameTable.tsx

@@ -0,0 +1,23 @@
+import { TypeView } from "@/components/atoms/switchView/switchView";
+import { Table } from "../table";
+import { mockData, tableConfig } from "./constants";
+import { SubHeader } from "@/components/atoms/subHeader";
+
+import style from './index.module.css'
+
+const DetailsNameTable = () => {
+  return (
+    <div className={style.wrapper}>
+      <SubHeader header='Records' className={style.subHeader}/>
+      <Table
+        data={mockData}
+        config={tableConfig}
+        isLoading={false}
+        typeView={TypeView.LIST}
+        isHiddenPagination
+      />
+    </div>
+  );
+};
+
+export default DetailsNameTable;

ui/components/organisms/detailsNameTable/index.module.css

@@ -0,0 +1,3 @@
+.subHeader {
+    margin-bottom: 13px;
+}

ui/components/organisms/table/table.tsx

@@ -1,15 +1,16 @@
 import style from "./index.module.css";
-import { ORDER_BY } from "../../../comman/types";
+import { ORDER_BY, SORT_BY } from "../../../comman/types";
 import { TableErrorMessage } from "../../atoms/tableErrorMessage";
 import { Loader, LoaderVariant } from "../../atoms/loader";
 import { TypeView } from "../../atoms/switchView/switchView";
 import NameCards from "./view/nameCards";
 import ListTableContent from "./view/listTableContent";
 import Pagination from "../pagination/pagination";
+import { TableProps } from "./types";
 
 const Table = ({
   data,
-  config: configs,
+  config,
   isLoading,
   currentPage,
   pageLimit,
@@ -23,8 +24,9 @@ const Table = ({
   onChangeSort,
   onChangeOrder,
   typeView,
-}) => {
-  const handleSort = (sort?: string): void => {
+  isHiddenPagination,
+}: TableProps): JSX.Element => {
+  const handleSort = (sort?: SORT_BY): void => {
     if (!sort) return;
     if (sort === sortBy) {
       return onChangeOrder(
@@ -37,6 +39,7 @@ const Table = ({
   const showErrorMessage = !isLoading && (!data || data?.data?.length < 1);
 
   const renderPagination = () => {
+    if (isHiddenPagination) return null;
     return (
       <Pagination
         currentPage={currentPage}
@@ -58,7 +61,7 @@ const Table = ({
         {typeView === TypeView.LIST ? (
           <ListTableContent
             data={data?.data}
-            configs={configs}
+            configs={config}
             isLoading={isLoading}
             showErrorMessage={showErrorMessage}
             sortBy={sortBy}

ui/components/organisms/table/templates/stringTemplate/index.tsx

@@ -3,20 +3,11 @@ import classNames from "classnames";
 
 import styles from "../index.module.css";
 import { interMedium } from "@/app/fonts";
+import { TableConfig } from "@/comman/types";
 
 type StringTemplateProps = {
   data: any;
-  config: {
-    fields: {
-      value: string;
-      tooltipFromData?: string;
-      tooltipText?: string;
-      func: (value: string) => void;
-      prefix?: string;
-      postfix?: string;
-      additionValue?: string;
-    };
-  };
+  config: TableConfig;
 };
 
 const StringTemplate = ({ data, config }: StringTemplateProps) => {
@@ -34,7 +25,7 @@ const StringTemplate = ({ data, config }: StringTemplateProps) => {
     value === null;
 
   return (
-    <div className={classNames(interMedium.className, styles.stringTemplate)}>
+    <div className={classNames(interMedium.className, styles.stringTemplate)} style={config.style}>
       {isShowDash ? (
         "-"
       ) : (

ui/components/organisms/table/types.ts

@@ -0,0 +1,21 @@
+import { LimitOptions, ORDER_BY, SORT_BY, TableConfig } from "@/comman/types";
+import { TypeView } from "@/components/atoms/switchView/switchView";
+
+export interface TableProps {
+  data: { data: any[] };
+  config: TableConfig[];
+  isLoading: boolean;
+  currentPage?: number;
+  pageLimit?: number;
+  totalElements?: number;
+  pagesCount?: number;
+  sortBy?: SORT_BY;
+  orderBy?: ORDER_BY;
+  onChangePage?: (value: string) => void;
+  limitOptions?: LimitOptions;
+  onChangeLimit?: (value: number) => void;
+  onChangeSort?: (value: SORT_BY) => void;
+  onChangeOrder?: (value: ORDER_BY) => void;
+  typeView: TypeView;
+  isHiddenPagination?: boolean;
+}

ui/components/organisms/table/view/listTableContent.tsx

@@ -25,7 +25,7 @@ const ListTableContent = ({
   showErrorMessage,
   sortBy,
   orderBy,
-}: ListTableContent): JSX.Element => {
+}: ListTableContent): JSX.Element => {  
   return (
     <table className={style.table}>
       <thead>
@@ -39,7 +39,7 @@ const ListTableContent = ({
               })}
             >
               {headerText}
-              {sortBy === configSortBy && (
+              {configSortBy && sortBy === configSortBy && (
                 <Image
                   src={sortIcon}
                   alt="sort"