Zhang Ziqing
3 years ago
parent
78e1eb81bd
commit
3ad2f6bf3b
@ -1,23 +1,14 @@
|
||||
import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
|
||||
|
||||
const navigation: ProductNavigationItems = [
|
||||
{
|
||||
children: [
|
||||
{ href: '#', name: 'Technical Support' },
|
||||
{ href: '#', name: 'Sales' },
|
||||
{ href: '#', name: 'General' },
|
||||
],
|
||||
href: '#',
|
||||
name: 'Inboxes',
|
||||
},
|
||||
{ children: [], href: '#', name: 'Reporting' },
|
||||
{ children: [], href: '#', name: 'Settings' },
|
||||
{ href: '/offers', name: 'Home' },
|
||||
{ href: '/submit', name: 'Benchmark your offer' },
|
||||
];
|
||||
|
||||
const config = {
|
||||
navigation,
|
||||
showGlobalNav: true,
|
||||
title: 'Offers',
|
||||
showGlobalNav: false,
|
||||
title: 'Tech Offers Repo',
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
@ -0,0 +1,190 @@
|
||||
import { useState } from 'react';
|
||||
import { HorizontalDivider, Pagination, Select, Tabs } from '@tih/ui';
|
||||
|
||||
import CurrencySelector from '~/components/offers/util/currency/CurrencySelector';
|
||||
|
||||
type TableRow = {
|
||||
company: string;
|
||||
date: string;
|
||||
salary: string;
|
||||
title: string;
|
||||
yoe: string;
|
||||
};
|
||||
|
||||
// eslint-disable-next-line no-shadow
|
||||
enum YOE_CATEGORY {
|
||||
INTERN = 0,
|
||||
ENTRY = 1,
|
||||
MID = 2,
|
||||
SENIOR = 3,
|
||||
}
|
||||
|
||||
export default function OffersTable() {
|
||||
const [currency, setCurrency] = useState('SGD');
|
||||
const [selectedTab, setSelectedTab] = useState(YOE_CATEGORY.ENTRY);
|
||||
const [selectedPage, setSelectedPage] = useState(1);
|
||||
|
||||
function renderTabs() {
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<div className="w-fit">
|
||||
<Tabs
|
||||
label="Table Navigation"
|
||||
tabs={[
|
||||
{
|
||||
label: 'Fresh Grad (0-3 YOE)',
|
||||
value: YOE_CATEGORY.ENTRY,
|
||||
},
|
||||
{
|
||||
label: 'Mid (4-7 YOE)',
|
||||
value: YOE_CATEGORY.MID,
|
||||
},
|
||||
{
|
||||
label: 'Senior (8+ YOE)',
|
||||
value: YOE_CATEGORY.SENIOR,
|
||||
},
|
||||
{
|
||||
label: 'Internship',
|
||||
value: YOE_CATEGORY.INTERN,
|
||||
},
|
||||
]}
|
||||
value={selectedTab}
|
||||
onChange={(value) => setSelectedTab(value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderFilters() {
|
||||
return (
|
||||
<div className="m-4 flex items-center justify-between">
|
||||
<div className="justify-left flex items-center space-x-2">
|
||||
<span>All offers in</span>
|
||||
<CurrencySelector
|
||||
handleCurrencyChange={(value: string) => setCurrency(value)}
|
||||
selectedCurrency={currency}
|
||||
/>
|
||||
</div>
|
||||
<Select
|
||||
disabled={true}
|
||||
isLabelHidden={true}
|
||||
label=""
|
||||
options={[
|
||||
{
|
||||
label: 'Latest Submitted',
|
||||
value: 'latest-submitted',
|
||||
},
|
||||
]}
|
||||
value="latest-submitted"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderHeader() {
|
||||
return (
|
||||
<thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
|
||||
<tr>
|
||||
{[
|
||||
'Company',
|
||||
'Title',
|
||||
'YOE',
|
||||
'TC/year',
|
||||
'Date offered',
|
||||
'Actions',
|
||||
].map((header) => (
|
||||
<th key={header} className="py-3 px-6" scope="col">
|
||||
{header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
);
|
||||
}
|
||||
|
||||
function renderRow({ company, title, yoe, salary, date }: TableRow) {
|
||||
return (
|
||||
<tr className="border-b bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-600">
|
||||
<th
|
||||
className="whitespace-nowrap py-4 px-6 font-medium text-gray-900 dark:text-white"
|
||||
scope="row">
|
||||
{company}
|
||||
</th>
|
||||
<td className="py-4 px-6">{title}</td>
|
||||
<td className="py-4 px-6">{yoe}</td>
|
||||
<td className="py-4 px-6">{salary}</td>
|
||||
<td className="py-4 px-6">{date}</td>
|
||||
<td className="space-x-4 py-4 px-6">
|
||||
<a
|
||||
className="font-medium text-indigo-600 hover:underline dark:text-indigo-500"
|
||||
href="#">
|
||||
View Profile
|
||||
</a>
|
||||
<a
|
||||
className="font-medium text-indigo-600 hover:underline dark:text-indigo-500"
|
||||
href="#">
|
||||
Comment
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
function renderPagination() {
|
||||
return (
|
||||
<nav
|
||||
aria-label="Table navigation"
|
||||
className="flex items-center justify-between p-4">
|
||||
<span className="text-sm font-normal text-gray-500 dark:text-gray-400">
|
||||
Showing{' '}
|
||||
<span className="font-semibold text-gray-900 dark:text-white">
|
||||
1-10
|
||||
</span>{' '}
|
||||
of{' '}
|
||||
<span className="font-semibold text-gray-900 dark:text-white">
|
||||
1000
|
||||
</span>
|
||||
</span>
|
||||
<Pagination
|
||||
current={selectedPage}
|
||||
end={10}
|
||||
label="Pagination"
|
||||
pagePadding={1}
|
||||
start={1}
|
||||
onSelect={(page) => setSelectedPage(page)}
|
||||
/>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-5/6">
|
||||
{renderTabs()}
|
||||
<HorizontalDivider />
|
||||
<div className="relative w-full overflow-x-auto shadow-md sm:rounded-lg">
|
||||
{renderFilters()}
|
||||
<table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
|
||||
{renderHeader()}
|
||||
<tbody>
|
||||
{renderRow({
|
||||
company: 'Shopee',
|
||||
date: 'May 2022',
|
||||
salary: 'TC/yr',
|
||||
title: 'SWE',
|
||||
yoe: '5',
|
||||
})}
|
||||
{renderRow({
|
||||
company: 'Shopee',
|
||||
date: 'May 2022',
|
||||
salary: 'TC/yr',
|
||||
title: 'SWE',
|
||||
yoe: '5',
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{renderPagination()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,172 @@
|
||||
// eslint-disable-next-line no-shadow
|
||||
export enum Currency {
|
||||
AED = 'AED', // United Arab Emirates Dirham
|
||||
AFN = 'AFN', // Afghanistan Afghani
|
||||
ALL = 'ALL', // Albania Lek
|
||||
AMD = 'AMD', // Armenia Dram
|
||||
ANG = 'ANG', // Netherlands Antilles Guilder
|
||||
AOA = 'AOA', // Angola Kwanza
|
||||
ARS = 'ARS', // Argentina Peso
|
||||
AUD = 'AUD', // Australia Dollar
|
||||
AWG = 'AWG', // Aruba Guilder
|
||||
AZN = 'AZN', // Azerbaijan New Manat
|
||||
BAM = 'BAM', // Bosnia and Herzegovina Convertible Marka
|
||||
BBD = 'BBD', // Barbados Dollar
|
||||
BDT = 'BDT', // Bangladesh Taka
|
||||
BGN = 'BGN', // Bulgaria Lev
|
||||
BHD = 'BHD', // Bahrain Dinar
|
||||
BIF = 'BIF', // Burundi Franc
|
||||
BMD = 'BMD', // Bermuda Dollar
|
||||
BND = 'BND', // Brunei Darussalam Dollar
|
||||
BOB = 'BOB', // Bolivia Bolíviano
|
||||
BRL = 'BRL', // Brazil Real
|
||||
BSD = 'BSD', // Bahamas Dollar
|
||||
BTN = 'BTN', // Bhutan Ngultrum
|
||||
BWP = 'BWP', // Botswana Pula
|
||||
BYR = 'BYR', // Belarus Ruble
|
||||
BZD = 'BZD', // Belize Dollar
|
||||
CAD = 'CAD', // Canada Dollar
|
||||
CDF = 'CDF', // Congo/Kinshasa Franc
|
||||
CHF = 'CHF', // Switzerland Franc
|
||||
CLP = 'CLP', // Chile Peso
|
||||
CNY = 'CNY', // China Yuan Renminbi
|
||||
COP = 'COP', // Colombia Peso
|
||||
CRC = 'CRC', // Costa Rica Colon
|
||||
CUC = 'CUC', // Cuba Convertible Peso
|
||||
CUP = 'CUP', // Cuba Peso
|
||||
CVE = 'CVE', // Cape Verde Escudo
|
||||
CZK = 'CZK', // Czech Republic Koruna
|
||||
DJF = 'DJF', // Djibouti Franc
|
||||
DKK = 'DKK', // Denmark Krone
|
||||
DOP = 'DOP', // Dominican Republic Peso
|
||||
DZD = 'DZD', // Algeria Dinar
|
||||
EGP = 'EGP', // Egypt Pound
|
||||
ERN = 'ERN', // Eritrea Nakfa
|
||||
ETB = 'ETB', // Ethiopia Birr
|
||||
EUR = 'EUR', // Euro Member Countries
|
||||
FJD = 'FJD', // Fiji Dollar
|
||||
FKP = 'FKP', // Falkland Islands (Malvinas) Pound
|
||||
GBP = 'GBP', // United Kingdom Pound
|
||||
GEL = 'GEL', // Georgia Lari
|
||||
GGP = 'GGP', // Guernsey Pound
|
||||
GHS = 'GHS', // Ghana Cedi
|
||||
GIP = 'GIP', // Gibraltar Pound
|
||||
GMD = 'GMD', // Gambia Dalasi
|
||||
GNF = 'GNF', // Guinea Franc
|
||||
GTQ = 'GTQ', // Guatemala Quetzal
|
||||
GYD = 'GYD', // Guyana Dollar
|
||||
HKD = 'HKD', // Hong Kong Dollar
|
||||
HNL = 'HNL', // Honduras Lempira
|
||||
HRK = 'HRK', // Croatia Kuna
|
||||
HTG = 'HTG', // Haiti Gourde
|
||||
HUF = 'HUF', // Hungary Forint
|
||||
IDR = 'IDR', // Indonesia Rupiah
|
||||
ILS = 'ILS', // Israel Shekel
|
||||
IMP = 'IMP', // Isle of Man Pound
|
||||
INR = 'INR', // India Rupee
|
||||
IQD = 'IQD', // Iraq Dinar
|
||||
IRR = 'IRR', // Iran Rial
|
||||
ISK = 'ISK', // Iceland Krona
|
||||
JEP = 'JEP', // Jersey Pound
|
||||
JMD = 'JMD', // Jamaica Dollar
|
||||
JOD = 'JOD', // Jordan Dinar
|
||||
JPY = 'JPY', // Japan Yen
|
||||
KES = 'KES', // Kenya Shilling
|
||||
KGS = 'KGS', // Kyrgyzstan Som
|
||||
KHR = 'KHR', // Cambodia Riel
|
||||
KMF = 'KMF', // Comoros Franc
|
||||
KPW = 'KPW', // Korea (North) Won
|
||||
KRW = 'KRW', // Korea (South) Won
|
||||
KWD = 'KWD', // Kuwait Dinar
|
||||
KYD = 'KYD', // Cayman Islands Dollar
|
||||
KZT = 'KZT', // Kazakhstan Tenge
|
||||
LAK = 'LAK', // Laos Kip
|
||||
LBP = 'LBP', // Lebanon Pound
|
||||
LKR = 'LKR', // Sri Lanka Rupee
|
||||
LRD = 'LRD', // Liberia Dollar
|
||||
LSL = 'LSL', // Lesotho Loti
|
||||
LYD = 'LYD', // Libya Dinar
|
||||
MAD = 'MAD', // Morocco Dirham
|
||||
MDL = 'MDL', // Moldova Leu
|
||||
MGA = 'MGA', // Madagascar Ariary
|
||||
MKD = 'MKD', // Macedonia Denar
|
||||
MMK = 'MMK', // Myanmar (Burma) Kyat
|
||||
MNT = 'MNT', // Mongolia Tughrik
|
||||
MOP = 'MOP', // Macau Pataca
|
||||
MRO = 'MRO', // Mauritania Ouguiya
|
||||
MUR = 'MUR', // Mauritius Rupee
|
||||
MVR = 'MVR', // Maldives (Maldive Islands) Rufiyaa
|
||||
MWK = 'MWK', // Malawi Kwacha
|
||||
MXN = 'MXN', // Mexico Peso
|
||||
MYR = 'MYR', // Malaysia Ringgit
|
||||
MZN = 'MZN', // Mozambique Metical
|
||||
NAD = 'NAD', // Namibia Dollar
|
||||
NGN = 'NGN', // Nigeria Naira
|
||||
NIO = 'NIO', // Nicaragua Cordoba
|
||||
NOK = 'NOK', // Norway Krone
|
||||
NPR = 'NPR', // Nepal Rupee
|
||||
NZD = 'NZD', // New Zealand Dollar
|
||||
OMR = 'OMR', // Oman Rial
|
||||
PAB = 'PAB', // Panama Balboa
|
||||
PEN = 'PEN', // Peru Sol
|
||||
PGK = 'PGK', // Papua New Guinea Kina
|
||||
PHP = 'PHP', // Philippines Peso
|
||||
PKR = 'PKR', // Pakistan Rupee
|
||||
PLN = 'PLN', // Poland Zloty
|
||||
PYG = 'PYG', // Paraguay Guarani
|
||||
QAR = 'QAR', // Qatar Riyal
|
||||
RON = 'RON', // Romania New Leu
|
||||
RSD = 'RSD', // Serbia Dinar
|
||||
RUB = 'RUB', // Russia Ruble
|
||||
RWF = 'RWF', // Rwanda Franc
|
||||
SAR = 'SAR', // Saudi Arabia Riyal
|
||||
SBD = 'SBD', // Solomon Islands Dollar
|
||||
SCR = 'SCR', // Seychelles Rupee
|
||||
SDG = 'SDG', // Sudan Pound
|
||||
SEK = 'SEK', // Sweden Krona
|
||||
SGD = 'SGD', // Singapore Dollar
|
||||
SHP = 'SHP', // Saint Helena Pound
|
||||
SLL = 'SLL', // Sierra Leone Leone
|
||||
SOS = 'SOS', // Somalia Shilling
|
||||
SPL = 'SPL', // Seborga Luigino
|
||||
SRD = 'SRD', // Suriname Dollar
|
||||
STD = 'STD', // São Tomé and Príncipe Dobra
|
||||
SVC = 'SVC', // El Salvador Colon
|
||||
SYP = 'SYP', // Syria Pound
|
||||
SZL = 'SZL', // Swaziland Lilangeni
|
||||
THB = 'THB', // Thailand Baht
|
||||
TJS = 'TJS', // Tajikistan Somoni
|
||||
TMT = 'TMT', // Turkmenistan Manat
|
||||
TND = 'TND', // Tunisia Dinar
|
||||
TOP = 'TOP', // Tonga Pa'anga
|
||||
TRY = 'TRY', // Turkey Lira
|
||||
TTD = 'TTD', // Trinidad and Tobago Dollar
|
||||
TVD = 'TVD', // Tuvalu Dollar
|
||||
TWD = 'TWD', // Taiwan New Dollar
|
||||
TZS = 'TZS', // Tanzania Shilling
|
||||
UAH = 'UAH', // Ukraine Hryvnia
|
||||
UGX = 'UGX', // Uganda Shilling
|
||||
USD = 'USD', // United States Dollar
|
||||
UYU = 'UYU', // Uruguay Peso
|
||||
UZS = 'UZS', // Uzbekistan Som
|
||||
VEF = 'VEF', // Venezuela Bolivar
|
||||
VND = 'VND', // Viet Nam Dong
|
||||
VUV = 'VUV', // Vanuatu Vatu
|
||||
WST = 'WST', // Samoa Tala
|
||||
XAF = 'XAF', // Communauté Financière Africaine (BEAC) CFA Franc BEAC
|
||||
XCD = 'XCD', // East Caribbean Dollar
|
||||
XDR = 'XDR', // International Monetary Fund (IMF) Special Drawing Rights
|
||||
XOF = 'XOF', // Communauté Financière Africaine (BCEAO) Franc
|
||||
XPF = 'XPF', // Comptoirs Français du Pacifique (CFP) Franc
|
||||
YER = 'YER', // Yemen Rial
|
||||
ZAR = 'ZAR', // South Africa Rand
|
||||
ZMW = 'ZMW', // Zambia Kwacha
|
||||
ZWD = 'ZWD', // Zimbabwe Dollar
|
||||
}
|
||||
|
||||
export const CURRENCY_OPTIONS = Object.entries(Currency).map(
|
||||
([key, value]) => ({
|
||||
label: key,
|
||||
value,
|
||||
}),
|
||||
);
|
||||
@ -0,0 +1,30 @@
|
||||
import { Select } from '@tih/ui';
|
||||
|
||||
import { Currency } from '~/components/offers/util/currency/CurrencyEnum';
|
||||
|
||||
const currencyOptions = Object.entries(Currency).map(([key, value]) => ({
|
||||
label: key,
|
||||
value,
|
||||
}));
|
||||
|
||||
type Props = Readonly<{
|
||||
handleCurrencyChange: (currency: string) => void;
|
||||
selectedCurrency: string;
|
||||
}>;
|
||||
|
||||
export default function CurrencySelector({
|
||||
selectedCurrency,
|
||||
handleCurrencyChange,
|
||||
}: Props) {
|
||||
return (
|
||||
<Select
|
||||
display="inline"
|
||||
isLabelHidden={true}
|
||||
label="Select fruit"
|
||||
name=""
|
||||
options={currencyOptions}
|
||||
value={selectedCurrency}
|
||||
onChange={(currency: string) => handleCurrencyChange(currency)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
export function formatDate(value: Date | number | string) {
|
||||
const date = new Date(value);
|
||||
// Const day = date.toLocaleString('default', { day: '2-digit' });
|
||||
const month = date.toLocaleString('default', { month: 'short' });
|
||||
const year = date.toLocaleString('default', { year: 'numeric' });
|
||||
return `${month} ${year}`;
|
||||
}
|
||||
Loading…
Reference in new issue