import { useMemo } from 'react' import Image from 'next/image' import classNames from 'clsx' import { ProviderOAuth } from '../../../models/OAuth' export type SocialMedia = ProviderOAuth type SocialMediaColors = { [key in SocialMedia]: string } const socialMediaColors: SocialMediaColors = { Discord: '#404EED', GitHub: '#24292E', Google: '#FCFCFC' } const className = 'py-2 px-6 inline-flex outline-none items-center font-paragraph rounded-lg cursor-pointer transition duration-300 ease-in-out hover:opacity-80 focus:outline-none' interface SocialMediaChildrenProps { socialMedia: SocialMedia } const SocialMediaChildren: React.FC = (props) => { const { socialMedia } = props return ( <> {socialMedia} {socialMedia} ) } export interface SocialMediaButtonProps extends React.ComponentPropsWithRef<'button'>, SocialMediaChildrenProps {} export const SocialMediaButton: React.FC = (props) => { const { socialMedia, className: givenClassName, ...rest } = props const socialMediaColor = useMemo(() => { return socialMediaColors[socialMedia] }, [socialMedia]) return ( <> ) } export interface SocialMediaLinkProps extends React.ComponentPropsWithRef<'a'>, SocialMediaChildrenProps {} export const SocialMediaLink: React.FC = (props) => { const { socialMedia, className: givenClassName, ...rest } = props const socialMediaColor = useMemo(() => { return socialMediaColors[socialMedia] }, [socialMedia]) return ( <> ) }