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..a6565ca --- /dev/null +++ b/src/components/Breadcrumb/index.module.scss @@ -0,0 +1,45 @@ +@use '../../settings/styles/utils/helpers/mixin' as mix; + +.list { + display: inline-flex; + align-items: center; + gap: 8px; + + .initial { + img { + @include mix.square(16px); + + @media only screen and (min-width: 2500px) { + @include mix.square(31.25px); + } + } + } + + .item { + display: inline-flex; + align-items: center; + gap: 8px; + + a { + display: block; + } + } + + .divider { + @include mix.square(8px); + + @media only screen and (min-width: 2500px) { + @include mix.square(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 ( +
+
+ +
+
+ ) +} 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}; +}