Untitled

import { usePDVCustomer } from "layouts/AppLayout/components/PDV/hooks/usePDVCustomer";
import { DataDisplay } from "../DataDisplay";

export function CustomerInformation() {
  const { customerData } = usePDVCustomer();

  return (
    <DataDisplay>
      <thead>
        <tr>
          <th colSpan={4}>Informações do cliente</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><b>Endereço: </b></td>
          <td>{customerData ? `${customerData.address.street} - ${customerData.address.number}` : ""}</td>
          <td><b>Cadastrado em: </b></td>
          <td>17/06/2024</td>
        </tr>

        <tr>
          <td><b>Endereço: </b></td>
          <td>Rua Maria F. de Jesus, 36</td>
          <td><b>Cadastrado em: </b></td>
          <td>17/06/2024</td>
        </tr>

        <tr>
          <td><b>Endereço: </b></td>
          <td>Rua Maria F. de Jesus, 36</td>
          <td><b>Cadastrado em: </b></td>
          <td>17/06/2024</td>
        </tr>

        <tr>
          <td><b>Endereço: </b></td>
          <td>Rua Maria F. de Jesus, 36</td>
          <td><b>Cadastrado em: </b></td>
          <td>17/06/2024</td>
        </tr>
      </tbody>
    </DataDisplay>
  );
}

import styled from "styled-components";

export const Container = styled.div`
  margin-top: 1.25rem;
  flex: 1;
  background: ${({ theme }) => theme.white};
  border-radius: 4px;
  border: 1px solid ${({ theme }) => theme["border-color"]};
`;

export const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;

  thead {
    tr {
      background: ${({ theme }) => theme["light-gray-100"]};

      th {
        color: ${({ theme }) => theme["gray-400"]};
        font-weight: 500;
        text-align: center;
        padding: ${({ theme }) => theme["p-sm"]};
        font-size: ${({ theme }) => theme["text-sm"]};
      }
    }
  }

  tbody {
    tr {
      background: rgba(0, 0, 0, 0.005);

      &:nth-child(even) {
        background: rgba(0, 0, 0, 0.010);
      }

      &:hover {
        background: rgba(0, 0, 0, 0.015);
      }

      td {
        padding: ${({ theme }) => theme["p-sm"]};
        font-size: ${({ theme }) => theme["text-sm"]};
        color: ${({ theme }) => theme["gray-400"]};
        white-space: nowrap;

        b {
          
        }
      }
    }
  }
`;