@helpwave/hightide/dist/components/Profile.mjs.map

helpwave's component and theming library

{"version":3,"sources":["../../src/components/Profile.tsx","../../src/components/icons/Helpwave.tsx","../../src/components/ChipList.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport clsx from 'clsx'\nimport Image from 'next/image'\nimport Link from 'next/link'\nimport { Github, Globe, Linkedin, Mail } from 'lucide-react'\nimport { Helpwave } from './icons/Helpwave'\nimport { Chip } from './ChipList'\n\ntype SocialType = 'mail' | 'github' | 'linkedin' | 'website' | 'medium'\n\nexport type SocialIconProps = {\n  type: SocialType,\n  url: string,\n  size?: number,\n}\n\n/**\n * A Component for showing a lin\n */\nconst SocialIcon = ({ type, url, size = 24 }: SocialIconProps) => {\n  let icon: ReactNode\n  switch (type) {\n    case 'mail':\n      icon = <Mail size={size}/>\n      break\n    case 'linkedin':\n      // TODO find an alternative icon\n      icon = <Linkedin size={size}/>\n      break\n    case 'github':\n      // TODO find an alternative icon\n      icon = <Github size={size}/>\n      break\n    case 'website':\n      icon = <Globe size={size}/>\n      break\n    case 'medium':\n      icon = <Globe size={size}/> // TODO find an appropriate medium svg\n      break\n    default:\n      icon = <Helpwave size={24}/>\n  }\n  return (\n    <Link href={url} target=\"_blank\">\n      <Chip color=\"dark\" className=\"!p-2\">\n        {icon}\n      </Chip>\n    </Link>\n  )\n}\n\nexport type ProfileProps = HTMLAttributes<HTMLDivElement> & {\n  name: string,\n  imageUrl: string,\n  badge?: ReactNode,\n  prefix?: string,\n  suffix?: string,\n  roleBadge?: string,\n  role?: string,\n  /**\n   * The list of tags for the\n   */\n  tags?: string[],\n  info?: string,\n  socials?: SocialIconProps[],\n  imageClassName?: string,\n}\n\n\n// TODO add colors for dark-mode\n/**\n * A Component for showing a Profile\n */\nexport const Profile = ({\n  name,\n  imageUrl,\n  badge,\n  prefix,\n  suffix,\n  roleBadge,\n  role,\n  tags,\n  info,\n  socials,\n  className,\n  imageClassName,\n  ...divProps\n}: ProfileProps) => {\n  return (\n    <div\n      {...divProps}\n      className={clsx(`col items-center text-center rounded-3xl p-3 pb-4 bg-white text-gray-900 w-min shadow-around-lg`, className)}\n    >\n      <div className=\"relative mb-6\">\n        <div className={clsx('relative rounded-xl row items-center justify-center overflow-hidden', imageClassName)}>\n          <Image src={imageUrl} alt=\"\" className={clsx('z-[2] object-cover', imageClassName)} width={0} height={0} style={{ width: 'auto', height: 'auto' }}/>\n        </div>\n        <div className=\"absolute top-[6px] left-[6px] z-[3]\">{badge}</div>\n        {roleBadge && (\n          <div className=\"absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-2/3 z-[4] rounded-md\">\n            <Chip color=\"dark\" className=\"font-bold px-3\">{roleBadge}</Chip>\n          </div>\n        )}\n      </div>\n      {prefix && <span className=\"font-semibold\">{prefix}</span>}\n      <h2 id={name} className=\"textstyle-title-md\">{name}</h2>\n      {suffix && <span className=\"text-sm mb-1\">{suffix}</span>}\n      {role && <span className=\"font-space font-bold text-sm\">{role}</span>}\n      {tags && (\n        <div className=\"flex flex-wrap mx-4 mt-2 gap-x-2 justify-center\">\n          {tags.map((tag, index) => <span key={index} className=\"textstyle-description text-sm\">{`#${tag}`}</span>)}\n        </div>\n      )}\n      {info && <span className=\"mt-2 text-sm\">{info}</span>}\n      {socials && (\n        <div className=\"flex flex-wrap grow items-end justify-center gap-x-4 gap-y-2 mt-4\">\n          {socials.map((socialIconProps, index) => (\n            <SocialIcon key={index} {...socialIconProps} size={socialIconProps.size ?? 20}/>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { SVGProps } from 'react'\nimport { clsx } from 'clsx'\n\nexport type HelpwaveProps = SVGProps<SVGSVGElement> & {\n  color?: string,\n  animate?: 'none' | 'loading' | 'pulse' | 'bounce',\n  size?: number,\n}\n\n/**\n * The helpwave loading spinner based on the svg logo.\n */\nexport const Helpwave = ({\n  color = 'currentColor',\n  animate = 'none',\n  size = 64,\n  ...props\n}: HelpwaveProps) => {\n  const isLoadingAnimation = animate === 'loading'\n  let svgAnimationKey = ''\n\n  if (animate === 'pulse') {\n    svgAnimationKey = 'animate-pulse'\n  } else if (animate === 'bounce') {\n    svgAnimationKey = 'animate-bounce'\n  }\n\n  if (size < 0) {\n    console.error('size cannot be less than 0')\n    size = 64\n  }\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 888 888\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeWidth={48}\n      {...props}\n    >\n      <g className={clsx(svgAnimationKey)}>\n        <path className={clsx({ 'animate-wave-big-left-up': isLoadingAnimation })} d=\"M144 543.235C144 423.259 232.164 326 340.92 326\" stroke={color} strokeDasharray=\"1000\" />\n        <path className={clsx({ 'animate-wave-big-right-down': isLoadingAnimation })} d=\"M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869\" stroke={color} strokeDasharray=\"1000\" />\n        <path className={clsx({ 'animate-wave-small-left-up': isLoadingAnimation })} d=\"M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495\" stroke={color} strokeDasharray=\"1000\" />\n        <path className={clsx({ 'animate-wave-small-right-down': isLoadingAnimation })} d=\"M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233\" stroke={color} strokeDasharray=\"1000\" />\n      </g>\n    </svg>\n  )\n}\n","import type { HTMLProps, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\nexport type ChipColor = 'default' | 'dark'| 'red' | 'yellow' | 'green' | 'blue' | 'pink'\ntype ChipVariant = 'normal' | 'fullyRounded'\n\nexport type ChipProps = HTMLProps<HTMLDivElement> & PropsWithChildren<{\n  color?: ChipColor,\n  variant?: ChipVariant,\n  trailingIcon?: ReactNode,\n}>\n\n/**\n * A component for displaying a single chip\n */\nexport const Chip = ({\n                       children,\n                       trailingIcon,\n                       color = 'default',\n                       variant = 'normal',\n                       className = '',\n                       ...restProps\n                     }: ChipProps) => {\n  const colorMapping: string = {\n    default: 'text-tag-default-text bg-tag-default-background',\n    dark: 'text-tag-dark-text bg-tag-dark-background',\n    red: 'text-tag-red-text bg-tag-red-background',\n    yellow: 'text-tag-yellow-text bg-tag-yellow-background',\n    green: 'text-tag-green-text bg-tag-green-background',\n    blue: 'text-tag-blue-text bg-tag-blue-background',\n    pink: 'text-tag-pink-text bg-tag-pink-background',\n  }[color]\n\n  const colorMappingIcon: string = {\n    default: 'text-tag-default-icon',\n    dark: 'text-tag-dark-icon',\n    red: 'text-tag-red-icon',\n    yellow: 'text-tag-yellow-icon',\n    green: 'text-tag-green-icon',\n    blue: 'text-tag-blue-icon',\n    pink: 'text-tag-pink-icon',\n  }[color]\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(\n        `row w-fit px-2 py-1`,\n        colorMapping,\n        {\n          'rounded-md': variant === 'normal',\n          'rounded-full': variant === 'fullyRounded',\n        },\n        className\n      )}\n    >\n      {children}\n      {trailingIcon && (<span className={colorMappingIcon}>{trailingIcon}</span>)}\n    </div>\n  )\n}\n\nexport type ChipListProps = {\n  list: ChipProps[],\n  className?: string,\n}\n\n/**\n * A component for displaying a list of chips\n */\nexport const ChipList = ({\n                           list,\n                           className = ''\n                         }: ChipListProps) => {\n  return (\n    <div className={clsx('flex flex-wrap gap-x-4 gap-y-2', className)}>\n      {list.map((value, index) => (\n        <Chip\n          key={index}\n          {...value}\n          color={value.color ?? 'dark'}\n          variant={value.variant ?? 'normal'}\n        >\n          {value.children}\n        </Chip>\n      ))}\n    </div>\n  )\n}\n"],"mappings":"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","names":["clsx","clsx","jsx","jsxs","jsx","jsxs","clsx"]}