diff --git a/src/components/illustrationHuman/illustrationHumanList.ts b/src/components/illustrationHuman/illustrationHumanList.ts deleted file mode 100644 index 2a95de1a9..000000000 --- a/src/components/illustrationHuman/illustrationHumanList.ts +++ /dev/null @@ -1,148 +0,0 @@ -import type { SVGProps } from 'react'; - -/** Accessories */ -import AccessoryBuddha from '../../assets/illustrations/human/accessories/buddha.svg'; -import AccessoryEarringsCircle from '../../assets/illustrations/human/accessories/earrings-circle.svg'; -import AccessoryEarringsHoops from '../../assets/illustrations/human/accessories/earrings-hoops.svg'; -import AccessoryEarringsRhombus from '../../assets/illustrations/human/accessories/earrings-rhombus.svg'; -import AccessoryEarringsSkull from '../../assets/illustrations/human/accessories/earrings-skull.svg'; -import AccessoryEarringsThunder from '../../assets/illustrations/human/accessories/earrings-thunder.svg'; -import AccessoryExpression from '../../assets/illustrations/human/accessories/expression.svg'; -import AccessoryFlushed from '../../assets/illustrations/human/accessories/flushed.svg'; -import AccessoryHeadFlower from '../../assets/illustrations/human/accessories/head-flower.svg'; -import AccessoryPiercingsTattoo from '../../assets/illustrations/human/accessories/piercings-tattoo.svg'; -import AccessoryPiercings from '../../assets/illustrations/human/accessories/piercings.svg'; - -/** Sunglasses */ -import SunglassesBigRounded from '../../assets/illustrations/human/sunglasses/big-rounded.svg'; -import SunglassesBigSemirounded from '../../assets/illustrations/human/sunglasses/big-semirounded.svg'; -import SunglassesLargeStylizedXl from '../../assets/illustrations/human/sunglasses/large-stylized-xl.svg'; -import SunglassesLargeStylized from '../../assets/illustrations/human/sunglasses/large-stylized.svg'; -import SunglassesPirate from '../../assets/illustrations/human/sunglasses/pirate.svg'; -import SunglassesSmallIntellectual from '../../assets/illustrations/human/sunglasses/small-intellectual.svg'; -import SunglassesSmallSympathetic from '../../assets/illustrations/human/sunglasses/small-sympathetic.svg'; -import SunglassesSmallWeirdOne from '../../assets/illustrations/human/sunglasses/small-weird-one.svg'; -import SunglassesSmallWeirdTwo from '../../assets/illustrations/human/sunglasses/small-weird-two.svg'; -import SunglassesThuglifeRounded from '../../assets/illustrations/human/sunglasses/thuglife-rounded.svg'; -import SunglassesThuglife from '../../assets/illustrations/human/sunglasses/thuglife.svg'; - -/** Bodies */ -import BodyAragon from '../../assets/illustrations/human/bodies/aragon.svg'; -import BodyBlocks from '../../assets/illustrations/human/bodies/blocks.svg'; -import BodyChart from '../../assets/illustrations/human/bodies/chart.svg'; -import BodyComputerCorrect from '../../assets/illustrations/human/bodies/computer-correct.svg'; -import BodyComputer from '../../assets/illustrations/human/bodies/computer.svg'; -import BodyCorrect from '../../assets/illustrations/human/bodies/correct.svg'; -import BodyDoubleCorrect from '../../assets/illustrations/human/bodies/double-correct.svg'; -import BodyElevating from '../../assets/illustrations/human/bodies/elevating.svg'; -import BodyRelaxed from '../../assets/illustrations/human/bodies/relaxed.svg'; -import BodySendingLove from '../../assets/illustrations/human/bodies/sending-love.svg'; -import BodyVoting from '../../assets/illustrations/human/bodies/voting.svg'; - -/** Expressions */ -import ExpressionAngry from '../../assets/illustrations/human/expressions/angry.svg'; -import ExpressionCasual from '../../assets/illustrations/human/expressions/casual.svg'; -import ExpressionCrying from '../../assets/illustrations/human/expressions/crying.svg'; -import ExpressionDecided from '../../assets/illustrations/human/expressions/decided.svg'; -import ExpressionExcited from '../../assets/illustrations/human/expressions/excited.svg'; -import ExpressionSadLeft from '../../assets/illustrations/human/expressions/sad-left.svg'; -import ExpressionSadRight from '../../assets/illustrations/human/expressions/sad-right.svg'; -import ExpressionSmileWink from '../../assets/illustrations/human/expressions/smile-wink.svg'; -import ExpressionSmile from '../../assets/illustrations/human/expressions/smile.svg'; -import ExpressionSurprised from '../../assets/illustrations/human/expressions/surprised.svg'; -import ExpressionSuspecting from '../../assets/illustrations/human/expressions/suspecting.svg'; - -/** Hairs */ -import HairsAfro from '../../assets/illustrations/human/hairs/afro.svg'; -import HairsBald from '../../assets/illustrations/human/hairs/bald.svg'; -import HairsBun from '../../assets/illustrations/human/hairs/bun.svg'; -import HairsCool from '../../assets/illustrations/human/hairs/cool.svg'; -import HairsCurlyBangs from '../../assets/illustrations/human/hairs/curly-bangs.svg'; -import HairsCurly from '../../assets/illustrations/human/hairs/curly.svg'; -import HairsInformal from '../../assets/illustrations/human/hairs/informal.svg'; -import HairsLong from '../../assets/illustrations/human/hairs/long.svg'; -import HairsMiddle from '../../assets/illustrations/human/hairs/middle.svg'; -import HairsOldschool from '../../assets/illustrations/human/hairs/oldschool.svg'; -import HairsPunk from '../../assets/illustrations/human/hairs/punk.svg'; -import HairsShort from '../../assets/illustrations/human/hairs/short.svg'; - -import type { - IllustrationHumanAccessory, - IllustrationHumanBody, - IllustrationHumanExpression, - IllustrationHumanHairs, - IllustrationHumanSunglasses, -} from './illustrationHumanType'; - -type IllustrationHumanComponent = React.FC>; - -export const illustrationHumanAccessoryList: Record = { - BUDDHA: AccessoryBuddha, - EARRINGS_CIRCLE: AccessoryEarringsCircle, - EARRINGS_HOOPS: AccessoryEarringsHoops, - EARRINGS_RHOMBUS: AccessoryEarringsRhombus, - EARRINGS_SKULL: AccessoryEarringsSkull, - EARRINGS_THUNDER: AccessoryEarringsThunder, - EXPRESSION: AccessoryExpression, - FLUSHED: AccessoryFlushed, - HEAD_FLOWER: AccessoryHeadFlower, - PIERCINGS_TATTOO: AccessoryPiercingsTattoo, - PIERCINGS: AccessoryPiercings, -}; - -export const illustrationHumanSunglassesList: Record = { - BIG_ROUNDED: SunglassesBigRounded, - BIG_SEMIROUNDED: SunglassesBigSemirounded, - LARGE_STYLIZED_XL: SunglassesLargeStylizedXl, - LARGE_STYLIZED: SunglassesLargeStylized, - PIRATE: SunglassesPirate, - SMALL_INTELLECTUAL: SunglassesSmallIntellectual, - SMALL_SYMPATHETIC: SunglassesSmallSympathetic, - SMALL_WEIRD_ONE: SunglassesSmallWeirdOne, - SMALL_WEIRD_TWO: SunglassesSmallWeirdTwo, - THUGLIFE_ROUNDED: SunglassesThuglifeRounded, - THUGLIFE: SunglassesThuglife, -}; - -export const illustrationHumanBodyList: Record = { - ARAGON: BodyAragon, - BLOCKS: BodyBlocks, - CHART: BodyChart, - COMPUTER_CORRECT: BodyComputerCorrect, - COMPUTER: BodyComputer, - CORRECT: BodyCorrect, - DOUBLE_CORRECT: BodyDoubleCorrect, - ELEVATING: BodyElevating, - RELAXED: BodyRelaxed, - SENDING_LOVE: BodySendingLove, - VOTING: BodyVoting, -}; - -export const illustrationHumanExpressionList: Record = { - ANGRY: ExpressionAngry, - CASUAL: ExpressionCasual, - CRYING: ExpressionCrying, - DECIDED: ExpressionDecided, - EXCITED: ExpressionExcited, - SAD_LEFT: ExpressionSadLeft, - SAD_RIGHT: ExpressionSadRight, - SMILE_WINK: ExpressionSmileWink, - SMILE: ExpressionSmile, - SURPRISED: ExpressionSurprised, - SUSPECTING: ExpressionSuspecting, -}; - -export const illustrationHumanHairsList: Record = { - AFRO: HairsAfro, - BALD: HairsBald, - BUN: HairsBun, - COOL: HairsCool, - CURLY_BANGS: HairsCurlyBangs, - CURLY: HairsCurly, - INFORMAL: HairsInformal, - LONG: HairsLong, - MIDDLE: HairsMiddle, - OLDSCHOOL: HairsOldschool, - PUNK: HairsPunk, - SHORT: HairsShort, -}; diff --git a/src/components/illustrationObject/illustrationObjectList.ts b/src/components/illustrationObject/illustrationObjectList.ts deleted file mode 100644 index 76428a5e4..000000000 --- a/src/components/illustrationObject/illustrationObjectList.ts +++ /dev/null @@ -1,53 +0,0 @@ -import type { SVGProps } from 'react'; -import Action from '../../assets/illustrations/objects/action.svg'; -import App from '../../assets/illustrations/objects/app.svg'; -import Archive from '../../assets/illustrations/objects/archive.svg'; -import Book from '../../assets/illustrations/objects/book.svg'; -import Build from '../../assets/illustrations/objects/build.svg'; -import Chain from '../../assets/illustrations/objects/chain.svg'; -import Database from '../../assets/illustrations/objects/database.svg'; -import Error from '../../assets/illustrations/objects/error.svg'; -import Explore from '../../assets/illustrations/objects/explore.svg'; -import Gas from '../../assets/illustrations/objects/gas.svg'; -import Goal from '../../assets/illustrations/objects/goal.svg'; -import Labels from '../../assets/illustrations/objects/labels.svg'; -import Lightbulb from '../../assets/illustrations/objects/lightbulb.svg'; -import MagnifyingGlass from '../../assets/illustrations/objects/magnifying-glass.svg'; -import NotFound from '../../assets/illustrations/objects/not-found.svg'; -import Security from '../../assets/illustrations/objects/security.svg'; -import Settings from '../../assets/illustrations/objects/settings.svg'; -import SmartContract from '../../assets/illustrations/objects/smart-contract.svg'; -import Success from '../../assets/illustrations/objects/success.svg'; -import Users from '../../assets/illustrations/objects/users.svg'; -import Wagmi from '../../assets/illustrations/objects/wagmi.svg'; -import Wallet from '../../assets/illustrations/objects/wallet.svg'; -import Warning from '../../assets/illustrations/objects/warning.svg'; -import { IllustrationObjectType } from './illustrationObjectType'; - -type IllustrationObjectComponent = React.FC>; - -export const illustrationObjectList: Record = { - [IllustrationObjectType.ACTION]: Action, - [IllustrationObjectType.APP]: App, - [IllustrationObjectType.ARCHIVE]: Archive, - [IllustrationObjectType.BOOK]: Book, - [IllustrationObjectType.BUILD]: Build, - [IllustrationObjectType.CHAIN]: Chain, - [IllustrationObjectType.DATABASE]: Database, - [IllustrationObjectType.ERROR]: Error, - [IllustrationObjectType.EXPLORE]: Explore, - [IllustrationObjectType.GAS]: Gas, - [IllustrationObjectType.GOAL]: Goal, - [IllustrationObjectType.LABELS]: Labels, - [IllustrationObjectType.LIGHTBULB]: Lightbulb, - [IllustrationObjectType.MAGNIFYING_GLASS]: MagnifyingGlass, - [IllustrationObjectType.NOT_FOUND]: NotFound, - [IllustrationObjectType.SECURITY]: Security, - [IllustrationObjectType.SETTINGS]: Settings, - [IllustrationObjectType.SMART_CONTRACT]: SmartContract, - [IllustrationObjectType.SUCCESS]: Success, - [IllustrationObjectType.USERS]: Users, - [IllustrationObjectType.WAGMI]: Wagmi, - [IllustrationObjectType.WALLET]: Wallet, - [IllustrationObjectType.WARNING]: Warning, -}; diff --git a/src/components/illustrationHuman/illustrationHuman.stories.tsx b/src/components/illustrations/illustrationHuman/illustrationHuman.stories.tsx similarity index 89% rename from src/components/illustrationHuman/illustrationHuman.stories.tsx rename to src/components/illustrations/illustrationHuman/illustrationHuman.stories.tsx index 3309ac694..9e170c4f9 100644 --- a/src/components/illustrationHuman/illustrationHuman.stories.tsx +++ b/src/components/illustrations/illustrationHuman/illustrationHuman.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { IllustrationHuman } from './illustrationHuman'; const meta: Meta = { - title: 'components/IllustrationHuman', + title: 'components/Illustrations/IllustrationHuman', component: IllustrationHuman, tags: ['autodocs'], }; diff --git a/src/components/illustrationHuman/illustrationHuman.tsx b/src/components/illustrations/illustrationHuman/illustrationHuman.tsx similarity index 87% rename from src/components/illustrationHuman/illustrationHuman.tsx rename to src/components/illustrations/illustrationHuman/illustrationHuman.tsx index a56e656ef..ce19ffec7 100644 --- a/src/components/illustrationHuman/illustrationHuman.tsx +++ b/src/components/illustrations/illustrationHuman/illustrationHuman.tsx @@ -38,8 +38,6 @@ export interface IIllustrationHumanProps extends HTMLAttributes accessory?: IllustrationHumanAccessory; } -const illustrationHumanSize = 360; - export const IllustrationHuman: React.FC = (props) => { const { body, expression, hairs, sunglasses, accessory, className, style, ...otherProps } = props; @@ -50,12 +48,12 @@ export const IllustrationHuman: React.FC = (props) => { const Sunglasses = sunglasses ? illustrationHumanSunglassesList[sunglasses] : undefined; const Accessory = accessory ? illustrationHumanAccessoryList[accessory] : undefined; - const computedStyle = { width: illustrationHumanSize, height: illustrationHumanSize, ...style }; - const commonProps = { width: illustrationHumanSize, height: illustrationHumanSize, className: 'absolute' }; + const computedStyle = { width: '100%', height: '100%', ...style }; + const commonProps = { className: 'absolute top-0 right-0' }; return (
- + {Hairs && } {Sunglasses && } diff --git a/src/components/illustrations/illustrationHuman/illustrationHumanList.ts b/src/components/illustrations/illustrationHuman/illustrationHumanList.ts new file mode 100644 index 000000000..8350ac7da --- /dev/null +++ b/src/components/illustrations/illustrationHuman/illustrationHumanList.ts @@ -0,0 +1,148 @@ +import type { SVGProps } from 'react'; + +/** Accessories */ +import AccessoryBuddha from '../../../assets/illustrations/human/accessories/buddha.svg'; +import AccessoryEarringsCircle from '../../../assets/illustrations/human/accessories/earrings-circle.svg'; +import AccessoryEarringsHoops from '../../../assets/illustrations/human/accessories/earrings-hoops.svg'; +import AccessoryEarringsRhombus from '../../../assets/illustrations/human/accessories/earrings-rhombus.svg'; +import AccessoryEarringsSkull from '../../../assets/illustrations/human/accessories/earrings-skull.svg'; +import AccessoryEarringsThunder from '../../../assets/illustrations/human/accessories/earrings-thunder.svg'; +import AccessoryExpression from '../../../assets/illustrations/human/accessories/expression.svg'; +import AccessoryFlushed from '../../../assets/illustrations/human/accessories/flushed.svg'; +import AccessoryHeadFlower from '../../../assets/illustrations/human/accessories/head-flower.svg'; +import AccessoryPiercingsTattoo from '../../../assets/illustrations/human/accessories/piercings-tattoo.svg'; +import AccessoryPiercings from '../../../assets/illustrations/human/accessories/piercings.svg'; + +/** Sunglasses */ +import SunglassesBigRounded from '../../../assets/illustrations/human/sunglasses/big-rounded.svg'; +import SunglassesBigSemirounded from '../../../assets/illustrations/human/sunglasses/big-semirounded.svg'; +import SunglassesLargeStylizedXl from '../../../assets/illustrations/human/sunglasses/large-stylized-xl.svg'; +import SunglassesLargeStylized from '../../../assets/illustrations/human/sunglasses/large-stylized.svg'; +import SunglassesPirate from '../../../assets/illustrations/human/sunglasses/pirate.svg'; +import SunglassesSmallIntellectual from '../../../assets/illustrations/human/sunglasses/small-intellectual.svg'; +import SunglassesSmallSympathetic from '../../../assets/illustrations/human/sunglasses/small-sympathetic.svg'; +import SunglassesSmallWeirdOne from '../../../assets/illustrations/human/sunglasses/small-weird-one.svg'; +import SunglassesSmallWeirdTwo from '../../../assets/illustrations/human/sunglasses/small-weird-two.svg'; +import SunglassesThuglifeRounded from '../../../assets/illustrations/human/sunglasses/thuglife-rounded.svg'; +import SunglassesThuglife from '../../../assets/illustrations/human/sunglasses/thuglife.svg'; + +/** Bodies */ +import BodyAragon from '../../../assets/illustrations/human/bodies/aragon.svg'; +import BodyBlocks from '../../../assets/illustrations/human/bodies/blocks.svg'; +import BodyChart from '../../../assets/illustrations/human/bodies/chart.svg'; +import BodyComputerCorrect from '../../../assets/illustrations/human/bodies/computer-correct.svg'; +import BodyComputer from '../../../assets/illustrations/human/bodies/computer.svg'; +import BodyCorrect from '../../../assets/illustrations/human/bodies/correct.svg'; +import BodyDoubleCorrect from '../../../assets/illustrations/human/bodies/double-correct.svg'; +import BodyElevating from '../../../assets/illustrations/human/bodies/elevating.svg'; +import BodyRelaxed from '../../../assets/illustrations/human/bodies/relaxed.svg'; +import BodySendingLove from '../../../assets/illustrations/human/bodies/sending-love.svg'; +import BodyVoting from '../../../assets/illustrations/human/bodies/voting.svg'; + +/** Expressions */ +import ExpressionAngry from '../../../assets/illustrations/human/expressions/angry.svg'; +import ExpressionCasual from '../../../assets/illustrations/human/expressions/casual.svg'; +import ExpressionCrying from '../../../assets/illustrations/human/expressions/crying.svg'; +import ExpressionDecided from '../../../assets/illustrations/human/expressions/decided.svg'; +import ExpressionExcited from '../../../assets/illustrations/human/expressions/excited.svg'; +import ExpressionSadLeft from '../../../assets/illustrations/human/expressions/sad-left.svg'; +import ExpressionSadRight from '../../../assets/illustrations/human/expressions/sad-right.svg'; +import ExpressionSmileWink from '../../../assets/illustrations/human/expressions/smile-wink.svg'; +import ExpressionSmile from '../../../assets/illustrations/human/expressions/smile.svg'; +import ExpressionSurprised from '../../../assets/illustrations/human/expressions/surprised.svg'; +import ExpressionSuspecting from '../../../assets/illustrations/human/expressions/suspecting.svg'; + +/** Hairs */ +import HairsAfro from '../../../assets/illustrations/human/hairs/afro.svg'; +import HairsBald from '../../../assets/illustrations/human/hairs/bald.svg'; +import HairsBun from '../../../assets/illustrations/human/hairs/bun.svg'; +import HairsCool from '../../../assets/illustrations/human/hairs/cool.svg'; +import HairsCurlyBangs from '../../../assets/illustrations/human/hairs/curly-bangs.svg'; +import HairsCurly from '../../../assets/illustrations/human/hairs/curly.svg'; +import HairsInformal from '../../../assets/illustrations/human/hairs/informal.svg'; +import HairsLong from '../../../assets/illustrations/human/hairs/long.svg'; +import HairsMiddle from '../../../assets/illustrations/human/hairs/middle.svg'; +import HairsOldschool from '../../../assets/illustrations/human/hairs/oldschool.svg'; +import HairsPunk from '../../../assets/illustrations/human/hairs/punk.svg'; +import HairsShort from '../../../assets/illustrations/human/hairs/short.svg'; + +import type { + IllustrationHumanAccessory, + IllustrationHumanBody, + IllustrationHumanExpression, + IllustrationHumanHairs, + IllustrationHumanSunglasses, +} from './illustrationHumanType'; + +type IllustrationHumanComponent = React.FC>; + +export const illustrationHumanAccessoryList: Record = { + BUDDHA: AccessoryBuddha, + EARRINGS_CIRCLE: AccessoryEarringsCircle, + EARRINGS_HOOPS: AccessoryEarringsHoops, + EARRINGS_RHOMBUS: AccessoryEarringsRhombus, + EARRINGS_SKULL: AccessoryEarringsSkull, + EARRINGS_THUNDER: AccessoryEarringsThunder, + EXPRESSION: AccessoryExpression, + FLUSHED: AccessoryFlushed, + HEAD_FLOWER: AccessoryHeadFlower, + PIERCINGS_TATTOO: AccessoryPiercingsTattoo, + PIERCINGS: AccessoryPiercings, +}; + +export const illustrationHumanSunglassesList: Record = { + BIG_ROUNDED: SunglassesBigRounded, + BIG_SEMIROUNDED: SunglassesBigSemirounded, + LARGE_STYLIZED_XL: SunglassesLargeStylizedXl, + LARGE_STYLIZED: SunglassesLargeStylized, + PIRATE: SunglassesPirate, + SMALL_INTELLECTUAL: SunglassesSmallIntellectual, + SMALL_SYMPATHETIC: SunglassesSmallSympathetic, + SMALL_WEIRD_ONE: SunglassesSmallWeirdOne, + SMALL_WEIRD_TWO: SunglassesSmallWeirdTwo, + THUGLIFE_ROUNDED: SunglassesThuglifeRounded, + THUGLIFE: SunglassesThuglife, +}; + +export const illustrationHumanBodyList: Record = { + ARAGON: BodyAragon, + BLOCKS: BodyBlocks, + CHART: BodyChart, + COMPUTER_CORRECT: BodyComputerCorrect, + COMPUTER: BodyComputer, + CORRECT: BodyCorrect, + DOUBLE_CORRECT: BodyDoubleCorrect, + ELEVATING: BodyElevating, + RELAXED: BodyRelaxed, + SENDING_LOVE: BodySendingLove, + VOTING: BodyVoting, +}; + +export const illustrationHumanExpressionList: Record = { + ANGRY: ExpressionAngry, + CASUAL: ExpressionCasual, + CRYING: ExpressionCrying, + DECIDED: ExpressionDecided, + EXCITED: ExpressionExcited, + SAD_LEFT: ExpressionSadLeft, + SAD_RIGHT: ExpressionSadRight, + SMILE_WINK: ExpressionSmileWink, + SMILE: ExpressionSmile, + SURPRISED: ExpressionSurprised, + SUSPECTING: ExpressionSuspecting, +}; + +export const illustrationHumanHairsList: Record = { + AFRO: HairsAfro, + BALD: HairsBald, + BUN: HairsBun, + COOL: HairsCool, + CURLY_BANGS: HairsCurlyBangs, + CURLY: HairsCurly, + INFORMAL: HairsInformal, + LONG: HairsLong, + MIDDLE: HairsMiddle, + OLDSCHOOL: HairsOldschool, + PUNK: HairsPunk, + SHORT: HairsShort, +}; diff --git a/src/components/illustrationHuman/illustrationHumanType.ts b/src/components/illustrations/illustrationHuman/illustrationHumanType.ts similarity index 100% rename from src/components/illustrationHuman/illustrationHumanType.ts rename to src/components/illustrations/illustrationHuman/illustrationHumanType.ts diff --git a/src/components/illustrationHuman/index.ts b/src/components/illustrations/illustrationHuman/index.ts similarity index 100% rename from src/components/illustrationHuman/index.ts rename to src/components/illustrations/illustrationHuman/index.ts diff --git a/src/components/illustrationObject/illustrationObject.stories.tsx b/src/components/illustrations/illustrationObject/illustrationObject.stories.tsx similarity index 88% rename from src/components/illustrationObject/illustrationObject.stories.tsx rename to src/components/illustrations/illustrationObject/illustrationObject.stories.tsx index f24900386..31b1c8ce9 100644 --- a/src/components/illustrationObject/illustrationObject.stories.tsx +++ b/src/components/illustrations/illustrationObject/illustrationObject.stories.tsx @@ -3,7 +3,7 @@ import { IllustrationObject } from './illustrationObject'; import { IllustrationObjectType } from './illustrationObjectType'; const meta: Meta = { - title: 'components/IllustrationObject', + title: 'components/Illustrations/IllustrationObject', component: IllustrationObject, tags: ['autodocs'], }; @@ -24,12 +24,15 @@ export const Default: Story = { */ export const AvailableIllustrationObjects: Story = { render: () => { + const size = 160; + return (
{Object.keys(IllustrationObjectType).map((illustrationObjectType) => ( ))}
diff --git a/src/components/illustrationObject/illustrationObject.tsx b/src/components/illustrations/illustrationObject/illustrationObject.tsx similarity index 78% rename from src/components/illustrationObject/illustrationObject.tsx rename to src/components/illustrations/illustrationObject/illustrationObject.tsx index 20fa430ce..ad2dd7252 100644 --- a/src/components/illustrationObject/illustrationObject.tsx +++ b/src/components/illustrations/illustrationObject/illustrationObject.tsx @@ -9,11 +9,9 @@ export interface IIllustrationObjectProps extends SVGProps { object: IllustrationObjectType; } -const illustrationObjectSize = 160; - export const IllustrationObject: React.FC = (props) => { const { object, ...otherProps } = props; const IllustrationObject = illustrationObjectList[object]; - return ; + return ; }; diff --git a/src/components/illustrations/illustrationObject/illustrationObjectList.ts b/src/components/illustrations/illustrationObject/illustrationObjectList.ts new file mode 100644 index 000000000..ad08ac1fb --- /dev/null +++ b/src/components/illustrations/illustrationObject/illustrationObjectList.ts @@ -0,0 +1,53 @@ +import type { SVGProps } from 'react'; +import Action from '../../../assets/illustrations/objects/action.svg'; +import App from '../../../assets/illustrations/objects/app.svg'; +import Archive from '../../../assets/illustrations/objects/archive.svg'; +import Book from '../../../assets/illustrations/objects/book.svg'; +import Build from '../../../assets/illustrations/objects/build.svg'; +import Chain from '../../../assets/illustrations/objects/chain.svg'; +import Database from '../../../assets/illustrations/objects/database.svg'; +import Error from '../../../assets/illustrations/objects/error.svg'; +import Explore from '../../../assets/illustrations/objects/explore.svg'; +import Gas from '../../../assets/illustrations/objects/gas.svg'; +import Goal from '../../../assets/illustrations/objects/goal.svg'; +import Labels from '../../../assets/illustrations/objects/labels.svg'; +import Lightbulb from '../../../assets/illustrations/objects/lightbulb.svg'; +import MagnifyingGlass from '../../../assets/illustrations/objects/magnifying-glass.svg'; +import NotFound from '../../../assets/illustrations/objects/not-found.svg'; +import Security from '../../../assets/illustrations/objects/security.svg'; +import Settings from '../../../assets/illustrations/objects/settings.svg'; +import SmartContract from '../../../assets/illustrations/objects/smart-contract.svg'; +import Success from '../../../assets/illustrations/objects/success.svg'; +import Users from '../../../assets/illustrations/objects/users.svg'; +import Wagmi from '../../../assets/illustrations/objects/wagmi.svg'; +import Wallet from '../../../assets/illustrations/objects/wallet.svg'; +import Warning from '../../../assets/illustrations/objects/warning.svg'; +import { IllustrationObjectType } from './illustrationObjectType'; + +type IllustrationObjectComponent = React.FC>; + +export const illustrationObjectList: Record = { + [IllustrationObjectType.ACTION]: Action, + [IllustrationObjectType.APP]: App, + [IllustrationObjectType.ARCHIVE]: Archive, + [IllustrationObjectType.BOOK]: Book, + [IllustrationObjectType.BUILD]: Build, + [IllustrationObjectType.CHAIN]: Chain, + [IllustrationObjectType.DATABASE]: Database, + [IllustrationObjectType.ERROR]: Error, + [IllustrationObjectType.EXPLORE]: Explore, + [IllustrationObjectType.GAS]: Gas, + [IllustrationObjectType.GOAL]: Goal, + [IllustrationObjectType.LABELS]: Labels, + [IllustrationObjectType.LIGHTBULB]: Lightbulb, + [IllustrationObjectType.MAGNIFYING_GLASS]: MagnifyingGlass, + [IllustrationObjectType.NOT_FOUND]: NotFound, + [IllustrationObjectType.SECURITY]: Security, + [IllustrationObjectType.SETTINGS]: Settings, + [IllustrationObjectType.SMART_CONTRACT]: SmartContract, + [IllustrationObjectType.SUCCESS]: Success, + [IllustrationObjectType.USERS]: Users, + [IllustrationObjectType.WAGMI]: Wagmi, + [IllustrationObjectType.WALLET]: Wallet, + [IllustrationObjectType.WARNING]: Warning, +}; diff --git a/src/components/illustrationObject/illustrationObjectType.ts b/src/components/illustrations/illustrationObject/illustrationObjectType.ts similarity index 100% rename from src/components/illustrationObject/illustrationObjectType.ts rename to src/components/illustrations/illustrationObject/illustrationObjectType.ts diff --git a/src/components/illustrationObject/index.ts b/src/components/illustrations/illustrationObject/index.ts similarity index 100% rename from src/components/illustrationObject/index.ts rename to src/components/illustrations/illustrationObject/index.ts diff --git a/src/components/illustrations/index.ts b/src/components/illustrations/index.ts new file mode 100644 index 000000000..4d5890a08 --- /dev/null +++ b/src/components/illustrations/index.ts @@ -0,0 +1,2 @@ +export * from './illustrationHuman'; +export * from './illustrationObject'; diff --git a/src/components/index.ts b/src/components/index.ts index ded0e0a53..7170c53c0 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,4 @@ export * from './button'; export * from './icon'; -export * from './illustrationHuman'; -export * from './illustrationObject'; +export * from './illustrations'; export * from './spinner';