From bfb2735143dae43fa5925386bbebdbc6559470e7 Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Wed, 28 Feb 2024 13:19:58 +0700 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20create=20template?= =?UTF-8?q?=20icon=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomIcon/ArrowRightCircleIcon.tsx | 21 +++ .../shared/CustomIcon/ClockOutlineIcon.tsx | 21 +++ .../src/components/shared/CustomIcon/index.ts | 5 + .../CustomIcon/templates/KotlinIcon.tsx | 130 ++++++++++++++++++ .../shared/CustomIcon/templates/PWAIcon.tsx | 88 ++++++++++++ .../CustomIcon/templates/ReactNativeIcon.tsx | 98 +++++++++++++ .../shared/CustomIcon/templates/SwiftIcon.tsx | 102 ++++++++++++++ .../CustomIcon/templates/TemplateIcon.tsx | 42 ++++++ .../CustomIcon/templates/WebAppIcon.tsx | 87 ++++++++++++ .../shared/CustomIcon/templates/index.ts | 1 + 10 files changed, 595 insertions(+) create mode 100644 packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/ClockOutlineIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/templates/KotlinIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/templates/PWAIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/templates/ReactNativeIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/templates/SwiftIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/templates/WebAppIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/templates/index.ts diff --git a/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleIcon.tsx new file mode 100644 index 00000000..cce7cc58 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleIcon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const ArrowRightCircleIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/ClockOutlineIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/ClockOutlineIcon.tsx new file mode 100644 index 00000000..01fec9ba --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/ClockOutlineIcon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const ClockOutlineIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index 5de3702d..e6dc3937 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -32,3 +32,8 @@ export * from './GitHubLogo'; export * from './ClockIcon'; export * from './HorizontalDotIcon'; export * from './WarningDiamondIcon'; +export * from './ArrowRightCircleIcon'; +export * from './ClockOutlineIcon'; + +// Templates +export * from './templates'; diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/KotlinIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/templates/KotlinIcon.tsx new file mode 100644 index 00000000..973b5f4f --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/templates/KotlinIcon.tsx @@ -0,0 +1,130 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from '../CustomIcon'; + +export const KotlinIcon = (props: CustomIconProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/PWAIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/templates/PWAIcon.tsx new file mode 100644 index 00000000..f0edb351 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/templates/PWAIcon.tsx @@ -0,0 +1,88 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from '../CustomIcon'; + +export const PWAIcon = (props: CustomIconProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/ReactNativeIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/templates/ReactNativeIcon.tsx new file mode 100644 index 00000000..bc170f98 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/templates/ReactNativeIcon.tsx @@ -0,0 +1,98 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from '../CustomIcon'; + +export const ReactNativeIcon = (props: CustomIconProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/SwiftIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/templates/SwiftIcon.tsx new file mode 100644 index 00000000..d3422dff --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/templates/SwiftIcon.tsx @@ -0,0 +1,102 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from '../CustomIcon'; + +export const SwitfIcon = (props: CustomIconProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx new file mode 100644 index 00000000..c7b307bb --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx @@ -0,0 +1,42 @@ +import React, { useMemo } from 'react'; +import { CustomIconProps } from '../CustomIcon'; +import { ReactNativeIcon } from './ReactNativeIcon'; +import { cloneIcon } from 'utils/cloneIcon'; +import { PWAIcon } from './PWAIcon'; +import { WebAppIcon } from './WebAppIcon'; +import { KotlinIcon } from './KotlinIcon'; +import { SwitfIcon } from './SwiftIcon'; + +const TEMPLATE_ICONS = [ + 'react-native', + 'pwa', + 'web', + 'kotlin', + 'swift', +] as const; +export type TemplateIconType = (typeof TEMPLATE_ICONS)[number]; + +export interface TemplateIconProps extends CustomIconProps { + type: TemplateIconType; +} + +export const TemplateIcon = ({ type, ...props }: TemplateIconProps) => { + const renderIcon = useMemo(() => { + switch (type) { + case 'react-native': + return ; + case 'pwa': + return ; + case 'web': + return ; + case 'kotlin': + return ; + case 'swift': + return ; + default: + throw new Error(`Invalid template icon type: ${type}`); + } + }, [type]); + + return cloneIcon(renderIcon, props) as JSX.Element; +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/WebAppIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/templates/WebAppIcon.tsx new file mode 100644 index 00000000..f707fccc --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/templates/WebAppIcon.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from '../CustomIcon'; + +export const WebAppIcon = (props: CustomIconProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/index.ts b/packages/frontend/src/components/shared/CustomIcon/templates/index.ts new file mode 100644 index 00000000..e2879355 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/templates/index.ts @@ -0,0 +1 @@ +export * from './TemplateIcon';