f07dc0384f
* initial implementation of search modal * added hit and search suggestions * added support for multiple indices * updated sample env * added close when click outside dropdown * test for mobile * added mobile design * added shortcut * dark mode fixes * added search to docs * added plugins filter * added React import * moved filters to configurations * handled error on page load * change suggestion text * removed hits limit * handle select all * open link in current tab * change highlight colors * added support for shortcuts + auto focus * change header and footer * redesigned search ui
57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import React from "react"
|
|
import clsx from "clsx"
|
|
import Bordered from "../Bordered/index"
|
|
import IconProps from "../Icons/types"
|
|
import { useColorMode } from "../../providers/color-mode"
|
|
import Image from "next/image"
|
|
|
|
type BorderedIconProp = {
|
|
icon?: {
|
|
light: string
|
|
dark?: string
|
|
}
|
|
IconComponent?: React.FC<IconProps>
|
|
wrapperClassName?: string
|
|
iconWrapperClassName?: string
|
|
iconClassName?: string
|
|
iconColorClassName?: string
|
|
} & React.HTMLAttributes<HTMLSpanElement>
|
|
|
|
const BorderedIcon: React.FC<BorderedIconProp> = ({
|
|
icon = null,
|
|
IconComponent = null,
|
|
wrapperClassName,
|
|
iconWrapperClassName,
|
|
iconClassName,
|
|
iconColorClassName = "",
|
|
}) => {
|
|
const { colorMode } = useColorMode()
|
|
|
|
return (
|
|
<Bordered wrapperClassName={wrapperClassName}>
|
|
<span
|
|
className={clsx(
|
|
"rounded-xs p-0.125 bg-medusa-bg-component dark:bg-medusa-bg-component-dark inline-flex items-center justify-center",
|
|
iconWrapperClassName
|
|
)}
|
|
>
|
|
{!IconComponent && (
|
|
<Image
|
|
src={(colorMode === "light" ? icon?.light : icon?.dark) || ""}
|
|
className={clsx(iconClassName, "bordered-icon")}
|
|
alt=""
|
|
/>
|
|
)}
|
|
{IconComponent && (
|
|
<IconComponent
|
|
className={clsx(iconClassName, "bordered-icon")}
|
|
iconColorClassName={iconColorClassName}
|
|
/>
|
|
)}
|
|
</span>
|
|
</Bordered>
|
|
)
|
|
}
|
|
|
|
export default BorderedIcon
|