gistfile1.txt

import { useShow } from "@pankod/refine-core";
import {
  Show,
  Typography,
  Stack,
  TextFieldComponent as TextField,
  DateField,
  NumberField,
} from "@pankod/refine-mui";

import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";

export const CallbackShow = () => {
  const { queryResult } = useShow();
  const { data, isLoading } = queryResult;

  const record = data?.data;
  const position = [51.505, -0.09];

  return (
    <Show isLoading={isLoading}>
      <Stack gap={1}>
        <MapContainer
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={false}
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={[51.505, -0.09]}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>

        <Typography variant="body1" fontWeight="bold">
          Id
        </Typography>
        <TextField value={record?.id} />
        <Typography variant="body1" fontWeight="bold">
          Created At
        </Typography>
        <DateField value={record?.created_at} />
        <Typography variant="body1" fontWeight="bold">
          Ip
        </Typography>
        <TextField value={record?.ip} />
        <Typography variant="body1" fontWeight="bold">
          External Ip
        </Typography>
        <TextField value={record?.external_ip} />
        <Typography variant="body1" fontWeight="bold">
          City
        </Typography>
        <TextField value={record?.city} />
        <Typography variant="body1" fontWeight="bold">
          Country
        </Typography>
        <TextField value={record?.country} />
        <Typography variant="body1" fontWeight="bold">
          Lat Long
        </Typography>
        <TextField value={record?.lat_long} />
        <Typography variant="body1" fontWeight="bold">
          Country Emoji
        </Typography>
        <TextField value={record?.country_emoji} />
        <Typography variant="body1" fontWeight="bold">
          Hostname
        </Typography>
        <TextField value={record?.hostname} />
        <Typography variant="body1" fontWeight="bold">
          Os
        </Typography>
        <TextField value={record?.os} />
        <Typography variant="body1" fontWeight="bold">
          Arch
        </Typography>
        <TextField value={record?.arch} />
        <Typography variant="body1" fontWeight="bold">
          Users
        </Typography>
        <TextField value={record?.users} />
        <Typography variant="body1" fontWeight="bold">
          Boot Time
        </Typography>
        <NumberField value={record?.boot_time ?? ""} />
      </Stack>
    </Show>
  );
};