diff --git a/src/components/icons/BaseIconWrapper.tsx b/src/components/icons/BaseIconWrapper.tsx new file mode 100644 index 0000000..7df36a2 --- /dev/null +++ b/src/components/icons/BaseIconWrapper.tsx @@ -0,0 +1,33 @@ +import React, { FC, ReactNode } from "react"; + +export interface IconProps { + className?: string; + color?: string; + size?: number | string; + screenReaderText?: string; + children: ReactNode; +} + +export const IconWrapper: FC = ({ + children, + className = "", + color = "currentColor", + size = "1em", + screenReaderText, +}) => { + // You can use inline styles or Tailwind classes here. + const style: React.CSSProperties = { + color, + fontSize: size, + display: "inline-flex", + alignItems: "center", + justifyContent: "center", + }; + + return ( + + {children} + {screenReaderText && {screenReaderText}} + + ); +}; diff --git a/src/components/icons/IconArrowReturn.tsx b/src/components/icons/IconArrowReturn.tsx new file mode 100644 index 0000000..e56326e --- /dev/null +++ b/src/components/icons/IconArrowReturn.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { IconProps } from "./BaseIconWrapper"; +import { IconWrapper } from "./BaseIconWrapper"; + +type IconArrowReturnProps = Omit; + +const IconArrowReturn = React.forwardRef( + ({ className, color, screenReaderText, size, ...props }, ref) => { + return ( + + + + + + ); + }, +); + +IconArrowReturn.displayName = "IconArrowReturn"; +export default IconArrowReturn; diff --git a/src/components/icons/IconCollapse.tsx b/src/components/icons/IconCollapse.tsx new file mode 100644 index 0000000..af00214 --- /dev/null +++ b/src/components/icons/IconCollapse.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { IconProps } from "./BaseIconWrapper"; +import { IconWrapper } from "./BaseIconWrapper"; + +type IconCollapseProps = Omit; + +const IconCollapse = React.forwardRef( + ({ className, color, screenReaderText, size, ...props }, ref) => { + return ( + + + + + + ); + }, +); + +IconCollapse.displayName = "IconCollapse"; +export default IconCollapse; diff --git a/src/components/icons/IconExpand.tsx b/src/components/icons/IconExpand.tsx new file mode 100644 index 0000000..66bcd96 --- /dev/null +++ b/src/components/icons/IconExpand.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { IconProps } from "./BaseIconWrapper"; +import { IconWrapper } from "./BaseIconWrapper"; + +type IconExpandProps = Omit; + +const IconExpand = React.forwardRef( + ({ className, color, screenReaderText, size, ...props }, ref) => { + return ( + + + + + + ); + }, +); + +IconExpand.displayName = "IconExpand"; +export default IconExpand; diff --git a/src/components/icons/IconFilePdf.tsx b/src/components/icons/IconFilePdf.tsx new file mode 100644 index 0000000..53393da --- /dev/null +++ b/src/components/icons/IconFilePdf.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import { IconProps } from "./BaseIconWrapper"; +import { IconWrapper } from "./BaseIconWrapper"; + +type IconFilePdfProps = Omit; + +const IconFilePdf = React.forwardRef( + ({ className, color, screenReaderText, size, ...props }, ref) => { + return ( + + + + + + + + + + + + + + + ); + }, +); + +IconFilePdf.displayName = "IconFilePdf"; +export default IconFilePdf; diff --git a/src/components/icons/IconLayouts.tsx b/src/components/icons/IconLayouts.tsx new file mode 100644 index 0000000..7931fea --- /dev/null +++ b/src/components/icons/IconLayouts.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { IconProps } from "./BaseIconWrapper"; +import { IconWrapper } from "./BaseIconWrapper"; + +type IconLayoutsProps = Omit; + +const IconLayouts = React.forwardRef( + ({ className, color, screenReaderText, size, ...props }, ref) => { + return ( + + + + + + + + ); + }, +); + +IconLayouts.displayName = "IconLayouts"; +export default IconLayouts; diff --git a/src/components/icons/IconProjectScheme.tsx b/src/components/icons/IconProjectScheme.tsx new file mode 100644 index 0000000..30ae853 --- /dev/null +++ b/src/components/icons/IconProjectScheme.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { IconProps } from "./BaseIconWrapper"; +import { IconWrapper } from "./BaseIconWrapper"; + +type IconProjectSchemeProps = Omit; + +const IconProjectScheme = React.forwardRef( + ({ className, color, screenReaderText, size, ...props }, ref) => { + return ( + + + + + + ); + }, +); + +IconProjectScheme.displayName = "IconProjectScheme"; +export default IconProjectScheme; diff --git a/src/components/icons/IconSchemeConnected.tsx b/src/components/icons/IconSchemeConnected.tsx new file mode 100644 index 0000000..fd52b99 --- /dev/null +++ b/src/components/icons/IconSchemeConnected.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { IconProps } from "./BaseIconWrapper"; +import { IconWrapper } from "./BaseIconWrapper"; + +type IconSchemeConnectedProps = Omit; + +const IconSchemeConnected = React.forwardRef( + ({ className, color, screenReaderText, size, ...props }, ref) => { + return ( + + + + + + ); + }, +); + +IconSchemeConnected.displayName = "IconSchemeConnected"; +export default IconSchemeConnected; diff --git a/src/components/icons/IconSeparate.tsx b/src/components/icons/IconSeparate.tsx new file mode 100644 index 0000000..48e1cef --- /dev/null +++ b/src/components/icons/IconSeparate.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { IconProps } from "./BaseIconWrapper"; +import { IconWrapper } from "./BaseIconWrapper"; + +type IconSeparateProps = Omit; + +const IconSeparate = React.forwardRef( + ({ className, color, screenReaderText, size, ...props }, ref) => { + return ( + + + + + + ); + }, +); + +IconSeparate.displayName = "IconSeparate"; +export default IconSeparate; diff --git a/src/components/icons/IconStagingScheme.tsx b/src/components/icons/IconStagingScheme.tsx new file mode 100644 index 0000000..5e0afc0 --- /dev/null +++ b/src/components/icons/IconStagingScheme.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { IconProps } from "./BaseIconWrapper"; +import { IconWrapper } from "./BaseIconWrapper"; + +type IconStagingSchemeProps = Omit; + +const IconStagingScheme = React.forwardRef( + ({ className, color, screenReaderText, size, ...props }, ref) => { + return ( + + + + + + ); + }, +); + +IconStagingScheme.displayName = "IconStagingScheme"; +export default IconStagingScheme; diff --git a/src/index.css b/src/index.css index e0248fe..18b2c09 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,17 @@ @import "tailwindcss"; +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; @@ -64,7 +76,9 @@ button { position: absolute; width: 8px; height: 8px; - background: #5b4ff5; + border: 1px solid #5b4ff5; + border-radius: 50%; + background: white; } .custom-handle.left {