diff --git a/apps/happin-web/alltypes.d.ts b/apps/happin-web/alltypes.d.ts index 384fc808..1bcc6447 100644 --- a/apps/happin-web/alltypes.d.ts +++ b/apps/happin-web/alltypes.d.ts @@ -1,3 +1,32 @@ declare module 'react-plx' declare module 'tim-js-sdk' declare module 'randomcolor' + +/** + * if you are using React JSX with typescript + * e.g. + * + * include below type declaration in your project (don't forget to import React from 'react') + * + */ +declare global { + interface IconParkIconAttributes extends React.HTMLAttributes { + // 包含打包的图标id + 'icon-id'?: string; + // 包含打包的图标标识 + name?: string; + size?: string; + width?: string; + height?: string; + color?: string; + stroke?: string; + fill?: string; + rtl?: string; + spin?: string; + } + namespace JSX { + interface IntrinsicElements { + 'iconpark-icon': React.DetailedHTMLProps, HTMLElement>; + } + } +} diff --git a/apps/happin-web/components/Header.tsx b/apps/happin-web/components/Header.tsx index 8f0a2537..c6be3044 100644 --- a/apps/happin-web/components/Header.tsx +++ b/apps/happin-web/components/Header.tsx @@ -3,13 +3,13 @@ import Link from 'next/link'; import { useRouter } from 'next/router' import { Avatar, HStack, useToast } from '@chakra-ui/react'; import { SearchIcon } from "@chakra-ui/icons"; -import { DownTwo, HamburgerButton, International, More, Search } from '@icon-park/react'; import { Menu, Transition } from '@headlessui/react' import classNames from 'classnames'; import { useSSOState } from 'contexts/sso-state'; import { useUserState } from 'contexts/user-state'; import { exchangeDashboardEventHostToken } from 'lib/api'; import classnames from 'classnames'; +import IconPark from '@components/IconPark'; export default function Header({ children, checkingWhiteLable, whiteLabelLogo, whiteLabelHome }: { children?: any, checkingWhiteLable: any, whiteLabelLogo: any, whiteLabelHome: any }) { const { user, clearUser } = useUserState(); @@ -110,7 +110,7 @@ export default function Header({ children, checkingWhiteLable, whiteLabelLogo, w {({ open }) => ( <> - + ( <> - + {!user && } {user && } @@ -196,13 +196,13 @@ export default function Header({ children, checkingWhiteLable, whiteLabelLogo, w
- + Organizer Dashboard { window.location.href = process.env.NEXT_PUBLIC_HAPPIN_APP_APPLE_STORE as string}}> - + Download App diff --git a/apps/happin-web/components/IconPark.tsx b/apps/happin-web/components/IconPark.tsx new file mode 100644 index 00000000..08b39c58 --- /dev/null +++ b/apps/happin-web/components/IconPark.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import Script from 'next/script'; + +type IconParkProps = { + 'icon-id'?: string; + name: + | 'international' + | 'down-two' + | 'down-two-thin' + | 'hamburger-button' + | 'more' + | 'search' + | 'delete' + | 'left' + | 'check' + | 'right' + | 'like' + | 'share-two' + | 'share-two-thin' + | 'play-one' + | 'grinning-face-with-open-mouth' + | 'minus' + | 'plus' + | 'down' + | 'arrow-right' + | 'help' + | 'lightning' + | 'lightning-filled' + | 'stopwatch' + | 'switch' + | 'cosmetic-brush' + | 'up' + | 'close-small' + | 'close-small-thin' + | 'like-filled' + | 'like-thin'; + size?: string | number; + width?: string; + height?: string; + color?: string; + stroke?: string; + fill?: string; + rtl?: string; + spin?: string; + className?: string; + style?: CSSStyleDeclaration; +}; +const IconPark = (props: IconParkProps) => { + const { name, color = 'currentColor' } = props; + return ( + <> +