wtt_front/client/src/components/Table/TableRow.js at d17f17722264245240b98d35bd59f446ff6d13c9 · waterthetrees/wtt_front · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React, { useState } from 'react';

import { Table, TableBody, TableRow, TableCell } from '@mui/material';

import { styled } from '@mui/material/styles';

export default function CommunityTableRow({ row }) {
  const [hover, setHover] = useState(false);

  const StyledCell = styled(TableCell)({
    borderBottom: '1px #00000050 solid',
    color: '#000000',
    fontSize: '14px',
    fontFamily: 'Montserrat',
    padding: '0px',
  });

  const ShortCell = styled(TableCell)(
    hover
      ? {
          fontWeight: 'bold',
          width: '16.67%',
          borderBottom: '1px #00000050 solid',
          color: '#000000',
          fontSize: '14px',
          fontFamily: 'Montserrat',
          padding: '0px',
        }
      : {
          width: '16.67%',
          borderBottom: '1px #00000050 solid',
          color: '#000000',
          fontSize: '14px',
          fontFamily: 'Montserrat',
          padding: '0px',
        },
  );

  const LongCell = styled(TableCell)(
    hover
      ? {
          fontWeight: 'bold',
          width: '25%',
          borderBottom: '1px #00000050 solid',
          color: '#000000',
          fontSize: '14px',
          fontFamily: 'Montserrat',
          padding: '0px',
        }
      : {
          width: '25%',
          borderBottom: '1px #00000050 solid',
          color: '#000000',
          fontSize: '14px',
          fontFamily: 'Montserrat',
          padding: '0px',
        },
  );

  return (
    <>
      <Table>
        <TableBody
          sx={
            hover
              ? { backgroundColor: '#f3f1f1', height: '40px' }
              : { height: '40px' }
          }
        >
          <TableRow
            onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}
          >
            <ShortCell>{row.country}</ShortCell>
            <LongCell>{row.city}</LongCell>
            <ShortCell>{row.territory}</ShortCell>
            <ShortCell>{row.service}</ShortCell>
            <LongCell>
              <a
                style={
                  hover
                    ? { color: '#3FAB45', textDecoration: 'underline' }
                    : { color: '#000000', textDecoration: 'underline' }
                }
                href={row.link}
                target="_blank"
                rel="noopener noreferrer"
              >
                {row.organization}
              </a>
            </LongCell>
          </TableRow>
        </TableBody>
      </Table>
    </>
  );
}