v3/packages/design-system/molecules/demo-discord/DemoDiscord.tsx

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 (
        <Base>
            <Timestamp>
                {time.getHours() % 12}:{timeString.slice(3, 5)}&nbsp;
                {time.getHours() <= 12 ? 'AM' : 'PM'}
            </Timestamp>
            <Username onClick={() => setEasterEggCount(easterEggCount + 1)}>
                okano&nbsp;cat
            </Username>
            <TextParts>
                {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!`}
            </TextParts>
            <InputBox>
                <InputTextAlignment>
                    &nbsp;
                    <Typist
                        resetTimeout={2000}
                        charTimeout={75}
                        lines={demoData.map((role) => `.iam ${role.name}`)}
                    />
                    <Line />
                </InputTextAlignment>
            </InputBox>
        </Base>
    );
};