From 0afaaf825dd3c9377a7629a1228803d32d126026 Mon Sep 17 00:00:00 2001 From: Joao-Manuel-S-M Date: Wed, 5 Apr 2023 18:16:27 -0300 Subject: [PATCH 1/3] feat: created new component button --- src/components/Button/Button.stories.ts | 25 +++++++++ src/components/Button/Button.tsx | 7 +++ src/components/Button/Button.types.ts | 5 ++ src/components/Button/style.ts | 19 +++++++ src/pages/index.tsx | 4 ++ src/styles/Globals.ts | 6 ++- tsconfig.json | 72 +++++++++++++++---------- 7 files changed, 107 insertions(+), 31 deletions(-) create mode 100644 src/components/Button/Button.stories.ts create mode 100644 src/components/Button/Button.tsx create mode 100644 src/components/Button/Button.types.ts create mode 100644 src/components/Button/style.ts diff --git a/src/components/Button/Button.stories.ts b/src/components/Button/Button.stories.ts new file mode 100644 index 0000000..dd9163b --- /dev/null +++ b/src/components/Button/Button.stories.ts @@ -0,0 +1,25 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { ButtonProps } from './Button.types' +import { Button } from './Button' + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +const meta: Meta = { + title: 'Example/Button', + component: Button, + tags: ['autodocs'], + argTypes: { + label: { + 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: { + label: 'Button', + }, +} diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx new file mode 100644 index 0000000..cf4476a --- /dev/null +++ b/src/components/Button/Button.tsx @@ -0,0 +1,7 @@ +import * as S from './style' +import { ButtonProps } from './Button.types' + + +export const Button = ({label, onClick}:ButtonProps) => { + return {label} +} diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts new file mode 100644 index 0000000..61811cd --- /dev/null +++ b/src/components/Button/Button.types.ts @@ -0,0 +1,5 @@ + +export interface ButtonProps { + label: string; + onClick: () => void; +} \ No newline at end of file diff --git a/src/components/Button/style.ts b/src/components/Button/style.ts new file mode 100644 index 0000000..9a848cb --- /dev/null +++ b/src/components/Button/style.ts @@ -0,0 +1,19 @@ +import styled from 'styled-components' + +export const Button = styled.button` + font-size: 16px; + color: #DEB4FF; + width: 121px; + height: 35px; + border: 1px solid #DEB4FF; + background: none; + border-radius: 3px; + + &:hover { + background-color: #DEB4FF; + color: #161217; + } + +` + + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f7fca58..2c98b48 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,7 @@ import Head from 'next/head' import * as S from '../styles/pages/Home' +import { Button } from 'src/components/Button/style' + export default function Home() { return ( @@ -11,7 +13,9 @@ export default function Home() {
+ Open Start +
) diff --git a/src/styles/Globals.ts b/src/styles/Globals.ts index 6096dc5..aebc4d9 100644 --- a/src/styles/Globals.ts +++ b/src/styles/Globals.ts @@ -1,13 +1,14 @@ import { createGlobalStyle } from 'styled-components' const GlobalStyle = createGlobalStyle` + @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap'); html, body { padding: 0; margin: 0; background: black; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + + } a { color: inherit; @@ -15,6 +16,7 @@ const GlobalStyle = createGlobalStyle` } * { box-sizing: border-box; + font-family: 'Inter', sans-serif; } ` 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" + ] } From 0de16a9487c2f17c5db98db34b6ce887ab6d5a93 Mon Sep 17 00:00:00 2001 From: Joao-Manuel-S-M Date: Thu, 6 Apr 2023 19:43:25 -0300 Subject: [PATCH 2/3] fix: improved code semantics --- src/components/Button/Button.tsx | 4 ++-- src/components/Button/Button.types.ts | 9 ++++----- src/pages/index.tsx | 2 +- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index cf4476a..54bb749 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -2,6 +2,6 @@ import * as S from './style' import { ButtonProps } from './Button.types' -export const Button = ({label, onClick}:ButtonProps) => { - return {label} +export const Button = ({label, ...props}:ButtonProps) => { + return {label} } diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts index 61811cd..7424881 100644 --- a/src/components/Button/Button.types.ts +++ b/src/components/Button/Button.types.ts @@ -1,5 +1,4 @@ - -export interface ButtonProps { - label: string; - onClick: () => void; -} \ No newline at end of file +import { ButtonHTMLAttributes } from "react"; +export type ButtonProps = ButtonHTMLAttributes & { + label: string +} \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2c98b48..f1b532a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -15,7 +15,7 @@ export default function Home() {
Open Start - +
) From 4e743841c2831bf503217c50e5ab497647e3131b Mon Sep 17 00:00:00 2001 From: Joao-Manuel-S-M Date: Mon, 10 Apr 2023 18:24:39 -0300 Subject: [PATCH 3/3] feat: create new component card --- public/arrow.svg | 3 +++ public/members.svg | 3 +++ public/message.svg | 3 +++ public/projects.svg | 3 +++ src/components/Card/Card.tsx | 19 +++++++++++++++++++ src/components/Card/Card.types.ts | 3 +++ src/components/Card/style.ts | 22 ++++++++++++++++++++++ src/pages/index.tsx | 6 +++++- src/styles/Globals.ts | 5 +++-- src/styles/pages/Home.ts | 5 +++++ 10 files changed, 69 insertions(+), 3 deletions(-) create mode 100644 public/arrow.svg create mode 100644 public/members.svg create mode 100644 public/message.svg create mode 100644 public/projects.svg create mode 100644 src/components/Card/Card.tsx create mode 100644 src/components/Card/Card.types.ts create mode 100644 src/components/Card/style.ts diff --git a/public/arrow.svg b/public/arrow.svg new file mode 100644 index 0000000..e22e61a --- /dev/null +++ b/public/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/members.svg b/public/members.svg new file mode 100644 index 0000000..ca689c4 --- /dev/null +++ b/public/members.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/message.svg b/public/message.svg new file mode 100644 index 0000000..eb75632 --- /dev/null +++ b/public/message.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/projects.svg b/public/projects.svg new file mode 100644 index 0000000..03943c7 --- /dev/null +++ b/public/projects.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx new file mode 100644 index 0000000..f3fa55e --- /dev/null +++ b/src/components/Card/Card.tsx @@ -0,0 +1,19 @@ +import * as C from './style' +import { CardProps } from './Card.types' + +export const Card = ({label}:CardProps) => { + + return ( + + {/* Componente icon */} + + + {label} + + + + {/* Componente icon */} + + ) + +} \ No newline at end of file diff --git a/src/components/Card/Card.types.ts b/src/components/Card/Card.types.ts new file mode 100644 index 0000000..2ac16a6 --- /dev/null +++ b/src/components/Card/Card.types.ts @@ -0,0 +1,3 @@ +export type CardProps = { + label: string | any, +} \ No newline at end of file diff --git a/src/components/Card/style.ts b/src/components/Card/style.ts new file mode 100644 index 0000000..85f23a2 --- /dev/null +++ b/src/components/Card/style.ts @@ -0,0 +1,22 @@ +import Styled from 'styled-components' + +export const Card = Styled.a` + background: rgba(255, 255, 255, 0.06); + backdrop-filter: blur(90px); + width: 386px; + height: 88px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 8px; + color: #fff; +` + +export const Label = Styled.span` + width: 207px; + font-weight: 400; + font-size: 16px; + margin: 0 38px 0 30px; + line-height: 20px; +` + \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f1b532a..0cb483f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,8 @@ import Head from 'next/head' import * as S from '../styles/pages/Home' import { Button } from 'src/components/Button/style' +import { Card } from 'src/components/Card/Card' + export default function Home() { @@ -13,7 +15,9 @@ export default function Home() {
- + Conheça os membros que fazem a He4rt acontecer} /> + Encontre mentores para conversar e tirar dúvidas} /> + Participe de projetos para fortalecer seu portfóli} /> Open Start
diff --git a/src/styles/Globals.ts b/src/styles/Globals.ts index aebc4d9..f1ecd90 100644 --- a/src/styles/Globals.ts +++ b/src/styles/Globals.ts @@ -1,12 +1,13 @@ import { createGlobalStyle } from 'styled-components' const GlobalStyle = createGlobalStyle` - @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap'); + @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'); html, body { padding: 0; margin: 0; - background: black; + background: #160e13; +; } diff --git a/src/styles/pages/Home.ts b/src/styles/pages/Home.ts index 36acb09..bf4be5a 100644 --- a/src/styles/pages/Home.ts +++ b/src/styles/pages/Home.ts @@ -6,3 +6,8 @@ export const Hero = styled.div` padding: 96px 0; text-align: center; ` + +export const TextHighlight = styled.span` + color: #DEB4FF; + font-weight: 500; +` \ No newline at end of file