feat: add new icons for detail component

Signed-off-by: Amit Amrutiya <[email protected]>
layer5io · Oct 28, 2024 · 17abeae · 17abeae
1 parent 76b0321
commit 17abeae
Show file tree

Hide file tree

Showing 18 changed files with 400 additions and 1 deletion.
diff --git a/src/icons/Chain/ChainIcon.tsx b/src/icons/Chain/ChainIcon.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface ChainIconProps {
+  width: string;
+  height: string;
+  fill?: string;
+  style?: React.CSSProperties;
+  secondaryFill?: string;
+}
+
+const ChainIcon: React.FC<ChainIconProps> = ({ width, height, style, fill = '#3C494F' }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 34 18"
+    fill={fill}
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path d="M3.95098 9.00094C3.95098 6.16576 6.2556 3.86114 9.09078 3.86114H15.7228V0.710938H9.09078C4.5147 0.710938 0.800781 4.42486 0.800781 9.00094C0.800781 13.577 4.5147 17.2909 9.09078 17.2909H15.7228V14.1407H9.09078C6.2556 14.1407 3.95098 11.8361 3.95098 9.00094ZM10.7488 10.6589H24.0128V7.34294H10.7488V10.6589ZM25.6708 0.710938H19.0388V3.86114H25.6708C28.506 3.86114 30.8106 6.16576 30.8106 9.00094C30.8106 11.8361 28.506 14.1407 25.6708 14.1407H19.0388V17.2909H25.6708C30.2469 17.2909 33.9608 13.577 33.9608 9.00094C33.9608 4.42486 30.2469 0.710938 25.6708 0.710938Z" />
+  </svg>
+);
+
+export default ChainIcon;
diff --git a/src/icons/Chain/index.ts b/src/icons/Chain/index.ts
@@ -0,0 +1 @@
+export { default as ChainIcon } from './ChainIcon';
diff --git a/src/icons/Challenges/ChallengesIcon.tsx b/src/icons/Challenges/ChallengesIcon.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+interface ChallengesIconProps {
+  width?: string;
+  height?: string;
+  primaryFill?: string;
+  brandFill?: string;
+  secondaryFill?: string;
+  style?: React.CSSProperties;
+}
+
+const ChallengesIcon: React.FC<ChallengesIconProps> = ({
+  width = '32px',
+  height = '32px',
+  primaryFill = '#B1B9BC',
+  brandFill = '#00B39F',
+  secondaryFill = '#51636B',
+  style = {}
+}) => (
+  <svg
+    width={width}
+    height={height}
+    fill={primaryFill}
+    style={style}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 254 187"
+  >
+    <path d="M137.75 186.964L195.857 81.2227L253.994 186.964H137.75Z" fill={secondaryFill} />
+    <path
+      d="M217.85 121.244L207.007 132.244L195.51 121.244L183.639 132.244L173.852 121.244L195.852 81.2227L217.85 121.244Z"
+      fill={primaryFill}
+    />
+    <path d="M0 186.879L42.5621 109.473L85.1469 186.879H0Z" fill={secondaryFill} />
+    <path
+      d="M58.6074 138.964L50.7041 147.07L42.3246 138.964L33.6726 147.07L26.5391 138.964L42.5736 109.473L58.6074 138.964Z"
+      fill={primaryFill}
+    />
+    <path d="M70.9531 24.245H125.504V0H70.9531L89.6349 12.1225L70.9531 24.245Z" fill={brandFill} />
+    <path d="M51 186.89L128.281 45.4609L205.562 186.89H51Z" fill={primaryFill} />
+    <path
+      d="M157.592 99.3499L143.115 114.155L127.831 99.3499L112.02 114.155L99 99.3499L128.297 45.4609L157.592 99.3499Z"
+      fill="#F6F8F8"
+    />
+    <line
+      x1="128.516"
+      y1="8.74229e-08"
+      x2="118.414"
+      y2="57.5818"
+      stroke={brandFill}
+      strokeWidth="4"
+    />
+  </svg>
+);
+
+export default ChallengesIcon;
diff --git a/src/icons/Challenges/index.ts b/src/icons/Challenges/index.ts
@@ -0,0 +1 @@
+export { default as ChallengesIcon } from './ChallengesIcon';
diff --git a/src/icons/Copy/CopyIcon.tsx b/src/icons/Copy/CopyIcon.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface CopyIconProps {
+  width: number;
+  height: number;
+  fill?: string;
+  style?: React.CSSProperties;
+  secondaryFill?: string;
+}
+
+const CopyIcon: React.FC<CopyIconProps> = ({ width, height, fill = 'white', style }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 22 22"
+    xmlns="http://www.w3.org/2000/svg"
+    fill={fill}
+    style={style}
+  >
+    <g mask="url(#mask0_15532_38310)">
+      <path d="M14.6654 0.914062H3.66536C2.65703 0.914062 1.83203 1.73906 1.83203 2.7474V15.5807H3.66536V2.7474H14.6654V0.914062ZM17.4154 4.58073H7.33203C6.3237 4.58073 5.4987 5.40573 5.4987 6.41406V19.2474C5.4987 20.2557 6.3237 21.0807 7.33203 21.0807H17.4154C18.4237 21.0807 19.2487 20.2557 19.2487 19.2474V6.41406C19.2487 5.40573 18.4237 4.58073 17.4154 4.58073ZM17.4154 19.2474H7.33203V6.41406H17.4154V19.2474Z" />
+    </g>
+  </svg>
+);
+
+export default CopyIcon;
diff --git a/src/icons/Copy/index.ts b/src/icons/Copy/index.ts
@@ -1 +1,2 @@
+export { default as CopyIcon } from './CopyIcon';
 export { default as CopyLinkIcon } from './CopyLinkIcon';
diff --git a/src/icons/Kanvas/KanvasIcon.tsx b/src/icons/Kanvas/KanvasIcon.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface KanvasIconProps {
+  width: number;
+  height: number;
+  fill?: string;
+  style?: React.CSSProperties;
+  primaryFill?: string;
+  secondaryFill?: string;
+}
+
+const KanvasIcon: React.FC<KanvasIconProps> = ({
+  width,
+  height,
+  fill,
+  style,
+  primaryFill = 'white'
+}) => (
+  <svg
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 500 500"
+    fill={fill}
+    style={style}
+  >
+    <polygon fill={primaryFill} points="261.82 30.1 261.82 228.75 433.99 129.07 261.82 30.1" />
+    <polygon fill={primaryFill} points="261.82 270.3 261.82 469.9 435.56 370.56 261.82 270.3" />
+    <g opacity=".8">
+      <polygon fill={primaryFill} points="237.03 227.38 237.03 31.77 66.97 129.25 237.03 227.38" />
+    </g>
+    <g opacity=".8">
+      <polygon fill={primaryFill} points="237.03 468.98 237.03 271.74 66.56 370.43 237.03 468.98" />
+    </g>
+    <g opacity=".8">
+      <polygon fill={primaryFill} points="447.37 348.75 447.37 149.97 275.4 249.52 447.37 348.75" />
+    </g>
+    <polygon fill={primaryFill} points="52.63 149.59 52.63 349.85 225.87 249.56 52.63 149.59" />
+  </svg>
+);
+
+export default KanvasIcon;
diff --git a/src/icons/Kanvas/index.ts b/src/icons/Kanvas/index.ts
@@ -0,0 +1 @@
+export { default as KanvasIcon } from './KanvasIcon';
diff --git a/src/icons/Learning/LearningIcon.tsx b/src/icons/Learning/LearningIcon.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface LearningIconProps {
+  width?: string;
+  height?: string;
+  primaryFill?: string;
+  secondaryFill?: string;
+  style?: React.CSSProperties;
+}
+
+const LearningIcon: React.FC<LearningIconProps> = ({
+  width = '32px',
+  height = '32px',
+  primaryFill = '#FDFDFD',
+  secondaryFill = '#FDFDFD',
+  style = {}
+}) => (
+  <svg
+    width={width}
+    height={height}
+    fill={primaryFill}
+    style={style}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path
+      fill={primaryFill}
+      d="M20,6c-0.5,0-1,0.1-1.5,0.3L1,12.6c-0.6,0.2-1,0.8-1,1.4c0,0.6,0.4,1.2,1,1.4l3.6,1.3c-1,1.6-1.6,3.5-1.6,5.5
+    V24c0,1.8-0.7,3.6-1.4,5c-0.4,0.8-0.9,1.6-1.4,2.3C0,31.7-0.1,32,0.1,32.3c0.1,0.3,0.4,0.6,0.7,0.6l4,1c0.3,0.1,0.5,0,0.8-0.1
+    s0.4-0.4,0.4-0.6c0.5-2.7,0.3-5.1-0.1-6.8c-0.2-0.9-0.5-1.8-0.8-2.6v-1.5c0-1.9,0.6-3.7,1.7-5.1c0.8-1,1.8-1.7,3.1-2.2l9.8-3.9
+    c0.5-0.2,1.1,0,1.3,0.6c0.2,0.5,0,1.1-0.6,1.3l-9.8,3.9c-0.8,0.3-1.5,0.8-2,1.3l10,3.6c0.5,0.2,1,0.3,1.5,0.3c0.5,0,1-0.1,1.5-0.3
+    L39,15.4c0.6-0.2,1-0.8,1-1.4c0-0.6-0.4-1.2-1-1.4L21.5,6.3C21,6.1,20.5,6,20,6z"
+    />
+    <path
+      fill={secondaryFill}
+      d="M8,29.5c0,2.2,5.4,4.5,12,4.5s12-2.3,12-4.5l-1-9.1l-8.9,3.2C21.5,23.9,20.7,24,20,24c-0.7,0-1.5-0.1-2.2-0.4
+    L9,20.4L8,29.5z"
+    />
+  </svg>
+);
+
+export default LearningIcon;
diff --git a/src/icons/Learning/index.ts b/src/icons/Learning/index.ts
@@ -0,0 +1 @@
+export { default as LearningIcon } from './LearningIcon';
diff --git a/src/icons/Share/ShareLineIcon.tsx b/src/icons/Share/ShareLineIcon.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+interface ShareLineIconProps {
+  width: string;
+  height: string;
+  fill?: string;
+  style?: React.CSSProperties;
+  secondaryFill?: string;
+}
+
+const ShareLineIcon: React.FC<ShareLineIconProps> = ({
+  width,
+  height,
+  style,
+  fill = '#3C494F'
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 19 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      d="M15.3933 14.2675C14.2628 14.2675 13.2529 14.826 12.5924 15.7011L6.97152 12.2207C7.12457 11.7889 7.21318 11.3255 7.21318 10.8359C7.21318 10.3752 7.13262 9.9318 6.99569 9.52315L12.5494 6.23845C13.2101 7.14534 14.2359 7.73246 15.3934 7.73246C17.386 7.73246 19 6.00228 19 3.86623C19 1.73018 17.386 0 15.3934 0C13.4008 0 11.7868 1.73018 11.7868 3.86623C11.7868 4.32689 11.8674 4.77029 12.0043 5.17893L6.45059 8.46364C5.78991 7.55675 4.76409 6.96962 3.60659 6.96962C1.61399 6.96962 0 8.69981 0 10.8359C0 12.9719 1.61399 14.7021 3.60659 14.7021C4.73709 14.7021 5.74699 14.1436 6.40748 13.2685L12.0283 16.7489C11.8753 17.1807 11.7867 17.6442 11.7867 18.1338C11.7867 20.2698 13.4007 22 15.3933 22C17.3859 22 18.9999 20.2698 18.9999 18.1338C18.9999 15.9977 17.3859 14.2675 15.3933 14.2675Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default ShareLineIcon;
diff --git a/src/icons/Share/index.tsx b/src/icons/Share/index.tsx
@@ -1,2 +1,3 @@
 import ShareIcon from './ShareIcon';
-export { ShareIcon };
+import ShareLineIcon from './ShareLineIcon';
+export { ShareIcon, ShareLineIcon };
diff --git a/src/icons/SocialMedial/FacebookIcon.tsx b/src/icons/SocialMedial/FacebookIcon.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { IconProps } from './types';
+
+const FacebookIcon: React.FC<IconProps> = ({ width = 40, height = 40 }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 28 29"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g filter="url(#filter0_d_6961_29756)">
+      <rect x="3.87598" y="3" width="20.2472" height="20.2472" rx="4.82076" fill="#252E31" />
+    </g>
+    <path
+      d="M16.5443 12.8065H15.1772V17.4103H13.5977V12.8065H12.7277V12.0453L13.5977 11.6207V11.196C13.5977 10.5366 13.76 10.055 14.0845 9.7512C14.409 9.44739 14.9286 9.29549 15.6432 9.29549C16.1887 9.29549 16.6738 9.37662 17.0984 9.53888L16.6945 10.6989C16.3769 10.5988 16.0834 10.5487 15.8141 10.5487C15.5897 10.5487 15.4275 10.616 15.3274 10.7507C15.2272 10.8819 15.1772 11.051 15.1772 11.2582V11.6207H16.5443V12.8065Z"
+      fill="white"
+    />
+    <defs>
+      <filter
+        id="filter0_d_6961_29756"
+        x="0.0193691"
+        y="0.107544"
+        width="27.9603"
+        height="27.9604"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="0.964152" />
+        <feGaussianBlur stdDeviation="1.9283" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6961_29756" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_6961_29756"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+);
+
+export default FacebookIcon;
diff --git a/src/icons/SocialMedial/LinkedinIcon.tsx b/src/icons/SocialMedial/LinkedinIcon.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { IconProps } from './types';
+
+const LinkedinIcon: React.FC<IconProps> = ({ width = 40, height = 40 }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 29 29"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g filter="url(#filter0_d_6961_29759)">
+      <rect x="4.12402" y="3" width="20.2472" height="20.2472" rx="4.82076" fill="#252E31" />
+    </g>
+    <path
+      d="M17.9658 8.78503H10.5261C10.1852 8.78503 9.9082 9.06589 9.9082 9.41066V16.8368C9.9082 17.1815 10.1852 17.4624 10.5261 17.4624H17.9658C18.3067 17.4624 18.5856 17.1815 18.5856 16.8368V9.41066C18.5856 9.06589 18.3067 8.78503 17.9658 8.78503ZM12.5327 16.2228H11.2447V12.0817H12.5327V16.2228ZM11.8877 11.5161C11.4752 11.5161 11.142 11.181 11.142 10.7704C11.142 10.3597 11.4752 10.0247 11.8877 10.0247C12.2984 10.0247 12.6334 10.3597 12.6334 10.7704C12.6334 11.1829 12.3003 11.5161 11.8877 11.5161ZM17.3518 16.2228H16.0656V14.2084C16.0656 13.728 16.056 13.1102 15.3974 13.1102C14.7272 13.1102 14.6246 13.6331 14.6246 14.1735V16.2228H13.3385V12.0817H14.5723V12.6472H14.5897C14.7621 12.3218 15.1824 11.979 15.808 11.979C17.1096 11.979 17.3518 12.8371 17.3518 13.9527V16.2228V16.2228Z"
+      fill="white"
+    />
+    <defs>
+      <filter
+        id="filter0_d_6961_29759"
+        x="0.267416"
+        y="0.107544"
+        width="27.9603"
+        height="27.9604"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="0.964152" />
+        <feGaussianBlur stdDeviation="1.9283" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6961_29759" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_6961_29759"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+);
+
+export default LinkedinIcon;