icons

2026-09-08 02:14:07 +00:00 · 2024-02-26 22:19:08 -05:00
parent 012beaad57
commit 7557511dd5
22 changed files with 61 additions and 33 deletions
@@ -1,10 +1,9 @@
 import React from 'react';
 import toast from 'react-hot-toast';
-
-import { IconButton, Typography } from '@material-tailwind/react';
-
 import { Link } from 'react-router-dom';

+import { ReactNativeIcon, ChevronRight } from 'components/shared/CustomIcon';
+
 interface TemplateDetails {
  id: string;
  name: string;
@@ -17,18 +16,15 @@ interface TemplateCardProps {

 const CardDetails = ({ template }: { template: TemplateDetails }) => {
  return (
-    <div className="h-14 group bg-gray-200 border-gray-200 rounded-lg shadow p-4 flex items-center justify-between">
-      <Typography className="grow" placeholder={''}>
-        {template.icon} {template.name}
-      </Typography>
+    <div className="bg-gray-200 border-gray-200 border-b border-opacity-10 rounded-lg shadow flex items-center justify-between">
+      <ReactNativeIcon />
+      <div className="grow shrink basis-0 text-slate-900 text-sm font-normal leading-tight">
+        {template.name}
+      </div>
      <div>
-        <IconButton
-          size="sm"
-          className="rounded-full hidden group-hover:block"
-          placeholder={''}
-        >
-          {'>'}
-        </IconButton>
+        <div className="py-2 px-3 bg-white rounded-full shadow-inner border border-sky-950 border-opacity-10 justify-center items-center gap-1 flex">
+          <ChevronRight />
+        </div>
      </div>
    </div>
  );
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const CalendarIcon = (props: CustomIconProps) => {
+export const CalendarIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="18"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const CheckIcon = (props: CustomIconProps) => {
+export const CheckIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="12"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const CheckRoundFilledIcon = (props: CustomIconProps) => {
+export const CheckRoundFilledIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="24"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const ChevronGrabberHorizontal = (props: CustomIconProps) => {
+export const ChevronGrabberHorizontal: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="20"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const ChevronLeft = (props: CustomIconProps) => {
+export const ChevronLeft: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="16"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const ChevronRight = (props: CustomIconProps) => {
+export const ChevronRight: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="16"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const CrossIcon = (props: CustomIconProps) => {
+export const CrossIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="24"
@@ -5,7 +5,7 @@ export interface CustomIconProps extends ComponentPropsWithoutRef<'svg'> {
  name?: string;
 }

-export const CustomIcon = ({
+export const CustomIcon: React.FC<CustomIconProps> = ({
  children,
  width = 24,
  height = 24,
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const FolderIcon = (props: CustomIconProps) => {
+export const FolderIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="20"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const GlobeIcon = (props: CustomIconProps) => {
+export const GlobeIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="20"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const InfoRoundFilledIcon = (props: CustomIconProps) => {
+export const InfoRoundFilledIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="24"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const InfoSquareIcon = (props: CustomIconProps) => {
+export const InfoSquareIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="20"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const LifeBuoyIcon = (props: CustomIconProps) => {
+export const LifeBuoyIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="20"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const LoadingIcon = (props: CustomIconProps) => {
+export const LoadingIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="20"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const PlusIcon = (props: CustomIconProps) => {
+export const PlusIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="20"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const QuestionMarkRoundIcon = (props: CustomIconProps) => {
+export const QuestionMarkRoundIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="20"
@@ -0,0 +1,31 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ReactNativeIcon: React.FC<CustomIconProps> = (props) => {
+  return (
+    <CustomIcon
+      width="22"
+      height="18"
+      viewBox="0 0 22 18"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M11.0002 10.7819C11.9847 10.7819 12.7828 9.98378 12.7828 8.99928C12.7828 8.01477 11.9847 7.21667 11.0002 7.21667C10.0157 7.21667 9.21761 8.01477 9.21761 8.99928C9.21761 9.98378 10.0157 10.7819 11.0002 10.7819Z"
+        fill="white"
+      />
+      <path
+        d="M10.9999 12.6515C16.2826 12.6515 20.5651 11.0164 20.5651 8.99936C20.5651 6.98232 16.2826 5.34719 10.9999 5.34719C5.71717 5.34719 1.43468 6.98232 1.43468 8.99936C1.43468 11.0164 5.71717 12.6515 10.9999 12.6515Z"
+        stroke="white"
+      />
+      <path
+        d="M7.8372 10.8246C10.4786 15.3996 14.0359 18.2908 15.7827 17.2822C17.5295 16.2737 16.8043 11.7474 14.1629 7.17244C11.5216 2.59746 7.96427 -0.293719 6.21747 0.714801C4.47066 1.72332 5.19584 6.24964 7.8372 10.8246Z"
+        stroke="white"
+      />
+      <path
+        d="M7.83704 7.17298C5.19567 11.7479 4.4705 16.2743 6.2173 17.2828C7.96411 18.2913 11.5214 15.4001 14.1628 10.8251C16.8041 6.25018 17.5293 1.72386 15.7825 0.715341C14.0357 -0.293179 10.4784 2.598 7.83704 7.17298Z"
+        stroke="white"
+      />
+    </CustomIcon>
+  );
+};
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const SearchIcon = (props: CustomIconProps) => {
+export const SearchIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="24"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const SettingsSlidersIcon = (props: CustomIconProps) => {
+export const SettingsSlidersIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="20"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

-export const WarningIcon = (props: CustomIconProps) => {
+export const WarningIcon: React.FC<CustomIconProps> = (props) => {
  return (
    <CustomIcon
      width="16"
@@ -21,3 +21,4 @@ export * from './GitIcon';
 export * from './EllipseIcon';
 export * from './EllipsesIcon';
 export * from './SnowballIcon';
+export * from './ReactNativeIcon';