Vernfongchao/feature/community page

client/src/components/App/App.js

@@ -15,6 +15,7 @@ import Privacy from '@/pages/Privacy/Privacy';
 import License from '@/pages/License/License';
 import UserProfile from '@/pages/Userprofile/UserProfile';
 import Contact from '@/pages/Contact/Contact';
+import Community from '@/pages/Community/Community';
 import NotFound from '@/pages/NotFound/NotFound';
 import './App.css';
 
@@ -64,6 +65,7 @@ function App() {
                   <Route path="/privacy" element={<Privacy />} />
                   <Route path="/license" element={<License />} />
                   <Route path="/contact" element={<Contact />} />
+                  <Route path="/community" element={<Community />} />
                   <Route path="/data" element={<Data />} />
                   <Route path="/go" element={<RedirectWithHash param="to" />} />
                   <Route path="*" element={<NotFound />} />

client/src/components/Button/Button.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Button } from '@mui/material';
+
+import { styled } from '@mui/material/styles';
+
+export const GreenButton = (props) => {
+  const Green = styled(Button)({
+    backgroundColor: '#147d16',
+    borderRadius: '.3vw',
+    color: 'white',
+    height: '32px',
+  });
+
+  return (
+    <Green type={props.type} sx={props?.sx} onClick={props.onClick}>
+      {props.children}
+    </Green>
+  );
+};
+
+export const WhiteButton = (props) => {
+  const White = styled(Button)({
+    backgroundColor: 'white',
+    outline: '1px #147d16 solid',
+    borderRadius: '.3vw',
+    color: '#00000050',
+    height: '32px',
+    fontSize: '12px',
+  });
+
+  return (
+    <White type={props.type} onClick={props.onClick} sx={props?.sx}>
+      {props.children}
+    </White>
+  );
+};
+
+export const GrayButton = (props) => {
+  const Gray = styled(Button)({
+    backgroundColor: 'white',
+    borderRadius: '.3vw',
+    outline: '1px solid #00000050',
+    color: '#00000050',
+    height: '32px',
+    fontSize: '12px',
+  });
+
+  return (
+    <Gray type={props.type} onClick={props.onClick} sx={props?.sx}>
+      {props.children}
+    </Gray>
+  );
+};

client/src/components/Button/index.js

@@ -0,0 +1 @@
+export * from './Button';

client/src/components/Header/Header.js

@@ -68,6 +68,12 @@ const Header = () => {
             </Link>
           </MenuItem>
 
+          <MenuItem onClick={handleClose}>
+            <Link to="/community" className="header-link">
+              <HeaderButton menuItem="Community" />
+            </Link>
+          </MenuItem>
+
           <MenuItem onClick={handleClose}>
             <Link to="/data" className="header-link">
               <HeaderButton menuItem="Data" />

client/src/components/Icons/Link.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Link, LinkOff } from '@mui/icons-material';
+
+export const LinkIcon = (props) => (
+  <Link sx={{ verticalAlign: 'top' }} {...props} />
+);
+
+export const LinkOffIcon = (props) => (
+  <LinkOff sx={{ verticalAlign: 'top' }} {...props} />
+);

client/src/components/Icons/Search.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import SearchIcon from '@mui/icons-material/Search';
+
+export const Search = (props) => (
+  <SearchIcon sx={{ verticalAlign: 'top' }} {...props} />
+);

client/src/components/Icons/Sort.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Remove, ExpandLess, ExpandMore } from '@mui/icons-material';
+
+export const Neutral = (props) => (
+  <Remove sx={{ verticalAlign: 'top' }} {...props} />
+);
+
+export const SortUp = (props) => (
+  <ExpandLess sx={{ verticalAlign: 'top' }} {...props} />
+);
+
+export const SortDown = (props) => (
+  <ExpandMore sx={{ verticalAlign: 'top' }} {...props} />
+);

client/src/components/Icons/Upload.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { UploadFile } from '@mui/icons-material';
+
+export const UploadFileIcon = (props) => (
+  <UploadFile sx={{ verticalAlign: 'top' }} {...props} />
+);

client/src/components/Icons/index.js

@@ -1,3 +1,7 @@
 export * from './Adopt';
 export * from './Drop';
 export * from './Like';
+export * from './Link'
+export * from './Upload'
+export * from './Search'
+export * from './Sort'

client/src/components/SearchBar/SearchBar.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Search } from '@/components/Icons';
+
+import './SearchBar.scss';
+export const SearchBar = (props) => {
+  return (
+    <div className="searchbar" style={{ ...props.style.div }}>
+      <label htmlFor="searchbar">
+        <Search
+          sx={{
+            color: '#00000050',
+            fontSize: '24px',
+            marginLeft: '10px',
+            marginRight: '10px',
+            fontFamily: 'Montserrat',
+          }}
+        />
+      </label>
+
+      <input
+        id="searchbar"
+        style={{ ...props.style.input }}
+        value={props.search}
+        onChange={props.onChange}
+        placeholder={props.placeholder}
+        className="searchbar__input"
+      />
+    </div>
+  );
+};

client/src/components/SearchBar/SearchBar.scss

@@ -0,0 +1,17 @@
+.searchbar{
+    display: flex;
+    align-items: center;
+    border: 1px solid #00000050;
+    &__input{
+        border: none;
+        width: 100%;
+        height: 100%;
+    }
+    &__input:focus{
+        outline: none;
+
+    }
+    &__input::-webkit-input-placeholder{
+        color: '#00000050',
+    }
+}

client/src/components/Section/Section.js

@@ -1,18 +1,9 @@
 import React from 'react';
 import { Box } from '@mui/material';
 
-export default function Section({ children, title }) {
+export default function Section({ children, sx }) {
   return (
-    <Box
-      sx={{
-        mt: 2,
-        mb: 4,
-        '&:last-child': {
-          mb: 2,
-        },
-      }}
-    >
-      <h3>{title}</h3>
+    <Box sx={{ fontFamily: 'Montserrat', fontWeight: 'bold', ...sx }}>
       {children}
     </Box>
   );

client/src/components/Table/TableRow.js

@@ -0,0 +1,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>
+    </>
+  );
+}