From 8e1cddc944566f5674e624d6271ddc9869507584 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Wed, 28 Dec 2022 11:17:53 -0300 Subject: [PATCH 1/2] feat(breadcrumb): created styles for large, medium devices --- src/App.tsx | 9 +++- src/assets/icons/arrow-right.svg | 10 +++++ src/assets/icons/home.svg | 10 +++++ src/components/Breadcrumb/index.module.scss | 47 +++++++++++++++++++++ src/components/Breadcrumb/index.tsx | 35 +++++++++++++++ src/pages/Introduction/index.module.scss | 33 +++++++++++++++ src/pages/Introduction/index.tsx | 16 +++++++ 7 files changed, 158 insertions(+), 2 deletions(-) create mode 100644 src/assets/icons/arrow-right.svg create mode 100644 src/assets/icons/home.svg create mode 100644 src/components/Breadcrumb/index.module.scss create mode 100644 src/components/Breadcrumb/index.tsx create mode 100644 src/pages/Introduction/index.module.scss create mode 100644 src/pages/Introduction/index.tsx diff --git a/src/App.tsx b/src/App.tsx index a471ad4..49cf0b4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,16 @@ -import './settings/styles/index.scss' - +import { Introduction } from './pages/Introduction' import { Header } from './template/Header' +import './settings/styles/index.scss' + export function App() { return ( <>
+ +
+ +
) } diff --git a/src/assets/icons/arrow-right.svg b/src/assets/icons/arrow-right.svg new file mode 100644 index 0000000..ba68356 --- /dev/null +++ b/src/assets/icons/arrow-right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/home.svg b/src/assets/icons/home.svg new file mode 100644 index 0000000..7fb4dad --- /dev/null +++ b/src/assets/icons/home.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Breadcrumb/index.module.scss b/src/components/Breadcrumb/index.module.scss new file mode 100644 index 0000000..45a8253 --- /dev/null +++ b/src/components/Breadcrumb/index.module.scss @@ -0,0 +1,47 @@ +.list { + display: inline-flex; + align-items: center; + gap: 8px; + + .initial { + img { + width: 16px; + height: 16px; + + @media screen and (min-width: 2500px) { + width: 31.25px; + height: 31.25px; + } + } + } + + .item { + display: inline-flex; + align-items: center; + gap: 8px; + + a { + display: block; + } + } + + .divider { + width: 8px; + height: 8px; + + @media screen and (min-width: 2500px) { + width: 15.62px; + height: 15.62px; + } + } + + a { + color: var(--clr-gray-400); + + transition: color 200ms linear; + + &:hover { + color: var(--clr-primary-blue-500); + } + } +} diff --git a/src/components/Breadcrumb/index.tsx b/src/components/Breadcrumb/index.tsx new file mode 100644 index 0000000..de6db90 --- /dev/null +++ b/src/components/Breadcrumb/index.tsx @@ -0,0 +1,35 @@ +import arrowRightIcon from '../../assets/icons/arrow-right.svg' +import initialHomeIcon from '../../assets/icons/home.svg' + +import css from './index.module.scss' + +import { HTMLAttributes } from 'react' + +interface BreadcrumbProps extends HTMLAttributes { + list: Array<{ name: string; href: string }> +} + +export function Breadcrumb({ list, ...props }: BreadcrumbProps) { + return ( +
+
    +
  • + + + +
    • + + {list.map(({ name, href }) => { + return ( +
  • +
    + ícone de divisão +
    + {name} +
    • + ) + })} +
+
+ ) +} diff --git a/src/pages/Introduction/index.module.scss b/src/pages/Introduction/index.module.scss new file mode 100644 index 0000000..48153d3 --- /dev/null +++ b/src/pages/Introduction/index.module.scss @@ -0,0 +1,33 @@ +@use '../../settings/styles/utils/helpers/functions' as function; + +.introduction { + margin-top: 29px; + + @media screen and (min-width: 2500px) { + margin-top: 31px; + } +} + +.container { + width: 100%; + padding: 0 16px; + + @media screen and (min-width: 1025px) { + width: function.fluid(1080px, 1280px); + margin: 0 auto; + padding: 0; + } + + @media screen and (min-width: 2500px) { + width: function.fluid(2299.68px, 2500px); + } +} + +.breadcrumb { + a { + font-size: var(--txt-xs); + line-height: 14.06px; + + text-transform: uppercase; + } +} diff --git a/src/pages/Introduction/index.tsx b/src/pages/Introduction/index.tsx new file mode 100644 index 0000000..c1f15a1 --- /dev/null +++ b/src/pages/Introduction/index.tsx @@ -0,0 +1,16 @@ +import { useMemo } from 'react' +import { Breadcrumb } from '../../components/Breadcrumb' + +import css from './index.module.scss' + +export function Introduction() { + let listBreadcrumb = useMemo(() => [{ name: 'Introduction', href: '/' }], []) + + return ( +
+
+ +
+
+ ) +} From f95235f6dcdd14fa32443e3f80263542fac358c0 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Wed, 28 Dec 2022 11:23:26 -0300 Subject: [PATCH 2/2] refactor(breadcrumb): created mixin for styles --- src/components/Breadcrumb/index.module.scss | 18 ++++++++---------- src/settings/styles/utils/helpers/_mixin.scss | 4 ++++ 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/Breadcrumb/index.module.scss b/src/components/Breadcrumb/index.module.scss index 45a8253..a6565ca 100644 --- a/src/components/Breadcrumb/index.module.scss +++ b/src/components/Breadcrumb/index.module.scss @@ -1,3 +1,5 @@ +@use '../../settings/styles/utils/helpers/mixin' as mix; + .list { display: inline-flex; align-items: center; @@ -5,12 +7,10 @@ .initial { img { - width: 16px; - height: 16px; + @include mix.square(16px); - @media screen and (min-width: 2500px) { - width: 31.25px; - height: 31.25px; + @media only screen and (min-width: 2500px) { + @include mix.square(31.25px); } } } @@ -26,12 +26,10 @@ } .divider { - width: 8px; - height: 8px; + @include mix.square(8px); - @media screen and (min-width: 2500px) { - width: 15.62px; - height: 15.62px; + @media only screen and (min-width: 2500px) { + @include mix.square(15.62px); } } diff --git a/src/settings/styles/utils/helpers/_mixin.scss b/src/settings/styles/utils/helpers/_mixin.scss index e69de29..80ec28f 100644 --- a/src/settings/styles/utils/helpers/_mixin.scss +++ b/src/settings/styles/utils/helpers/_mixin.scss @@ -0,0 +1,4 @@ +@mixin square($size) { + width: #{$size}; + height: #{$size}; +}