53 行
1.3 KiB
TypeScript
53 行
1.3 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
|
|
import nikumaru from '@/assets/fonts/nikumaru.otf'
|
|
import { translateUIMessage } from '@/lib/i18n'
|
|
|
|
import type { FC } from 'react'
|
|
|
|
|
|
const ROW_COUNT = 8
|
|
const COLUMN_COUNT = 12
|
|
|
|
|
|
const DevModeWatermark: FC = () => {
|
|
const { i18n } = useTranslation ('shared')
|
|
const text = translateUIMessage ('labels.development', 'shared', i18n.language)
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none select-none fixed inset-0 overflow-hidden z-0">
|
|
<style>{`
|
|
@font-face {
|
|
font-family: 'Nikumaru';
|
|
src: url(${nikumaru}) format('opentype');
|
|
}
|
|
`}</style>
|
|
<div className="absolute -inset-32 flex flex-col justify-center gap-12 py-48">
|
|
{Array.from ({ length: ROW_COUNT }, (_, rowIndex) => (
|
|
<div
|
|
key={rowIndex}
|
|
className={
|
|
'flex min-h-32 items-center gap-12 '
|
|
+ (rowIndex % 2 === 0 ? 'translate-x-0' : 'translate-x-32')
|
|
}>
|
|
{Array.from ({ length: COLUMN_COUNT }, (_, columnIndex) => (
|
|
<span
|
|
key={columnIndex}
|
|
lang={text.language}
|
|
className={
|
|
'whitespace-nowrap text-3xl font-bold '
|
|
+ 'tracking-[0.3em] text-neutral-950/5 '
|
|
+ 'dark:text-white/10'
|
|
}
|
|
style={{ fontFamily: 'Nikumaru' }}>
|
|
{text.text}
|
|
</span>))}
|
|
</div>))}
|
|
</div>
|
|
</div>)
|
|
}
|
|
|
|
|
|
export default DevModeWatermark
|