From f0202872ae575ad44678facd712b3001b2c5a8dc Mon Sep 17 00:00:00 2001 From: Suami Rocha Date: Fri, 7 Apr 2023 16:52:36 -0300 Subject: [PATCH] feat: new arrow component --- public/arrow.svg | 3 ++ public/icons_coffee.svg | 3 ++ public/icons_layers.svg | 3 ++ public/icons_member.svg | 3 ++ public/icons_talk.svg | 3 ++ public/logo_heart.svg | 4 ++ public/logo_name.svg | 13 ++++++ public/redeSocial_Discord.svg | 3 ++ public/redeSocial_Github.svg | 3 ++ public/redeSocial_Twitter.svg | 3 ++ src/components/Icon/Icon.stories.ts | 25 ++++++++++ src/components/Icon/Icon.tsx | 8 ++++ src/components/Icon/Icon.types.tsx | 3 ++ src/components/Icon/index.ts | 2 + src/components/Icon/style.ts | 6 +++ src/pages/index.tsx | 2 + tsconfig.json | 72 +++++++++++++++++------------ 17 files changed, 130 insertions(+), 29 deletions(-) create mode 100644 public/arrow.svg create mode 100644 public/icons_coffee.svg create mode 100644 public/icons_layers.svg create mode 100644 public/icons_member.svg create mode 100644 public/icons_talk.svg create mode 100644 public/logo_heart.svg create mode 100644 public/logo_name.svg create mode 100644 public/redeSocial_Discord.svg create mode 100644 public/redeSocial_Github.svg create mode 100644 public/redeSocial_Twitter.svg create mode 100644 src/components/Icon/Icon.stories.ts create mode 100644 src/components/Icon/Icon.tsx create mode 100644 src/components/Icon/Icon.types.tsx create mode 100644 src/components/Icon/index.ts create mode 100644 src/components/Icon/style.ts diff --git a/public/arrow.svg b/public/arrow.svg new file mode 100644 index 0000000..8709027 --- /dev/null +++ b/public/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons_coffee.svg b/public/icons_coffee.svg new file mode 100644 index 0000000..48f6274 --- /dev/null +++ b/public/icons_coffee.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons_layers.svg b/public/icons_layers.svg new file mode 100644 index 0000000..608166e --- /dev/null +++ b/public/icons_layers.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons_member.svg b/public/icons_member.svg new file mode 100644 index 0000000..831dd95 --- /dev/null +++ b/public/icons_member.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons_talk.svg b/public/icons_talk.svg new file mode 100644 index 0000000..9ffbf96 --- /dev/null +++ b/public/icons_talk.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/logo_heart.svg b/public/logo_heart.svg new file mode 100644 index 0000000..a6c43e7 --- /dev/null +++ b/public/logo_heart.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/logo_name.svg b/public/logo_name.svg new file mode 100644 index 0000000..0ff2409 --- /dev/null +++ b/public/logo_name.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/redeSocial_Discord.svg b/public/redeSocial_Discord.svg new file mode 100644 index 0000000..9a8aa03 --- /dev/null +++ b/public/redeSocial_Discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/redeSocial_Github.svg b/public/redeSocial_Github.svg new file mode 100644 index 0000000..3209d08 --- /dev/null +++ b/public/redeSocial_Github.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/redeSocial_Twitter.svg b/public/redeSocial_Twitter.svg new file mode 100644 index 0000000..8dfa52b --- /dev/null +++ b/public/redeSocial_Twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icon/Icon.stories.ts b/src/components/Icon/Icon.stories.ts new file mode 100644 index 0000000..d7b39db --- /dev/null +++ b/src/components/Icon/Icon.stories.ts @@ -0,0 +1,25 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { Icon } from './Icon' +import { IconProps } from './Icon.types' + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +const meta: Meta = { + title: 'Example/Icon', + component: Icon, + tags: ['autodocs'], + argTypes: { + src: { + type: 'string', + }, + }, +} + +export default meta +type Story = StoryObj + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Primary: Story = { + args: { + src: 'arrow', + }, +} diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx new file mode 100644 index 0000000..4d217ae --- /dev/null +++ b/src/components/Icon/Icon.tsx @@ -0,0 +1,8 @@ + +import { IconProps } from './Icon.types' +import * as S from './style' + +export const Icon = ({src,...props}:IconProps) => { + + return +} \ No newline at end of file diff --git a/src/components/Icon/Icon.types.tsx b/src/components/Icon/Icon.types.tsx new file mode 100644 index 0000000..67f6a19 --- /dev/null +++ b/src/components/Icon/Icon.types.tsx @@ -0,0 +1,3 @@ +import { ImgHTMLAttributes } from "react" + +export type IconProps = ImgHTMLAttributes \ No newline at end of file diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts new file mode 100644 index 0000000..b0399ae --- /dev/null +++ b/src/components/Icon/index.ts @@ -0,0 +1,2 @@ +export { Icon } from './Icon' +export type { IconProps } from './Icon.types' diff --git a/src/components/Icon/style.ts b/src/components/Icon/style.ts new file mode 100644 index 0000000..36d8ec3 --- /dev/null +++ b/src/components/Icon/style.ts @@ -0,0 +1,6 @@ +import styled from "styled-components"; + +export const Icon = styled.img` + + +` \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f7fca58..e06fbee 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,4 +1,5 @@ import Head from 'next/head' +import { Icon } from 'src/components/Icon' import * as S from '../styles/pages/Home' export default function Home() { @@ -12,6 +13,7 @@ export default function Home() {
Open Start +
) diff --git a/tsconfig.json b/tsconfig.json index 967ee69..98c0a17 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,32 +1,46 @@ { - "compilerOptions": { - "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "react-jsx", - "baseUrl": ".", - "paths": { - "@components/*": ["components/*"], - "@utils/*": ["utils/*"], - "@lib/*": ["lib/*"], - "@services/*": ["services/*"] - }, - "incremental": true - }, - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx", - "src/pages/_document.tss" + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" ], - "exclude": ["node_modules"] + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "baseUrl": ".", + "paths": { + "@components/*": [ + "components/*" + ], + "@utils/*": [ + "utils/*" + ], + "@lib/*": [ + "lib/*" + ], + "@services/*": [ + "services/*" + ] + }, + "incremental": true + }, + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + "src/pages/_document.tss" + ], + "exclude": [ + "node_modules" + ] }