add icons

kontent-ai · Feb 22, 2025 · 2a2fe32 · 2a2fe32
1 parent 514d123
commit 2a2fe32
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 1 deletion.
diff --git a/src/components/icons/BaseIconWrapper.tsx 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<IconProps> = ({
+  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 (
+    <span className={`icon-wrapper ${className}`} style={style}>
+      {children}
+      {screenReaderText && <span className="sr-only">{screenReaderText}</span>}
+    </span>
+  );
+};
diff --git a/src/components/icons/IconArrowReturn.tsx 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<IconProps, "children">;
+
+const IconArrowReturn = React.forwardRef<SVGSVGElement, IconArrowReturnProps>(
+  ({ className, color, screenReaderText, size, ...props }, ref) => {
+    return (
+      <IconWrapper className={className} color={color} size={size} screenReaderText={screenReaderText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          stroke="currentColor"
+          fill="none"
+          viewBox="0 0 16 16"
+          ref={ref}
+          {...props}
+        >
+          <path
+            fill="currentColor"
+            d="M2 5.68896C2 5.63767 2.00808 5.58823 2.02305 5.54178C2.04625 5.46965 2.08697 5.40172 2.14522 5.34437L5.39522 2.1444C5.5898 1.95281 5.90638 1.95173 6.10232 2.14199C6.29826 2.33224 6.29936 2.64179 6.10478 2.83337L3.70108 5.20007L10.6818 5.20007C13.0524 5.20007 15 7.22856 15 9.60004C15 11.9715 13.0524 14 10.6818 14L2.5 14C2.22386 14 2 13.7811 2 13.5111C2 13.2411 2.22386 13.0222 2.5 13.0222H10.6818C12.4567 13.0222 14 11.4749 14 9.60004C14 7.7252 12.4567 6.17784 10.6818 6.17784H3.70118L6.10478 8.54444C6.29936 8.73603 6.29826 9.04557 6.10232 9.23583C5.90638 9.42608 5.5898 9.425 5.39522 9.23342L2.14522 6.03344C2.09766 5.98662 2.0618 5.93275 2.03761 5.87531C2.01337 5.81787 2 5.75494 2 5.68896Z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+IconArrowReturn.displayName = "IconArrowReturn";
+export default IconArrowReturn;
diff --git a/src/components/icons/IconCollapse.tsx 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<IconProps, "children">;
+
+const IconCollapse = React.forwardRef<SVGSVGElement, IconCollapseProps>(
+  ({ className, color, screenReaderText, size, ...props }, ref) => {
+    return (
+      <IconWrapper className={className} color={color} size={size} screenReaderText={screenReaderText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          stroke="currentColor"
+          fill="none"
+          viewBox="0 0 16 16"
+          ref={ref}
+          {...props}
+        >
+          <path
+            fill="currentColor"
+            d="M5.01228.5C5.01228.223858 4.78842 0 4.51228 0 4.23613 0 4.01227.223858 4.01227.5V3.99609H.501953C.225811 3.99609.00195312 4.21994.00195312 4.49609.00195312 4.77223.225811 4.99609.501953 4.99609H4.51228C4.78842 4.99609 5.01228 4.77223 5.01228 4.49609V.5ZM11.9912.5C11.9912.223858 11.7674 0 11.4912 0 11.2151 0 10.9912.223858 10.9912.5V4.49609C10.9912 4.77223 11.2151 4.99609 11.4912 4.99609H15.4956C15.7717 4.99609 15.9956 4.77223 15.9956 4.49609 15.9956 4.21994 15.7717 3.99609 15.4956 3.99609H11.9912V.5ZM10.9971 11.4888C10.9971 11.2126 11.2209 10.9888 11.4971 10.9888H15.4996C15.7757 10.9888 15.9996 11.2126 15.9996 11.4888 15.9996 11.7649 15.7757 11.9888 15.4996 11.9888H11.9971V15.4932C11.9971 15.7693 11.7732 15.9932 11.4971 15.9932 11.2209 15.9932 10.9971 15.7693 10.9971 15.4932V11.4888ZM.501953 10.9888C.225811 10.9888.00195312 11.2126.00195312 11.4888.00195312 11.7649.225811 11.9888.501953 11.9888H4.00283V15.504C4.00283 15.7801 4.22668 16.004 4.50283 16.004 4.77897 16.004 5.00283 15.7801 5.00283 15.504V11.4888C5.00283 11.2126 4.77897 10.9888 4.50283 10.9888H.501953Z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+IconCollapse.displayName = "IconCollapse";
+export default IconCollapse;
diff --git a/src/components/icons/IconExpand.tsx 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<IconProps, "children">;
+
+const IconExpand = React.forwardRef<SVGSVGElement, IconExpandProps>(
+  ({ className, color, screenReaderText, size, ...props }, ref) => {
+    return (
+      <IconWrapper className={className} color={color} size={size} screenReaderText={screenReaderText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          stroke="currentColor"
+          fill="none"
+          viewBox="0 0 16 16"
+          ref={ref}
+          {...props}
+        >
+          <path
+            fill="currentColor"
+            d="M1.49946 1C1.22362 1 1 1.22386 1 1.5V5.5C1 5.77614 1.22362 6 1.49946 6 1.77531 6 1.99892 5.77614 1.99892 5.5V2H5.49515C5.77099 2 5.99461 1.77614 5.99461 1.5 5.99461 1.22386 5.77099 1 5.49515 1H1.49946ZM10.5049 1C10.229 1 10.0054 1.22386 10.0054 1.5 10.0054 1.77614 10.229 2 10.5049 2H14.0011V5.5C14.0011 5.77614 14.2247 6 14.5005 6 14.7764 6 15 5.77614 15 5.5V1.5C15 1.22386 14.7764 1 14.5005 1H10.5049ZM14.4763 10.001C14.7521 10.001 14.9758 10.2248 14.9758 10.501V14.501C14.9758 14.7771 14.7521 15.001 14.4763 15.001H10.4806C10.2048 15.001 9.98116 14.7771 9.98116 14.501 9.98116 14.2248 10.2048 14.001 10.4806 14.001H13.9768V10.501C13.9768 10.2248 14.2005 10.001 14.4763 10.001ZM1.99892 10.5042C1.99892 10.2281 1.77531 10.0042 1.49946 10.0042 1.22362 10.0042 1 10.2281 1 10.5042V14.5042C1 14.7803 1.22362 15.0042 1.49946 15.0042H5.49515C5.77099 15.0042 5.99461 14.7803 5.99461 14.5042 5.99461 14.2281 5.77099 14.0042 5.49515 14.0042H1.99892V10.5042Z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+IconExpand.displayName = "IconExpand";
+export default IconExpand;
diff --git a/src/components/icons/IconFilePdf.tsx 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<IconProps, "children">;
+
+const IconFilePdf = React.forwardRef<SVGSVGElement, IconFilePdfProps>(
+  ({ className, color, screenReaderText, size, ...props }, ref) => {
+    return (
+      <IconWrapper className={className} color={color} size={size} screenReaderText={screenReaderText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          fill="none"
+          viewBox="0 0 16 16"
+          ref={ref}
+          {...props}
+        >
+          <g
+            fill="currentColor"
+            clipPath="url(#a)"
+          >
+            <path
+              fillRule="evenodd"
+              d="M3 9.99512V13.9951H4V12.9951H4.5C5.32843 12.9951 6 12.3235 6 11.4951 6 10.6667 5.32843 9.99512 4.5 9.99512H3ZM4.5 11.9951H4V10.9951H4.5C4.77614 10.9951 5 11.219 5 11.4951 5 11.7713 4.77614 11.9951 4.5 11.9951ZM7 9.99512H8.5C9.32843 9.99512 10 10.6667 10 11.4951V12.4951C10 13.3235 9.32843 13.9951 8.5 13.9951H7V9.99512ZM8 12.9951H8.5C8.77614 12.9951 9 12.7713 9 12.4951V11.4951C9 11.219 8.77614 10.9951 8.5 10.9951H8V12.9951Z"
+              clipRule="evenodd"
+            />
+            <path d="M11 9.99512V13.9951H12V12.9951H13V11.9951H12V10.9951H13V9.99512H11Z" />
+            <path
+              fillRule="evenodd"
+              d="M3 0H9.2L14 4.96563V8.00468L14.9999 8.00488C15.5521 8.00488 15.9999 8.4526 15.9999 9.00488V15.0002C15.9999 15.5525 15.5521 16.0002 14.9999 16.0002H1C0.447716 16.0002 0 15.5525 0 15.0002V9.00488C0 8.4526 0.447715 8.00488 1 8.00488H2V1C2 0.447717 2.44772 0 3 0ZM13 8.00468H3L3 1H7.99902V4.50928C7.99902 5.3377 8.6706 6.00928 9.49902 6.00928H13V8.00468ZM12.6514 5.00928L8.99902 1.23091V4.50928C8.99902 4.78542 9.22288 5.00928 9.49902 5.00928H12.6514ZM14.9999 9.00488H1V15.0002H14.9999V9.00488Z"
+              clipRule="evenodd"
+            />
+          </g>
+          <defs>
+            <clipPath id="a">
+              <path
+                fill="#fff"
+                d="M0 0H16V16H0z"
+              />
+            </clipPath>
+          </defs>
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+IconFilePdf.displayName = "IconFilePdf";
+export default IconFilePdf;
diff --git 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 {