My personal website
renderg.host
1import React from 'react';
2import { useNavigate } from 'react-router-dom';
3import * as styles from './Logo.styles';
4import { ARIA_LABEL, LOGO_ARIA_LABEL, RECT_DIMENSIONS, STROKE_WIDTH, SVG_VIEWBOX } from './Logo.constants';
5
6const Logo: React.FC = () => {
7 const navigate = useNavigate();
8
9 return (
10 <button onClick={() => navigate('/')} aria-label={ARIA_LABEL} className={styles.button}>
11 {/* Placeholder Square Logo */}
12 <div className={styles.iconContainer}>
13 <svg
14 xmlns="http://www.w3.org/2000/svg"
15 viewBox={SVG_VIEWBOX}
16 fill="none"
17 stroke="currentColor"
18 strokeWidth={STROKE_WIDTH}
19 className={styles.svg}
20 role="img"
21 aria-label={LOGO_ARIA_LABEL}
22 >
23 <rect x={RECT_DIMENSIONS.x} y={RECT_DIMENSIONS.y} width={RECT_DIMENSIONS.width} height={RECT_DIMENSIONS.height} />
24 </svg>
25 </div>
26 </button>
27 );
28};
29
30export default Logo;