1. import React from "react";
2. import styles from "@/styles/contact.module.scss";
3. import { AiOutlineSortAscendings,AiOutlineEllipsis} from "react-icons/ai";
4.  
5. import DataTable from "react-data-table-component";
6.  
7. export default function contact(){
8.     const columns = [
9.        
10.            
11.         {
12.             name: "",
13.             selector: (row) => (
14.               <img
15.                 src="./coworking-spaces-02.jpg"
16.                 height="60px"
17.                 width="60px"
18.                 style={{
19.                   border: "5px solid #ECEBEC",
20.                   borderRadius: "7px",
21.                   objectFit: "fill",
22.                 }}></img>
23.             ),
24.             sortable: true,
25.         },
26.         {
27.             name: (
28.                 <>
29.                   < AiOutlineSortAscendings/>{" "}
30.                   <span style={{ paddingLeft: "7px" }}>Name</span>{" "}
31.                 </>
32.               ),
33.               selector: (row) => (
34.                 <div>
35.                   <div style={{ color: "#3F4254", fontWeight: 600 }}>{row.title}</div>
36.                   <div style={{ color: "#626679" }}>{row.address}</div>
37.                 </div>
38.               ),
39.               sortable: true,
40.         },
41.         {
42.             name: (
43.                 <>
44.                   < AiOutlineSortAscendings/>{" "}
45.                   <span style={{ paddingLeft: "7px" }}>Email</span>
46.                 </>
47.               ),
48.               selector: (row) => (
49.                 <div style={{ color: "#626679" }}>
50.                   <div>{row.EamilId}</div>
51.                   <div>Eamil</div>
52.                 </div>
53.               ),
54.               sortable: true,
55.         },
56.         {
57.             name: (
58.                 <>
59.                   <AiOutlineSortAscendings/>{" "}
60.                   <span style={{ paddingLeft: "7px"}}>Phone</span>
61.                 </>
62.               ),
63.               selector: (row) => (
64.                 <div>
65.                   <div style={{ fontWeight: "700" }}>
66.                   561-303-6106
67.                   </div>
68.                   <div>Price</div>
69.                 </div>
70.               ),
71.         },
72.         {
73.             name: (
74.                 <>
75.                   <AiOutlineSortAscendings/>{" "}
76.                   <span style={{ paddingLeft: "7px"}}>Fee</span>
77.                 </>
78.               ),
79.               selector: (row) => (
80.                 <div>
81.                   <div style={{ color: "#459ED8", fontWeight: "700" }}>
82.                     ${row.price}/hr
83.                   </div>
84.                   <div>Rate</div>
85.                 </div>
86.               ),
87.         },
88.         {
89.             name: (
90.                 <>
91.                   <AiOutlineSortAscendings/>{" "}
92.                   <span style={{ paddingLeft: "7px"}}>Tag</span>
93.                 </>
94.               ),
95.               selector: (row) => (
96.                 <div>
97.                     <div><button className={styles.tag_button}></button></div>
98.                 </div>
99.               ),
100.         },
101.         {
102.             name: "",
103.             selector: (row) => <AiOutlineEllipsis fontSize={30} />,
104.              
105.         }
106.      
107.     ];
108.  
109.     const data = [
110.         {
111.             id: 1,
112.             title: "Nichole Perkins",
113.             address: "Company",
114.             EamilId: "[email protected]",
115.             price: "17",
116.         },
117.         {
118.             id: 1,
119.             title: "Anastasya Gordon",
120.             address: "Company",
121.             EamilId: "[email protected]",
122.             price: "17",
123.         },
124.         {
125.             id: 1,
126.             title: "Thomas Holand",
127.             address: "Company",
128.             EamilId: "[email protected]",
129.             price: "17",
130.         },
131.         {
132.             id: 1,
133.             title: "Larry Nichole",
134.             address: "Company",
135.             EamilId: "[email protected]",
136.             price: "17",
137.         },
138.         {
139.             id: 1,
140.             title: "Nichole Perkins",
141.             address: "Company",
142.             EamilId: "[email protected]",
143.             price: "17",
144.         },
145.         {
146.             title: "Nichole Perkins",
147.             address: "Company",
148.             EamilId: "[email protected]",
149.             price: "17",
150.         },
151.         {
152.             title: "Thomas Holand",
153.             address: "Company",
154.             EamilId: "[email protected]",
155.             price: "17",
156.         },
157.        
158.     ];
159.     const customStyles = {
160.         headCells: {
161.           style: {
162.             fontSize: "16px",
163.             color: "#626679",
164.             border: "none !important",
165.           },
166.         },
167.         rows: {
168.           style: {
169.             border: "none !important",
170.           },
171.         },
172.       };
173.  
174.     return(
175.         <>
176.             <div>
177.             <DataTable
178.               columns={columns}
179.               data={data}
180.               //pagination
181.               customStyles={customStyles}
182.             />
183.             </div>
184.         </>
185.     );
186. }
187.