resources/js/components/pages/Front.js

   1 import React from 'react';
   2 import { Button, Col, Container, Image, Row } from 'react-bootstrap';
   3 import { useNavigate } from 'react-router-dom';
   4
   5 const Front = () => {
   6         const navigate = useNavigate();
   7
   8         return <Container className="mt-5">
   9                 <Row>
  10                         <Col md={6}>
  11                                 <Button
  12                                         className="front-panel"
  13                                         onClick={() => navigate('/tournaments/6')}
  14                                         variant="outline-secondary"
  15                                 >
  16                                         <Image alt="" className="image" src="/media/alttp/front.png" />
  17                                         <div className="title">
  18                                                 ALttPR Weekly
  19                                         </div>
  20                                 </Button>
  21                         </Col>
  22                         <Col md={6}>
  23                                 <Button
  24                                         className="front-panel"
  25                                         onClick={() => navigate('/tournaments/5')}
  26                                         variant="outline-secondary"
  27                                 >
  28                                         <Image alt="" className="image" src="/media/sm/front.png" />
  29                                         <div className="title">
  30                                                 Super Metroid
  31                                         </div>
  32                                 </Button>
  33                         </Col>
  34                 </Row>
  35         </Container>;
  36 };
  37
  38 export default Front;