import { Typist } from '@roleypoly/design-system/atoms/typist'; import { demoData } from '@roleypoly/types/demoData'; import * as React from 'react'; import { Base, InputBox, InputTextAlignment, Line, TextParts, Timestamp, Username, } from './DemoDiscord.styled'; export const DemoDiscord = () => { const time = new Date(); const timeString = time.toTimeString(); const [easterEggCount, setEasterEggCount] = React.useState(0); return ( {time.getHours() % 12}:{timeString.slice(3, 5)}  {time.getHours() <= 12 ? 'AM' : 'PM'} setEasterEggCount(easterEggCount + 1)}> okano cat {easterEggCount >= 15 ? `NYAAAAAAA${'A'.repeat(easterEggCount - 15)}` : easterEggCount >= 11 ? `I'm.. I'm gonna...` : easterEggCount >= 10 ? `S-senpai... Be careful...` : easterEggCount >= 5 ? `H-hey... Stop that..` : `Hey, I'd like some roles!`}   `.iam ${role.name}`)} /> ); };