react-router-dom#Link JavaScript Examples

CardMenu = (props) => {
  const deletePost = () => {
    props.deleteSubject(props.data.id);
  };

  const [confirmOpen, setConfirmOpen] = useState(false);

  return (
    <React.Fragment>
        <Box justifyContent="space-evenly" display="flex" alignItems="center" width="100%">
            <Button onClick={() => props.setOpen()} component={Link} to={`/subject/${props.data.id}`}>
              <EditRoundedIcon/>
            </Button>
            <Button onClick={()=>setConfirmOpen(true)}>
              <DeleteRoundedIcon/>
            </Button>
            <Button>
              <InfoRoundedIcon/>
            </Button>
            <ConfirmDialog
              title="Delete Subject?"
              open={confirmOpen}
              setOpen={setConfirmOpen}
              onConfirm={deletePost}
            >
              Are you sure you want to delete this Subject?
            </ConfirmDialog>
          </Box>
    </React.Fragment>
  );
}

Book = ({ book, deleteHandler }) => {
   return (
      <Card className="my-3 p-3 rounded">
         <Card.Body>
            <Link to={`/books/${book._id}`}>
               <Card.Title as="div">
                  <strong>{book.title}</strong>
               </Card.Title>
            </Link>
            <Card.Subtitle className="mb-2 text-muted">
               {book.subtitle}
            </Card.Subtitle>
            <Card.Text>{book.description}</Card.Text>
            <Card.Text as="h6">ISBN {book.isbn}</Card.Text>
            <Button variant="primary">{book.author}</Button>
            <Button variant="danger" onClick={() => deleteHandler(book._id)}>
               <i className="fas fa-trash"></i>
            </Button>
         </Card.Body>
      </Card>
   );
}

/* eslint-disable react/prop-types */
function Blog(props) {
  const topath = "/blogs/" + props.id;
  console.log(topath);
  return (
    <>
      <div className="section blog-card">
        <div className="blog-content">
          <h1 className="blog-heading" style={{ fontSize: "3.4rem" }}>{props.heading}</h1>
          <div className="subheading-container">
            <h3 className="blog-author" style={{ fontSize: "1.8rem" }}>{props.author}</h3>
            <h3 className="blog-date" style={{ fontSize: "1.8rem" }}>{props.date}</h3>
          </div>
          <Row>
            <Col lg="6">
              <img
                src={require("assets/img/blog/BlogImages/" + props.bannerImage)}
                className="blog-banner-image"
              ></img>
            </Col>
            <Col style={{ display: "flex" }} lg="6">
              <p className="blogs-description">
                {props.abstract}
                <Link to={topath} className="blogs-more-button">
                  Read More
                </Link>
              </p>
            </Col>
          </Row>
        </div>
      </div>
    </>
  );
}

/**
 * @type {Function}
 * @returns {JSX} Profile Data containes email , birth date , country
 */
function Profile() {
  return (
    <div className="accountCard">
      <h2>Profile</h2>
      <ProfileElement mataData="Email" data={ProfileInfo.email} />
      <ProfileElement mataData="Date of birth" data={ProfileInfo.birthDate} />
      <ProfileElement mataData="Country" data={ProfileInfo.country} />
      <Link to="editProfile">
        <button
          type="button"
          className="btn btn-outline-warning overviewButton"
        >
          EDIT BROFILE
        </button>
      </Link>
    </div>
  );
}

render() {
    return (
      <div className="container">
        <Link to="./cart">
          <i className="fa fa-shopping-cart cart">
            <span className="badge badge-danger remove-cart">
              {this.props.totalQuantity}
            </span>
          </i>
        </Link>
      </div>
    );
  }

ActivityPreviewCardDropdown = (props) => {
  const {
    showLti,
    shared,
    activity,
    projectId,
    playlistId,
  } = props;

  return (
    <Dropdown.Item
      as={Link}
      style={{ borderBottom: '1px solid #eee', padding: '10px' }}
      to={
        shared
          ? `/playlist/${playlistId}/activity/${activity.id}/preview`
          : (
            showLti
              ? `/playlist/${playlistId}/activity/${activity.id}/preview/lti`
              : `/project/${projectId}/playlist/${playlistId}/activity/${activity.id}/preview`
          )
      }
    >
      <div className="d-flex align-items-center">
        <FontAwesomeIcon icon="play-circle" />
        <div className="ml-2 title" style={{ whiteSpace: 'normal' }}>{activity.title}</div>
      </div>
    </Dropdown.Item>
  );
}

export default function Header() {

    const signOut = ( ) => {
        window.localStorage.removeItem('token');
    }

    return (
        <div className="header">
            <Link to="/" className="title">Safari App</Link>
            <nav className="nav-links">
                <Link className="nav-link" to ="/login">Login</Link>
                <Link className="nav-link" to ="/creatures">Animals</Link>
                <Link className="nav-link" to ="/login" onClick={signOut}>Sign out</Link>
            </nav>
        </div>
    )
}

LeaseRow = React.memo(
  function MemoLeaseRow({ lease }) {
    const classes = useStyles();
    return (
      <TableRow>
        <TableCell component="th" scope="row">
          <StatusPill state={lease.state} size="small" />
        </TableCell>
        <TableCell>
          <Link to={UrlService.deploymentDetails(lease.dseq)}>{lease.dseq}</Link>
        </TableCell>
        <TableCell>
          <div className={classes.flexCenter}>
            <PricePerMonth perBlockValue={uaktToAKT(lease.price.amount, 6)} />
            <PriceEstimateTooltip value={uaktToAKT(lease.price.amount, 6)} />
            <span className={classes.monthlyCost}>
              <FormattedNumber value={lease.price.amount} maximumSignificantDigits={18} />
              uakt ({`~${getAvgCostPerMonth(lease.price.amount)}akt/month`})
            </span>
          </div>
        </TableCell>
      </TableRow>
    );
  },
  (prevProps, nextProps) => {
    return isEqual(prevProps, nextProps);
  }
)

InterestCard = (props) => {
  const { interest, userInterested, handleClick, loading } = props;

  const { t } = useTranslation();
  const style = Style();

  return (
    <Card>
      <CardActionArea
        component={Link}
        to={`/events?interest=${interest._id}`}
        color="inherit"
        underline="none"
      >
        <CardHeader
          avatar={
            <Avatar
              src={interest.avatar}
              alt={t(`interestsList.${interest.name}`)}
            />
          }
          title={t(`interestsList.${interest.name}`)}
        />
      </CardActionArea>
      <CardActions className={style.interestCardActions}>
        <Button
          variant="text"
          color={userInterested ? 'secondary' : 'primary'}
          onClick={() => handleClick(interest, userInterested)}
          disabled={loading}
        >
          {userInterested ? t('interestsCard.remove') : t('interestsCard.add')}
        </Button>
      </CardActions>
    </Card>
  );
}

NavBar = () => {
  return (
    <NavBarStyles className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ">
      <BackContainer>
        <Link to="/">
          <h2>
            <i className="arrow circle left icon" />
          </h2>
        </Link>
      </BackContainer>
      <TitleContainer className="title-container">
        <h1>Escolha seu Pokemon</h1>
      </TitleContainer>
    </NavBarStyles>
  );
}

Navbar = () => {
    const style = {
        color: "white",
    };
    return (
        <nav className={classes.Navbar}>
            <Link style={style} to="/">
                <h3 className={classes.title}>PsychHelp</h3>
            </Link>
            <ul className={classes.navLinks}>
                <Link style={style} to="/login">
                    <li className={classes.item}>Login</li>
                </Link>
                <Link style={style} to="/signup">
                    <li className={classes.item}>Signup</li>
                </Link>
            </ul>
        </nav>
    );
}

Navbar = ()=>{
    return(
        <header className={"header  "}>
            <div className={"container logo-nav-container "}>

                <a   href={"https://portal.ingenieria.usac.edu.gt/"} className={"logo"}><img src={logo2}/> </a>
                <nav className={"navigation"}>
                    <ul>
                        <li><Link to = "/"> Inicio</Link> </li>
                        <li><a href={"https://portal.ingenieria.usac.edu.gt/"}>Acerca</a> </li>
                    </ul>

                </nav>
            </div>
        </header>
    )
}

Navbar = () => {
  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
  const dispatch = useDispatch();

  if (!isAuthenticated) {
    return '';
  }

  return (
    <nav className='navbar'>
      <Link to='/dashboard'>Home</Link>
      <Link to='/dashboard'>TrelloClone</Link>
      <Link to='/' onClick={() => dispatch(logout())}>
        Logout
      </Link>
    </nav>
  );
}

render() {
    const { clicked } = this.state;
    return (
      <div className="loginButton">
        <div className="dropdown">
          <img id="avataruser" src={this.state.image} />
          <span style={{ padding: "10px" }}>
            {this.state.name.split(" ")[1]}
          </span>
          <div className="dropdown-content">
            <Router>
              <Link className="linkUser" to="/login">
                Profile
              </Link>
            </Router>
          </div>
        </div>
      </div>
    );
  }

PageNotFound = () => {
  const { t } = useTranslation();
  return (
    <PageNotFoundWrapper>
      <PageNotFoundContent>
        <img src="img/404.svg" alt="404" />
        <h3>{t('notFound.title')}</h3>
        <p>{t('notFound.content')}</p>
        <div style={{ whiteSpace: 'nowrap' }}>
          <Link to="/" className="ids-link">
            {t('notFound.redirectButton')}
          </Link>
        </div>
      </PageNotFoundContent>
    </PageNotFoundWrapper>
  );
}

// import Button from '../Button/Button.jsx';

function Side() {
  return (
    <aside className={styles.side}>
      <nav>
        <ul className={styles.list}>
          {route.map((item) => {
            return (
              <li key={item.title} className={styles.listItem}>
                <Link to={`/${item.url}`}>{item.title}</Link>
              </li>
            );
          })}
        </ul>
      </nav>
    </aside>
  );
}

Navbar = ({handleClick, isLoggedIn}) => (
  <div>
    <h1>CHANGES</h1>
    <nav>
      {isLoggedIn ? (
        <div>
          {/* The navbar will show these links after you log in */}
          <Link to="/home">Home</Link>
          <a href="#" onClick={handleClick}>
            Logout
          </a>
        </div>
      ) : (
        <div>
          {/* The navbar will show these links before you log in */}
          <Link to="/login">Login</Link>
          <Link to="/signup">Sign Up</Link>
        </div>
      )}
    </nav>
    <hr />
  </div>
)

render() {
    return (
      <nav>
        <div className="Title">
          <h1 className="navbar-logo">
            Alternative Uniswap Interface
          </h1>
        </div>

        <div className="NavbarItems">
          <ul className={`nav-menu`}>
            {MenuItems.map((item, index) => {
              return (
                <li key={index}>
                  <Link className={"nav-links"} to={item.url}>
                    {item.title}
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
      </nav>
    );
  }

SidebarButton = ({ active, link, icon, text }) => {
  const classes = buttonStyles();
  return (
    <Link to={`/${link}`}>
      <Button
        className={`${classes.root} ${
          active ? classes.active : classes.notActive
        }`}
      >
        <span style={{ marginRight: "5px" }}>
          <Icon height="20" icon={icon} />
        </span>
        <Typography variant="caption">{text}</Typography>
      </Button>
    </Link>
  );
}

columnsCoin = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text, entry) => {
      return (
        <div className={styles.firstColumn}>
          <AcyIcon name={entry.short.toLowerCase()} width={20} height={20} />
          <Link className={styles.coinName} to="/market/info/token">
            {entry.short}
          </Link>
          <span className={styles.coinShort}> ({entry.name})</span>
        </div>
      );
    },
  },
  {
    title: 'Price',
    dataIndex: 'price',
    key: 'price',
    render: (text, entry) => {
      return <div className={styles.tableData}>$ {abbrNumber(text)}</div>;
    },
  },
  {
    title: 'Price Change',
    dataIndex: 'priceChange',
    key: 'priceChange',
    render: priceChange => {
      return (
        <span className={priceChange < 0 ? styles.priceChangeDown : styles.priceChangeUp}>
          {priceChange.toFixed(2)}
        </span>
      );
    },
  },
  {
    title: 'Volume 24H',
    dataIndex: 'volume24h',
    key: 'volume24h',
    render: (text, entry) => {
      return <div className={styles.tableData}>$ {abbrNumber(text)}</div>;
    },
  },
  {
    title: 'TVL',
    dataIndex: 'tvl',
    key: 'tvl',
    render: (text, entry) => {
      return <div className={styles.tableData}>$ {abbrNumber(text)}</div>;
    },
  },
]

SubjectPage = (props) => {
  const classes = useStyles();

  const containerVariants = {
    hidden: {
      opacity: 0,
      x: 100,
    },
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        delay: 0.5,
        duration: 0.5,
      },
    },
    exit: {
      x: "-100vw",
      transition: { ease: "easeInOut" },
    },
  };

  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      exit={props.clicked ? "" : "exit"}
      className={classes.page}
    >
      <Container className={classes.container}>
        <Fab
          onClick={() => props.setOpen()}
          component={Link}
          to="/subject/new"
          color="secondary"
          className={classes.fab}
        >
          <AddIcon />
        </Fab>
        {classCard(props) ? (
          <Typography
            variant="h3"
            style={{
              color: "black",
              marginTop: "0.5vw",
              textShadow: "2px 2px 2.2px #ff3399",
            }}
          >
            CLASSES
          </Typography>
        ) : null}
        <CardGrid className={classes.pageGrid}>{classCard(props)}</CardGrid>
        {labCard(props) ? (
          <Typography
            variant="h3"
            style={{
              color: "black",
              marginTop: "0.5vw",
              textShadow: "2px 2px 2.2px #ff3399",
            }}
          >
            LABS
          </Typography>
        ) : null}
        <CardGrid className={classes.pageGrid}>{labCard(props)}</CardGrid>
      </Container>
    </motion.div>
  );
}

function Event(props) {
  return (
    <>
      <FadeIn>
        <div className="">
          <Container>
            <Row className="event-container">
              <Col className="ml-auto mr-auto" md="12">
                <a href={props.event.link} target="_blank">
                  <h2 className="text-left comp-heading heading-main">
                    {props.event.name}
                  </h2>
                </a>
              </Col>
              <Col md="8" className="event-image-container my-auto">
                <img src={props.event.image} className="event-image" alt="" />
              </Col>
              <Col md="4" className="headings-container text-left my-auto">
                <h1 className="small-heading primary-heading">
                  {props.event.heading}
                </h1>
                <h2 className=" mt-3 small-heading-edited secondary-heading">
                  {props.event.subheading}
                </h2>
                <h1 className="small-heading primary-heading">
                  {props.event.heading02}
                </h1>
                {(props.event.name !== "ROBOSUB") ?
                  <h2 className=" mt-3 small-heading-edited secondary-heading">
                    {props.event.subheading02}
                  </h2> : <Link to='/vehicles/tarang' className="small-heading-edited tarang-link"> {props.event.subheading02}</Link>
                }
                <h2 className=" mt-3 small-heading-edited secondary-heading">
                  {props.event.subheading03}
                </h2>
                <h2 className=" mt-3 small-heading-edited secondary-heading">
                  {props.event.subheading04}
                </h2>
                <h1 className="small-heading primary-heading">
                  {props.event.heading03}
                </h1>
                <h2 className=" mt-3 small-heading-edited secondary-heading">
                  {props.event.subheading05}
                </h2>
                <h2 className=" mt-3 small-heading-edited secondary-heading">
                  {props.event.subheading06}
                </h2>
                <h2 className=" mt-3 small-heading-edited secondary-heading">
                  {props.event.subheading07}
                </h2>
              </Col>
            </Row>
            <Row>
              <p className="ml-3 mt-5 text-left auv-description-primary ">
                {props.event.para1}
              </p>
              <p className="ml-3 text-left auv-description-primary ">
                {props.event.para2}
              </p>
            </Row>
          </Container>
        </div>
      </FadeIn>
    </>
  );
}

function Footer() {

  const useStyles = makeStyles((theme) => ({
    grow: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      display: 'none',
      [theme.breakpoints.up('sm')]: {
        display: 'block',
      },
    },
  
    inputRoot: {
      color: 'inherit',
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 0),
  
      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
      transition: theme.transitions.create('width'),
      width: '100%',
      [theme.breakpoints.up('md')]: {
        width: '20ch',
      },
    },
    sectionDesktop: {
      display: 'none',
      [theme.breakpoints.up('sm')]: {
        display: 'flex',
        
      },
    },
    sectionMobile: {
      display: 'flex',
      [theme.breakpoints.down('sm')]: {
        display: 'grid',
        margin:'auto',
      },
    },
  }));
  
  const classes = useStyles();

  return (
    <div className={classes.grow}>
      <AppBar position="static" style={appBar}>
         <Container >
        <Toolbar>      
          <div className={classes.sectionDesktop}>
          <div className={classes.sectionMobile} >
        <div className="first">
         <ListItem className="navbar-links"> <Link to='/elements' className="individual">Get Started</Link> </ListItem>
         <ListItem className="navbar-links"> <Link to='/team' className="individual">About Us</Link> </ListItem>        
        </div>    
        <div className="second">
          <div className="social-div navbar-links">
            <a href="https://github.com/AasthaGithub/Customizable_Portfolio" className="social"><GitHubIcon></GitHubIcon></a>
          </div>
        </div>

        <div className="third">
          <ListItem className="navbar-links"> <Link to='/elements' className="individual">Work with Us</Link>  </ListItem>
          <ListItem className="navbar-links"><Link to='/team' className="individual">Connect with Us</Link>  </ListItem> 
        </div>
     </div>
      </div>
        </Toolbar>
        </Container>
      </AppBar>
    </div>
  );
}

/**
   * @function
   * 
   * @name render
   * 
   * @description Render Genre card components..
   * 
   * @returns {JSX} Component for App
   */
  render() {
    const subPath = (base === prodUrl) ? subUrl : "";
    return (
      <div
        className="card-container"
        data-testid="card-container"
      >
        <div className="card"
          data-testid="card"
        >
          <div
            className="overlayer"
            onClick={this.handlePlaylistClick}
            data-testid="overlayer"
          >
          </div>
          <img
            src={`${subPath}${this.state.icon}`}
            alt="playlist cover"
            data-testid="playlist-image"
          />
          <div
            className="title"
            data-testid="playlist-title"
          >
            <Link
              to={`${this.state.type}/${this.state._id}`}
              className="playlist-link"
              data-testid="playlist-link"
            >{this.state.name}</Link>
          </div>
        </div >
      </div>
    );
  }

render() {
    return (
      <div className="nav-container">
        <nav
          className="navbar navbar-expand-lg fixed-top navbar-light bg-light "
          style={{ backgroundClip: "#e3f2fd" }}
        >
          <div className="container-sm">
            <Link className="navbar-brand" to="/">
              <img
                src={brandLogo}
                width="30px"
                height="30px"
                className="d-inline-block align-top"
                alt=""
              />{" "}
              Souq.cat
            </Link>
            <button
              className="navbar-toggler"
              type="button"
              data-toggle="collapse"
              data-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon"></span>
            </button>

            <div
              className="collapse navbar-collapse"
              id="navbarSupportedContent"
            >
              <ul className="navbar-nav mr-auto">
                <li className="nav-item active">
                  <Link className="nav-link" to="/">
                    Home <span className="sr-only">(current)</span>
                  </Link>
                </li>
                <li className="nav-item">
                  <Link className="nav-link" to="/products">
                    Products
                  </Link>
                </li>
                <li className="nav-item">
                  <Link className="nav-link" to="/cart">
                    Cart
                  </Link>
                </li>
              </ul>
              <form className="form-inline my-2 my-lg-2">
                <CartIcon />
              </form>
            </div>
          </div>
        </nav>
      </div>
    );
  }

ActivityPreviewCard = (props) => {
  const {
    showLti,
    shared,
    activity,
    projectId,
    playlistId,
    playlist,
    teamPermission,
  } = props;
  const organization = useSelector((state) => state.organization);

  return (
    <div className="preview-activity-dropdown">
      <Link
        to={
          shared
            ? `/project/${projectId}/playlist/${playlistId}/activity/${activity.id}/preview/shared`
            : showLti
            ? `/playlist/${playlistId}/activity/${activity.id}/preview/lti`
            : `/org/${organization.currentOrganization?.domain}/project/${projectId}/playlist/${playlistId}/activity/${activity.id}/preview`
        }
      >
        <li className="check">
          {activity.thumb_url && (
            <div
              className="bg-thumbnail"
              style={{
                backgroundImage: activity.thumb_url.includes("pexels.com")
                  ? `url(${activity.thumb_url})`
                  : `url(${global.config.resourceUrl}${activity.thumb_url})`,
              }}
            />
          )}
          <div style={{ maxWidth: "253px" }}>
            <div className="title">{activity.title}</div>
          </div>
        </li>
      </Link>
      {!showLti && (
        <DropdownActivity
          resource={activity}
          playlist={playlist}
          teamPermission={teamPermission || {}}
        />
      )}
    </div>
  );
}

LeftNav = ({ onOpenMenuClick, isNavOpen }) => {
  const classes = useStyles();
  const location = useLocation();

  const routes = [
    { title: "Dashboard", icon: (props) => <DashboardIcon {...props} />, url: UrlService.dashboard(), activeRoutes: [UrlService.dashboard()] },
    {
      title: "Deployments",
      icon: (props) => <CloudIcon {...props} />,
      url: UrlService.deploymentList(),
      activeRoutes: [UrlService.deploymentList(), "/deployment"]
    },
    { title: "Templates", icon: (props) => <CollectionsIcon {...props} />, url: UrlService.templates(), activeRoutes: [UrlService.templates()] },
    { title: "Providers", icon: (props) => <DnsIcon {...props} />, url: UrlService.providers(), activeRoutes: [UrlService.providers()] },
    { title: "Settings", icon: (props) => <SettingsIcon {...props} />, url: UrlService.settings(), activeRoutes: [UrlService.settings()] }
  ];

  return (
    <div className={classes.root} style={{ width: isNavOpen ? drawerWidth : closedDrawerWidth }}>
      <List className={classes.list}>
        <ListItem>
          <ListItemIcon className={classes.closedListItemIcon}>
            <IconButton size="small" onClick={onOpenMenuClick} className={classes.toggleButton}>
              {isNavOpen ? <MenuOpenIcon /> : <MenuIcon />}
            </IconButton>
          </ListItemIcon>

          <ListItemText
            primary={
              <Button size="small" variant="contained" color="primary" fullWidth component={Link} to="/createDeployment" className={classes.deployButton}>
                Deploy
              </Button>
            }
            primaryTypographyProps={{
              component: "div",
              className: classes.deployButtonContainer,
              style: { opacity: isNavOpen ? 1 : 0, flex: 1 }
            }}
          />
        </ListItem>

        {routes.map((route) => {
          const isSelected = route.url === UrlService.dashboard() ? location.pathname === "/" : route.activeRoutes.some((x) => location.pathname.startsWith(x));
          const listItemIcon = (
            <ListItemIcon color="primary" className={classes.closedListItemIcon}>
              {route.icon({ color: isSelected ? "primary" : "disabled" })}
            </ListItemIcon>
          );

          return (
            <ListItem button key={route.title} component={Link} to={route.url} selected={isSelected}>
              {isNavOpen ? (
                listItemIcon
              ) : (
                <Tooltip classes={{ tooltip: classes.tooltip }} arrow title={route.title} placement="right">
                  {listItemIcon}
                </Tooltip>
              )}

              <ListItemText
                primary={route.title}
                primaryTypographyProps={{
                  className: clsx(classes.listText, { [classes.selected]: isSelected, [classes.notSelected]: !isSelected }),
                  style: { opacity: isNavOpen ? 1 : 0 }
                }}
              />
            </ListItem>
          );
        })}
      </List>
    </div>
  );
}

EventCard = (props) => {
  const { event } = props;

  const { t } = useTranslation();
  const style = Style();

  const decodedName = decodeText(event.name);
  const decodedDescription = decodeText(event.description);

  return (
    <Card>
      <CardActionArea
        component={Link}
        to={event._id ? `/events/${event._id}` : '/events'}
        disabled={!event._id}
      >
        <CardMedia
          component="img"
          src={
            event.coverPhoto
              ? `${event.coverPhoto}`
              : '../../../event-placeholder.jpeg'
          }
          alt={decodedName}
          height="140"
          title={decodedName}
        />
        <CardContent>
          <div className={style.alignCenterVertically}>
            <Typography
              gutterBottom
              className={`${style.minWidth} ${style.breakWord}`}
              variant="h5"
              component="h3"
            >
              {decodedName.length < 20
                ? decodedName
                : `${decodedName.substring(0, 19)}...`}
            </Typography>
            <div className={style.grow} />
            <AvatarGroup max={3} style={{ zIndex: 0 }}>
              {event.relatedInterests.map((interest) => (
                <Avatar
                  key={interest._id}
                  src={interest.avatar}
                  alt={t(`interestsList.${interest.name}`)}
                  title={t(`interestsList.${interest.name}`)}
                />
              ))}
            </AvatarGroup>
          </div>
          <Typography
            className={style.breakWord}
            variant="body1"
            color="textSecondary"
          >
            {decodedDescription.length < 140
              ? decodedDescription
              : `${decodedDescription.substring(0, 139)}...`}
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  );
}

Login = () => {

    return (

        <div>
            <LoginNavbar />
      <div class = "login-select">
            <CardDeck>
    <Card>

      <Card.Body>
        <Card.Title>Login for...</Card.Title>
        <Card.Text>
          <h3>Doctor</h3>
        </Card.Text>
          <Link to="/LoginDoctor">
        <Button variant="primary" type="submit">
          Login
          </Button>
            </Link>
      </Card.Body>
      <Card.Footer>
        <small className="text-muted">Are you here to help?</small>
      </Card.Footer>
    </Card>
    <Card>


      <Card.Body>
        <Card.Title>Login for...</Card.Title>
        <Card.Text>
          <h3>Patient</h3>
        </Card.Text>
            <Link to="/LoginPatient">
        <Button variant="primary" type="submit">
          Login
          </Button>
            </Link>
      </Card.Body>
      <Card.Footer>
        <small className="text-muted">Are you here to seek help?</small>
      </Card.Footer>
    </Card>
</CardDeck>

</div>

<Footer />
        </div>
    );
}