2021-09-01 20:06:33 +09:00
|
|
|
import React from 'react';
|
|
|
|
|
import { Link } from 'react-router-dom';
|
2021-09-04 11:00:38 +09:00
|
|
|
import { welcomeMessage } from '../misc/welcome-message';
|
2021-09-01 20:06:33 +09:00
|
|
|
|
|
|
|
|
export type HeaderProps = {
|
|
|
|
|
hasTopLink?: boolean;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const Header: React.FC<HeaderProps> = ({hasTopLink, children}) => {
|
|
|
|
|
const message = React.useMemo(
|
|
|
|
|
() => welcomeMessage[Math.floor(Math.random() * welcomeMessage.length)] , []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<header className={'xarticle card shadow-4 mt-5 mb-3'}>
|
|
|
|
|
<div className="body">
|
|
|
|
|
<h1 className="text-primary mb-0" style={{ fontSize: '2rem' }}>
|
|
|
|
|
{hasTopLink ? <Link to="/">みす廃アラート</Link> : 'みす廃アラート'}
|
|
|
|
|
</h1>
|
|
|
|
|
<h2 className="text-dimmed ml-1">{message}</h2>
|
|
|
|
|
{children}
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
);
|
|
|
|
|
};
|
