67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import {useTranslation} from 'next-i18next';
|
|
import {serverSideTranslations} from 'next-i18next/serverSideTranslations';
|
|
|
|
import React, {useEffect, useState} from "react";
|
|
import QRCode from "react-qr-code";
|
|
|
|
import Alert from '../components/Alert';
|
|
import Card from '../components/Card';
|
|
import Logo from "../components/Logo";
|
|
|
|
function Pass(): JSX.Element {
|
|
const { t } = useTranslation(['common', 'index']);
|
|
|
|
const [fragment, setFragment] = useState<string>(undefined);
|
|
const [view, setView] = useState<boolean>(true);
|
|
|
|
useEffect(() => {
|
|
const rawFragment = window.location.hash.substring(1);
|
|
|
|
if (!rawFragment) {
|
|
setView(false);
|
|
}
|
|
|
|
const resizeTimeout = window.setTimeout(() => {
|
|
if (rawFragment) {
|
|
window.location.replace('/pass/note');
|
|
}
|
|
}, 100);
|
|
|
|
window.addEventListener('resize', () => {
|
|
clearTimeout(resizeTimeout);
|
|
const decodedFragment = Buffer.from(rawFragment, 'base64').toString();
|
|
setFragment(decodedFragment);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="py-5 flex flex-col space-y-5 md:w-2/3 xl:w-2/5 md:mx-auto items-center justify-center px-5">
|
|
<Logo/>
|
|
<div className="flex flex-row items-center">
|
|
{
|
|
fragment &&
|
|
<Card content={
|
|
<div className="p-2 bg-white rounded-md">
|
|
<QRCode value={fragment} size={280} level="L" />
|
|
</div>
|
|
} />
|
|
}
|
|
{
|
|
!view &&
|
|
<Alert isWarning={true} message={t('index:viewerNote')} onClose={undefined} />
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export async function getStaticProps({ locale }) {
|
|
return {
|
|
props: {
|
|
...(await serverSideTranslations(locale, ['index', 'common'])),
|
|
},
|
|
};
|
|
}
|
|
|
|
export default Pass;
|