Files
medusa-store/www/docs/src/components/BorderedIcon/index.tsx
Shahed Nasser 94907730d2 docs: refactor to use TypeScript, ESLint, and Tailwind CSS (#4136)
* docs(refactoring): configured eslint and typescript (#3511)

* docs: configured eslint and typescript

* fixed yarn.lock

* docs(refactoring): migrate components directory to typescript (#3517)

* docs: migrate components directory to typescript

* removed vscode settings

* fix following merge

* docs: refactored QueryNote component (#3576)

* docs: refactored first batch of theme components (#3579)

* docs: refactored second batch of theme components (#3580)

* added missing badge styles

* fix after merge

* docs(refactoring): migrated remaining component to TypeScript (#3770)

* docs(refactoring): configured eslint and typescript (#3511)

* docs: configured eslint and typescript

* fixed yarn.lock

* docs(refactoring): migrate components directory to typescript (#3517)

* docs: migrate components directory to typescript

* removed vscode settings

* fix following merge

* docs: refactored QueryNote component (#3576)

* docs: refactored first batch of theme components (#3579)

* docs: refactored second batch of theme components (#3580)

* added missing badge styles

* docs: refactoring second batch of theme components

* fix after merge

* refactored icons and other components

* docs: refactored all components

* docs(refactoring): set up and configured Tailwind Css (#3841)

* docs: added tailwind config

* docs: added more tailwind configurations

* add includes option

* added more tailwind configurations

* fix to configurations

* docs(refactoring): use tailwind css (#4134)

* docs: added tailwind config

* docs: added more tailwind configurations

* add includes option

* added more tailwind configurations

* fix to configurations

* docs(refactoring): refactored all styles to use tailwind css (#4132)

* refactored Badge component to use tailwind css

* refactored Bordered component to use tailwind css

* updated to latest docusaurus

* refactored BorderedIcon component to use tailwind css

* refactored Feedback component to use tailwind css

* refactored icons and footersociallinks to tailwind css

* start refactoring of large card

* refactored large card styling

* refactored until admonitions

* refactored until codeblock

* refactored until Tabs

* refactored Tabs (without testing

* finished refactoring styles to tailwind css

* upgraded to version 2.4.1

* general fixes

* adjusted eslint configurations

* fixed ignore files

* fixes to large card

* fix search styling

* fix npx command

* updated tabs to use isCodeTabs prop

* fixed os tabs

* removed os-tabs class in favor of general styling

* improvements to buttons

* fix for searchbar

* fixed redocly download button

* chore: added eslint code action (#4135)

* small change in commerce modules page
2023-05-19 14:56:48 +03:00

56 lines
1.4 KiB
TypeScript

import React from "react"
import ThemedImage from "@theme/ThemedImage"
import clsx from "clsx"
import Bordered from "../Bordered/index"
import { IconProps } from "@site/src/theme/Icon/index"
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 = "",
}) => {
return (
<Bordered wrapperClassName={wrapperClassName}>
<span
className={clsx(
"tw-inline-flex tw-justify-center tw-items-center tw-rounded-sm tw-p-[2px] tw-bg-medusa-bg-component dark:tw-bg-medusa-bg-component-dark",
iconWrapperClassName
)}
>
{!IconComponent && (
<ThemedImage
sources={{
light: icon.light,
dark: icon.dark || icon.light,
}}
className={clsx(iconClassName, "bordered-icon")}
/>
)}
{IconComponent && (
<IconComponent
className={clsx(iconClassName, "bordered-icon")}
iconColorClassName={iconColorClassName}
/>
)}
</span>
</Bordered>
)
}
export default BorderedIcon