54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import React, { HTMLProps, useMemo, useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useGetMetaQuery, useGetSessionQuery } from '../services/session';
|
|
import { CHANGELOG_URL } from '../const';
|
|
import { createGacha } from '../../common/functions/create-gacha';
|
|
|
|
export type HeaderProps = {
|
|
hasTopLink?: boolean;
|
|
className?: HTMLProps<HTMLElement>['className'],
|
|
style?: HTMLProps<HTMLElement>['style'],
|
|
};
|
|
|
|
export const Header: React.FC<HeaderProps> = ({hasTopLink, children, className, style}) => {
|
|
const {data: meta} = useGetMetaQuery(undefined);
|
|
const {data: session} = useGetSessionQuery(undefined);
|
|
const { t } = useTranslation();
|
|
const [generation, setGeneration] = useState(0);
|
|
const gacha = useMemo(() => createGacha(), [generation]);
|
|
|
|
|
|
|
|
return (
|
|
<header className={`card ${className ?? ''}`} style={style}>
|
|
<div className="body">
|
|
<h1 className="text-primary mb-0" style={{ fontSize: '2rem' }}>
|
|
{hasTopLink ? <Link to="/">{t('title')}</Link> : t('title')}
|
|
{meta && (
|
|
<a href={CHANGELOG_URL} target="_blank" rel="noopener noreferrer" className="text-125 text-dimmed ml-1">
|
|
v{meta?.version}
|
|
</a>
|
|
)}
|
|
</h1>
|
|
<h2 className="text-dimmed">
|
|
<button onClick={() => setGeneration(g => g + 1)} className="text-primary">
|
|
<i className="bi bi-dice-5-fill" />
|
|
</button>
|
|
{gacha}
|
|
{session && (
|
|
<a
|
|
href={`https://${session.host}/share?text=${encodeURIComponent(`${gacha} https://misskey.tools`)}`}
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
className="ml-1">
|
|
<i className="bi bi-share-fill" />
|
|
</a>
|
|
)}
|
|
</h2>
|
|
{children}
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|