v4.amy.rip/src/components/oomfs.tsx

import './oomfs.css';

export interface Oomf {
    name: string;
    discordId: string;
    link?: string;
}

export const oomfs: Oomf[] = [
    {
        discordId: '435026627907420161',
        link: 'https://yellows.ink',
        name: 'hazel'
    },
    {
        discordId: '148801388938264576',
        link: 'https://nax.dev',
        name: 'nax'
    },
    {
        discordId: '406028027768733696',
        name: 'sunnie'
    },
    {
        discordId: '487788215177314307',
        link: 'https://leahs.gay',
        name: 'leah'
    },
    {
        discordId: '277830029399031818',
        name: 'neomi'
    },
    {
        discordId: '1079479184478441643',
        name: 'rini'
    },
    {
        discordId: '352837489125228546',
        name: 'tasky'
    },
];

export default function SingularOomf(props: Oomf) {

    const image = <img
        on:contextmenu={(e) => {
            e.preventDefault();
            e.currentTarget.animate(
                [
                    { transform: 'translateY(0px)' },
                    { transform: 'translateY(-10px)' },
                    { transform: 'translateY(0px)' },
                ],
                {
                    duration: 1000,
                    easing: 'ease-in-out',
                    iterations: 2
                }
            );
        }}
        class="singularoomf" src={`https://dp.nea.moe/avatar/${props.discordId}.png`} alt={`pfp of ${props.name}`} />;

    return props.link ? <a class="aoomf" href={props.link} target="_blank">{image}</a> : image;
}