diff --git a/components/logistic/Columns.tsx b/components/logistic/Columns.tsx index 12f8856..f569b8a 100644 --- a/components/logistic/Columns.tsx +++ b/components/logistic/Columns.tsx @@ -1,13 +1,25 @@ import { Shipping } from "@/interfaces/Shipping" import { formatDate, formatLocation } from "@/utils" -import { Divider, QRCode, Space, Tag } from "antd" +import { Divider, Tag } from "antd" import { ColumnsType } from "antd/es/table" import Link from "next/link" import { statusMap } from "../Status" -import { SmallTag } from "../summary/Columns" - - - +import styled from "styled-components" + + + +export const SmallTag = styled.div<{ $status: string }>` + display: flex; + background-color: ${({ $status }) => statusMap.get($status)?.hexColorBg}; + border: 1px solid ${({ $status }) => statusMap.get($status)?.hexColor}; + color: ${({ $status }) => statusMap.get($status)?.hexColor}; + height: 16px; + border-radius: 10px; + padding: 2px 2px 2px 2px; + margin: 2px; + align-items: center; + font-size: 11px; +` export interface LogisticDataType { key: string diff --git a/components/summary/summary.tsx b/components/summary/summary.tsx index d10ecc6..2ff3470 100644 --- a/components/summary/summary.tsx +++ b/components/summary/summary.tsx @@ -37,7 +37,7 @@ export interface SummaryDataType { } -export default function LocationSummary() { +export const LocationSummary = (): JSX.Element => { const [dateRange, setDateRange] = useState() const { data } = useQuery(GET_SHIPPINGS) diff --git a/pages/index.tsx b/pages/index.tsx index bb9da38..f3b3c7f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -9,9 +9,9 @@ import { TeamOutlined, } from '@ant-design/icons'; import ShippingTable from "@/components/shippingTable/ShippingTable" -import LocationSummary from "@/components/summary/Summary" import { useLogin, useUser } from "@/components/hooks/useUser" import { Logistic } from "@/components/logistic/Logistic" +import { LocationSummary } from "@/components/summary/Summary" const lahtaUserId = '4f5cf275-0964-4f8a-a5ad-f0140b429182'