wex-ui-lib 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +2296 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +4 -5
- package/dist/index.esm.js +2273 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/types/components/Button/index.d.ts +3 -0
- package/dist/types/components/Hero/index.d.ts +3 -0
- package/dist/types/components/Navbar/index.d.ts +3 -0
- package/dist/types/components/Showcase/index.d.ts +3 -0
- package/dist/types/samples/Holik/Homepage.d.ts +2 -0
- package/dist/{src → types}/shared/components/Fade.d.ts +1 -1
- package/dist/{shared → types/shared}/components/Icon.d.ts +2 -1
- package/package.json +28 -19
- package/.storybook/main.ts +0 -19
- package/.storybook/manager-head.html +0 -1
- package/.storybook/preview.ts +0 -15
- package/dist/components/Button/index.d.ts +0 -2
- package/dist/components/Hero/index.d.ts +0 -2
- package/dist/components/Navbar/index.d.ts +0 -2
- package/dist/components/Showcase/index.d.ts +0 -2
- package/dist/index.js +0 -345
- package/dist/index.js.map +0 -1
- package/dist/index.mjs +0 -345
- package/dist/index.mjs.map +0 -1
- package/dist/samples/Holik/Homepage.d.ts +0 -1
- package/dist/shared/components/Fade.d.ts +0 -7
- package/dist/src/components/Button/index.d.ts +0 -2
- package/dist/src/components/Button/index.stories.d.ts +0 -12
- package/dist/src/components/Button/index.types.d.ts +0 -10
- package/dist/src/components/Hero/index.d.ts +0 -2
- package/dist/src/components/Hero/index.stories.d.ts +0 -12
- package/dist/src/components/Hero/index.types.d.ts +0 -12
- package/dist/src/components/Navbar/index.d.ts +0 -2
- package/dist/src/components/Navbar/index.stories.d.ts +0 -7
- package/dist/src/components/Navbar/index.types.d.ts +0 -25
- package/dist/src/components/Showcase/index.d.ts +0 -2
- package/dist/src/components/Showcase/index.stories.d.ts +0 -7
- package/dist/src/components/Showcase/index.types.d.ts +0 -9
- package/dist/src/samples/Holik/Homepage.d.ts +0 -1
- package/dist/src/samples/Holik/index.stories.d.ts +0 -10
- package/dist/src/shared/components/Icon.d.ts +0 -11
- package/dist/src/shared/styles/animations.d.ts +0 -6
- package/dist/src/shared/styles/theme.d.ts +0 -7
- package/dist/src/shared/types.d.ts +0 -15
- package/dist/src/shared/utils/formatters.d.ts +0 -2
- package/dist/src/shared/utils/useIntObs.d.ts +0 -19
- package/public/logo.png +0 -0
- package/rollup.config.mjs +0 -42
- package/src/components/Button/index.stories.tsx +0 -54
- package/src/components/Button/index.tsx +0 -157
- package/src/components/Button/index.types.ts +0 -11
- package/src/components/Hero/index.stories.tsx +0 -40
- package/src/components/Hero/index.tsx +0 -76
- package/src/components/Hero/index.types.ts +0 -13
- package/src/components/Navbar/index.stories.tsx +0 -59
- package/src/components/Navbar/index.tsx +0 -196
- package/src/components/Navbar/index.types.ts +0 -27
- package/src/components/Showcase/index.stories.tsx +0 -54
- package/src/components/Showcase/index.tsx +0 -66
- package/src/components/Showcase/index.types.ts +0 -9
- package/src/index.ts +0 -6
- package/src/samples/Holik/Homepage.tsx +0 -141
- package/src/samples/Holik/index.stories.tsx +0 -17
- package/src/shared/components/Fade.tsx +0 -48
- package/src/shared/components/Icon.tsx +0 -81
- package/src/shared/styles/animations.ts +0 -80
- package/src/shared/styles/global.css +0 -6
- package/src/shared/styles/theme.ts +0 -7
- package/src/shared/types.ts +0 -18
- package/src/shared/utils/formatters.ts +0 -12
- package/src/shared/utils/useIntObs.ts +0 -112
- package/tsconfig.json +0 -30
- /package/dist/{components → types/components}/Button/index.stories.d.ts +0 -0
- /package/dist/{components → types/components}/Button/index.types.d.ts +0 -0
- /package/dist/{components → types/components}/Hero/index.stories.d.ts +0 -0
- /package/dist/{components → types/components}/Hero/index.types.d.ts +0 -0
- /package/dist/{components → types/components}/Navbar/index.stories.d.ts +0 -0
- /package/dist/{components → types/components}/Navbar/index.types.d.ts +0 -0
- /package/dist/{components → types/components}/Showcase/index.stories.d.ts +0 -0
- /package/dist/{components → types/components}/Showcase/index.types.d.ts +0 -0
- /package/dist/{src → types}/index.d.ts +0 -0
- /package/dist/{samples → types/samples}/Holik/index.stories.d.ts +0 -0
- /package/dist/{shared → types/shared}/styles/animations.d.ts +0 -0
- /package/dist/{shared → types/shared}/styles/theme.d.ts +0 -0
- /package/dist/{shared → types/shared}/types.d.ts +0 -0
- /package/dist/{shared → types/shared}/utils/formatters.d.ts +0 -0
- /package/dist/{shared → types/shared}/utils/useIntObs.d.ts +0 -0
@@ -1,19 +0,0 @@
|
|
1
|
-
interface UseIntObsOptions {
|
2
|
-
threshold?: number | number[];
|
3
|
-
root?: any;
|
4
|
-
rootMargin?: string;
|
5
|
-
freezeOnceVisible?: boolean;
|
6
|
-
initialIsIntersecting?: boolean;
|
7
|
-
onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
|
8
|
-
}
|
9
|
-
type UseIntObsResult = [
|
10
|
-
(node: Element | null) => void,
|
11
|
-
boolean,
|
12
|
-
IntersectionObserverEntry | undefined
|
13
|
-
] & {
|
14
|
-
ref: (node: Element | null) => void;
|
15
|
-
isIntersecting: boolean;
|
16
|
-
entry: IntersectionObserverEntry | undefined;
|
17
|
-
};
|
18
|
-
export declare function useIntObs({ threshold, root, rootMargin, freezeOnceVisible, initialIsIntersecting, onChange, }?: UseIntObsOptions): UseIntObsResult;
|
19
|
-
export {};
|
package/public/logo.png
DELETED
Binary file
|
package/rollup.config.mjs
DELETED
@@ -1,42 +0,0 @@
|
|
1
|
-
import resolve from '@rollup/plugin-node-resolve';
|
2
|
-
import typescript from '@rollup/plugin-typescript';
|
3
|
-
import commonjs from '@rollup/plugin-commonjs';
|
4
|
-
import dts from 'rollup-plugin-dts';
|
5
|
-
import peerDepsExternalPlugin from 'rollup-plugin-peer-deps-external';
|
6
|
-
import terser from '@rollup/plugin-terser';
|
7
|
-
import postcss from "rollup-plugin-postcss";
|
8
|
-
|
9
|
-
const packageJson = require('./package.json')
|
10
|
-
|
11
|
-
export default [
|
12
|
-
{
|
13
|
-
input: 'src/index.ts',
|
14
|
-
output: [
|
15
|
-
{
|
16
|
-
file: packageJson.main,
|
17
|
-
format: 'cjs',
|
18
|
-
sourcemap: true
|
19
|
-
},
|
20
|
-
{
|
21
|
-
file: packageJson.module,
|
22
|
-
format: 'esm',
|
23
|
-
sourcemap: true
|
24
|
-
},
|
25
|
-
],
|
26
|
-
plugins: [
|
27
|
-
peerDepsExternalPlugin(),
|
28
|
-
resolve(),
|
29
|
-
commonjs(),
|
30
|
-
typescript({ tsconfig: './tsconfig.json' }),
|
31
|
-
terser(),
|
32
|
-
postcss()
|
33
|
-
],
|
34
|
-
external: ['react', 'react-dom']
|
35
|
-
},
|
36
|
-
{
|
37
|
-
input: './src/index.ts',
|
38
|
-
output: [{ file: packageJson.types }],
|
39
|
-
plugins: [dts.default()],
|
40
|
-
external: [/\.css/]
|
41
|
-
}
|
42
|
-
]
|
@@ -1,54 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import Button from '.'
|
3
|
-
import { ButtonProps } from './index.types'
|
4
|
-
import { Meta, StoryObj } from '@storybook/react/*'
|
5
|
-
|
6
|
-
type StoryProps = ButtonProps & { buttonText: string }
|
7
|
-
|
8
|
-
const meta: Meta<StoryProps> = {
|
9
|
-
title: 'Components/Button',
|
10
|
-
component: Button,
|
11
|
-
argTypes: { onClick: { action: 'Button clicked!' } },
|
12
|
-
parameters: {
|
13
|
-
layout: 'centered',
|
14
|
-
},
|
15
|
-
tags: ['autodocs'],
|
16
|
-
}
|
17
|
-
|
18
|
-
export default meta
|
19
|
-
|
20
|
-
type Story = StoryObj<StoryProps>
|
21
|
-
|
22
|
-
export const Default: Story = {
|
23
|
-
args: {
|
24
|
-
buttonText: 'Button',
|
25
|
-
type: 'default',
|
26
|
-
},
|
27
|
-
render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
|
28
|
-
}
|
29
|
-
|
30
|
-
export const Rounded: Story = {
|
31
|
-
args: {
|
32
|
-
buttonText: 'Button',
|
33
|
-
type: 'rounded',
|
34
|
-
arrow: 'arrow-caret'
|
35
|
-
},
|
36
|
-
render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
|
37
|
-
}
|
38
|
-
|
39
|
-
export const Pill: Story = {
|
40
|
-
args: {
|
41
|
-
buttonText: 'Button',
|
42
|
-
type: 'pill',
|
43
|
-
},
|
44
|
-
render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
|
45
|
-
}
|
46
|
-
|
47
|
-
export const Underlined: Story = {
|
48
|
-
args: {
|
49
|
-
buttonText: 'Button',
|
50
|
-
type: 'underlined',
|
51
|
-
arrow: 'arrow-long'
|
52
|
-
},
|
53
|
-
render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
|
54
|
-
}
|
@@ -1,157 +0,0 @@
|
|
1
|
-
import React from "react"
|
2
|
-
import styled from '@emotion/styled';
|
3
|
-
import Icon from '../../shared/components/Icon';
|
4
|
-
import { theme } from '../../shared/styles/theme';
|
5
|
-
import { ButtonProps } from './index.types';
|
6
|
-
import { formatText } from "../../shared/utils/formatters";
|
7
|
-
|
8
|
-
export default function Button(props: ButtonProps) {
|
9
|
-
const {
|
10
|
-
children,
|
11
|
-
onClick,
|
12
|
-
type,
|
13
|
-
colors,
|
14
|
-
arrow,
|
15
|
-
font = {
|
16
|
-
size: '16px',
|
17
|
-
casing: 'uppercase',
|
18
|
-
weight: '600'
|
19
|
-
},
|
20
|
-
} = props
|
21
|
-
|
22
|
-
switch (type) {
|
23
|
-
default:
|
24
|
-
return (
|
25
|
-
<DefaultButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
|
26
|
-
{font.casing ? formatText(children as string, font.casing) : children}
|
27
|
-
{arrow &&
|
28
|
-
<Icon icon={arrow} color={colors?.text || theme.white} />
|
29
|
-
}
|
30
|
-
</DefaultButton>
|
31
|
-
)
|
32
|
-
case "rounded":
|
33
|
-
return (
|
34
|
-
<RoundedButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
|
35
|
-
{font.casing ? formatText(children as string, font.casing) : children}
|
36
|
-
{arrow &&
|
37
|
-
<Icon icon={arrow} color={colors?.text || theme.white} />
|
38
|
-
}
|
39
|
-
</RoundedButton>
|
40
|
-
)
|
41
|
-
case "pill":
|
42
|
-
return (
|
43
|
-
<PillButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
|
44
|
-
{font.casing ? formatText(children as string, font.casing) : children}
|
45
|
-
{arrow &&
|
46
|
-
<Icon icon={arrow} color={colors?.text || theme.white} />
|
47
|
-
}
|
48
|
-
</PillButton>
|
49
|
-
)
|
50
|
-
case "underlined":
|
51
|
-
return (
|
52
|
-
<UnderlinedButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
|
53
|
-
{font.casing ? formatText(children as string, font.casing) : children}
|
54
|
-
{arrow &&
|
55
|
-
<Icon icon={arrow} color={colors?.text || theme.primary} />
|
56
|
-
}
|
57
|
-
</UnderlinedButton>
|
58
|
-
)
|
59
|
-
}
|
60
|
-
}
|
61
|
-
|
62
|
-
const DefaultButton = styled.button<{ colors?: ButtonProps['colors'], font?: ButtonProps['font'], hasArrow?: boolean }>`
|
63
|
-
all: unset;
|
64
|
-
display: flex;
|
65
|
-
align-items: center;
|
66
|
-
padding: 10px 14px;
|
67
|
-
letter-spacing: 1px;
|
68
|
-
font-size: ${props => props.font?.size};
|
69
|
-
font-weight: ${props => props.font?.weight};
|
70
|
-
cursor: pointer;
|
71
|
-
width: fit-content;
|
72
|
-
grid-area: button;
|
73
|
-
transition: filter 0.3s, background-color 0.3s;
|
74
|
-
gap: 11px;
|
75
|
-
background-color: ${props => props.colors?.background || theme.primary};
|
76
|
-
color: ${props => props.colors?.text || theme.white};
|
77
|
-
position: relative;
|
78
|
-
svg {
|
79
|
-
fill: ${props => props.colors?.text || theme.white};
|
80
|
-
transition: all 0.3s;
|
81
|
-
}
|
82
|
-
&:hover{
|
83
|
-
${props => props.colors?.backgroundHover ? `background-color: ${props.colors?.backgroundHover}` : `filter: brightness(1.4)`};
|
84
|
-
color: ${props => props.colors?.textHover || theme.white};
|
85
|
-
svg {
|
86
|
-
fill: ${props => props.colors?.textHover || theme.white};
|
87
|
-
transform: translateX(5px);
|
88
|
-
}
|
89
|
-
&::after{
|
90
|
-
transform: translateX(4px);
|
91
|
-
}
|
92
|
-
}
|
93
|
-
&::after{
|
94
|
-
display: ${props => props.hasArrow ? "unset" : "none"};
|
95
|
-
content: "";
|
96
|
-
width: 100%;
|
97
|
-
height: 100%;
|
98
|
-
position: absolute;
|
99
|
-
transition: all 0.3s;
|
100
|
-
background-color: ${props => props.colors?.background || theme.primary};
|
101
|
-
left: 0;
|
102
|
-
top: 0;
|
103
|
-
z-index: -1;
|
104
|
-
border-radius: inherit;
|
105
|
-
transform-origin: left;
|
106
|
-
}
|
107
|
-
`
|
108
|
-
|
109
|
-
const UnderlinedButton = styled(DefaultButton)`
|
110
|
-
background-color: ${props => props.colors?.background || 'transparent'};
|
111
|
-
color: ${props => props.color || theme.black};
|
112
|
-
padding: 10px 0px;
|
113
|
-
letter-spacing: 2px;
|
114
|
-
&::before{
|
115
|
-
content: "";
|
116
|
-
position: absolute;
|
117
|
-
left: 0;
|
118
|
-
bottom: 0;
|
119
|
-
width: 99%;
|
120
|
-
height: 2.5px;
|
121
|
-
background-color: ${props => props.colors?.border || theme.primary};
|
122
|
-
transition: 0.2s;
|
123
|
-
}
|
124
|
-
svg{
|
125
|
-
fill: ${props => props.colors?.border || theme.primary};
|
126
|
-
path {
|
127
|
-
fill: ${props => props.colors?.border || theme.primary};
|
128
|
-
}
|
129
|
-
}
|
130
|
-
&::after{
|
131
|
-
display: none;
|
132
|
-
}
|
133
|
-
&:hover{
|
134
|
-
color: ${props => props.colors?.textHover || theme.black};
|
135
|
-
transform: translateY(-1px);
|
136
|
-
svg{
|
137
|
-
transform: translateX(6px);
|
138
|
-
fill: ${props => props.colors?.borderHover || theme.primary};
|
139
|
-
path {
|
140
|
-
fill: ${props => props.colors?.borderHover || theme.primary};
|
141
|
-
}
|
142
|
-
}
|
143
|
-
&::before{
|
144
|
-
transform: translateY(4px);
|
145
|
-
}
|
146
|
-
}
|
147
|
-
`
|
148
|
-
|
149
|
-
const PillButton = styled(DefaultButton)`
|
150
|
-
border-radius: 30px;
|
151
|
-
letter-spacing: 1px;
|
152
|
-
text-transform: uppercase;
|
153
|
-
`
|
154
|
-
|
155
|
-
const RoundedButton = styled(DefaultButton)`
|
156
|
-
border-radius: 4px;
|
157
|
-
`
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import { ArrowIcon } from "../../shared/components/Icon"
|
2
|
-
import { ComponentColors, ComponentFont } from "../../shared/types"
|
3
|
-
|
4
|
-
export type ButtonProps = {
|
5
|
-
children?: React.ReactNode | string,
|
6
|
-
onClick?: () => void,
|
7
|
-
type?: "default" | "rounded" | "pill" | "underlined",
|
8
|
-
colors?: ComponentColors
|
9
|
-
font?: ComponentFont
|
10
|
-
arrow?: ArrowIcon
|
11
|
-
}
|
@@ -1,40 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
3
|
-
import Hero from '.';
|
4
|
-
import Button from '../Button';
|
5
|
-
|
6
|
-
const meta = {
|
7
|
-
title: 'Components/Hero',
|
8
|
-
component: Hero,
|
9
|
-
parameters: {
|
10
|
-
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
11
|
-
layout: 'fullscreen',
|
12
|
-
},
|
13
|
-
} satisfies Meta<typeof Hero>;
|
14
|
-
|
15
|
-
export default meta;
|
16
|
-
|
17
|
-
type Story = StoryObj<typeof meta>;
|
18
|
-
|
19
|
-
export const Default: Story = {
|
20
|
-
render: () =>
|
21
|
-
<Hero
|
22
|
-
height='100vh'
|
23
|
-
imageUrls={['https://images.unsplash.com/photo-1628745277862-bc0b2d68c50c']}
|
24
|
-
overlay={{
|
25
|
-
color: "black",
|
26
|
-
opacity: "50%"
|
27
|
-
}}>
|
28
|
-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', color: 'white' }}>
|
29
|
-
<h2>Donde el lujo se transforma en el arte de vivir</h2>
|
30
|
-
<h2>60 años creando espacios únicos que inspiran.</h2>
|
31
|
-
<Button
|
32
|
-
arrow='arrow-caret'
|
33
|
-
font={{ casing: 'first-capitalized' }}
|
34
|
-
colors={{ background: 'black' }}
|
35
|
-
>
|
36
|
-
Transformá tu espacio
|
37
|
-
</Button>
|
38
|
-
</div>
|
39
|
-
</Hero>
|
40
|
-
};
|
@@ -1,76 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react'
|
2
|
-
import styled from '@emotion/styled'
|
3
|
-
import { HeroProps } from './index.types'
|
4
|
-
import { theme } from '../../shared/styles/theme'
|
5
|
-
import { Opacity } from '../../shared/types'
|
6
|
-
|
7
|
-
export default function Hero(props: HeroProps) {
|
8
|
-
const {
|
9
|
-
children,
|
10
|
-
imageUrls=[""],
|
11
|
-
overlay,
|
12
|
-
marginTop,
|
13
|
-
height
|
14
|
-
} = props
|
15
|
-
|
16
|
-
const [activeBackgroundUrl, setActiveBackgroundUrl] = useState<string>(imageUrls && imageUrls[0] ? imageUrls[0] : "")
|
17
|
-
|
18
|
-
return (
|
19
|
-
<>
|
20
|
-
<Container
|
21
|
-
backgroundUrl={activeBackgroundUrl}
|
22
|
-
marginTop={marginTop}
|
23
|
-
height={height}
|
24
|
-
>
|
25
|
-
{overlay && (
|
26
|
-
<Overlay color={overlay.color} opacity={overlay.opacity}/>
|
27
|
-
)}
|
28
|
-
<HeroContent>
|
29
|
-
{children}
|
30
|
-
</HeroContent>
|
31
|
-
</Container>
|
32
|
-
</>
|
33
|
-
)
|
34
|
-
}
|
35
|
-
|
36
|
-
const Container = styled.div<{backgroundUrl: string, marginTop: HeroProps['marginTop'], height: HeroProps['height']}>`
|
37
|
-
position: relative;
|
38
|
-
display: flex;
|
39
|
-
flex-direction: column;
|
40
|
-
align-items: flex-start;
|
41
|
-
justify-content: center;
|
42
|
-
position: relative;
|
43
|
-
width: 100vw;
|
44
|
-
height: 100vh;
|
45
|
-
height: ${props => `calc(${props.height} - ${props.marginTop})`};
|
46
|
-
margin-top: ${props => props.marginTop};
|
47
|
-
background-image: url(${props => props.backgroundUrl});
|
48
|
-
/* background-color: rgba(76, 88, 97, 0.7);
|
49
|
-
background-blend-mode: luminosity; */
|
50
|
-
background-position-y: 69%;
|
51
|
-
background-size: cover;
|
52
|
-
padding: 0 8vw;
|
53
|
-
@media only screen and (max-width: 800px) {
|
54
|
-
padding: 80px 10px;
|
55
|
-
svg {
|
56
|
-
max-height: 300px;
|
57
|
-
transform: translateX(20px);
|
58
|
-
}
|
59
|
-
}
|
60
|
-
`
|
61
|
-
|
62
|
-
const Overlay = styled.div<{color: string, opacity: Opacity}>`
|
63
|
-
position: absolute;
|
64
|
-
width: 100%;
|
65
|
-
height: 100%;
|
66
|
-
left: 0;
|
67
|
-
top: 0;
|
68
|
-
z-index: 1;
|
69
|
-
background-color: ${props => props.color};
|
70
|
-
opacity: ${props => props.opacity};
|
71
|
-
`
|
72
|
-
|
73
|
-
const HeroContent = styled.div`
|
74
|
-
width: 100%;
|
75
|
-
z-index: 2;
|
76
|
-
`
|
@@ -1,59 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import Navbar from '.'
|
3
|
-
import { NavbarProps } from './index.types'
|
4
|
-
import { Meta, StoryObj } from '@storybook/react/*'
|
5
|
-
|
6
|
-
type StoryProps = NavbarProps
|
7
|
-
|
8
|
-
const meta: Meta<StoryProps> = {
|
9
|
-
title: 'Components/Navbar',
|
10
|
-
component: Navbar,
|
11
|
-
parameters: {
|
12
|
-
layout: '',
|
13
|
-
},
|
14
|
-
tags: ['autodocs'],
|
15
|
-
}
|
16
|
-
|
17
|
-
export default meta
|
18
|
-
|
19
|
-
type Story = StoryObj<StoryProps>
|
20
|
-
|
21
|
-
export const Default: Story = {
|
22
|
-
render: () =>
|
23
|
-
<Navbar
|
24
|
-
config={{ centeredItems: true }}
|
25
|
-
logo={{ url: 'https://kgo.googleusercontent.com/profile_vrt_raw_bytes_1587515400_10885.png' }}
|
26
|
-
button={{
|
27
|
-
label: "Agendá una reunión",
|
28
|
-
type: "rounded",
|
29
|
-
arrow: 'arrow-long',
|
30
|
-
font: {
|
31
|
-
size: '14px',
|
32
|
-
weight: '500',
|
33
|
-
casing: 'first-capitalized'
|
34
|
-
}
|
35
|
-
}}
|
36
|
-
items={[
|
37
|
-
{
|
38
|
-
label: "Sobre Nosotros",
|
39
|
-
subitems: [
|
40
|
-
{
|
41
|
-
label: 'Quiénes somos',
|
42
|
-
},
|
43
|
-
{
|
44
|
-
label: 'Por qué elegirnos',
|
45
|
-
},
|
46
|
-
{
|
47
|
-
label: 'Testimonios y Opiniones',
|
48
|
-
}
|
49
|
-
],
|
50
|
-
},
|
51
|
-
{
|
52
|
-
label: "Productos",
|
53
|
-
},
|
54
|
-
{
|
55
|
-
label: "Nuestros proyectos",
|
56
|
-
},
|
57
|
-
]}
|
58
|
-
/>,
|
59
|
-
}
|
@@ -1,196 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import styled from '@emotion/styled';
|
3
|
-
import { theme } from '../../shared/styles/theme';
|
4
|
-
import Icon from '../../shared/components/Icon';
|
5
|
-
import Button from '../Button';
|
6
|
-
import { NavbarProps } from './index.types';
|
7
|
-
import { appearAnimation, disappearAnimation } from '../../shared/styles/animations';
|
8
|
-
|
9
|
-
export default function Navbar(props: NavbarProps) {
|
10
|
-
const {
|
11
|
-
logo,
|
12
|
-
items,
|
13
|
-
button,
|
14
|
-
config
|
15
|
-
} = props
|
16
|
-
|
17
|
-
return (
|
18
|
-
<>
|
19
|
-
<NavbarContainer height={config.height} colors={config.colors} centeredItems={config.centeredItems}>
|
20
|
-
<Logo src={logo?.url} onClick={logo?.onClick} />
|
21
|
-
<div>
|
22
|
-
{items?.map(item => {
|
23
|
-
return (
|
24
|
-
<a
|
25
|
-
key={item.label}
|
26
|
-
href="#"
|
27
|
-
onClick={(e) => {
|
28
|
-
e.preventDefault();
|
29
|
-
item.onClick && item.onClick()
|
30
|
-
}}
|
31
|
-
>
|
32
|
-
{item.label}
|
33
|
-
{item.subitems && (
|
34
|
-
<>
|
35
|
-
<Icon icon='arrow-caret' size='8px' />
|
36
|
-
<div>
|
37
|
-
{item.subitems?.map(subitem => {
|
38
|
-
return (
|
39
|
-
<ControlledNavItem key={subitem.label}>
|
40
|
-
<a href="#" onClick={(e) => {
|
41
|
-
e.preventDefault();
|
42
|
-
subitem.onClick && subitem.onClick()
|
43
|
-
}}>
|
44
|
-
{subitem.label}
|
45
|
-
</a>
|
46
|
-
</ControlledNavItem>
|
47
|
-
)
|
48
|
-
})}
|
49
|
-
</div>
|
50
|
-
</>
|
51
|
-
)}
|
52
|
-
</a>
|
53
|
-
)
|
54
|
-
})}
|
55
|
-
</div>
|
56
|
-
{button &&
|
57
|
-
<Button
|
58
|
-
colors={button.colors}
|
59
|
-
type={button.type}
|
60
|
-
font={button.font}
|
61
|
-
onClick={button.onClick}
|
62
|
-
arrow={button.arrow}
|
63
|
-
>
|
64
|
-
{button.label}
|
65
|
-
</Button>
|
66
|
-
}
|
67
|
-
</NavbarContainer>
|
68
|
-
</>
|
69
|
-
)
|
70
|
-
}
|
71
|
-
|
72
|
-
const NavbarContainer = styled.div<NavbarProps['config']>`
|
73
|
-
background-color: ${props => props.colors?.background || theme.black};
|
74
|
-
width: 100vw;
|
75
|
-
height: ${props => props.height || '80px'};
|
76
|
-
display: flex;
|
77
|
-
position: fixed;
|
78
|
-
top: 0;
|
79
|
-
left: 0;
|
80
|
-
align-items: center;
|
81
|
-
justify-content: space-between;
|
82
|
-
padding: 0 4vw;
|
83
|
-
z-index: 99;
|
84
|
-
backdrop-filter: blur(4px);
|
85
|
-
* {
|
86
|
-
-webkit-user-drag: none;
|
87
|
-
-khtml-user-drag: none;
|
88
|
-
-moz-user-drag: none;
|
89
|
-
-o-user-drag: none;
|
90
|
-
}
|
91
|
-
@media only screen and (max-width: 800px) {
|
92
|
-
height: 80px;
|
93
|
-
padding: 0 6vw;
|
94
|
-
}
|
95
|
-
& > div {
|
96
|
-
display: flex;
|
97
|
-
align-items: center;
|
98
|
-
height: 100%;
|
99
|
-
margin-left: ${props => props.centeredItems ? 'unset' : 'auto'};
|
100
|
-
& > a {
|
101
|
-
color: ${props => props.colors?.text || theme.white};
|
102
|
-
position: relative;
|
103
|
-
display: flex;
|
104
|
-
gap: 5px;
|
105
|
-
align-items: center;
|
106
|
-
justify-content: center;
|
107
|
-
height: 100%;
|
108
|
-
font-size: 12px;
|
109
|
-
letter-spacing: 2px;
|
110
|
-
font-weight: 500;
|
111
|
-
text-transform: uppercase;
|
112
|
-
text-decoration: none;
|
113
|
-
padding: 6px 22px 0;
|
114
|
-
transition: 0.3s;
|
115
|
-
border-bottom: 4px solid transparent;
|
116
|
-
svg {
|
117
|
-
margin-bottom: 1px;
|
118
|
-
transform: rotateZ(90deg);
|
119
|
-
}
|
120
|
-
& > div {
|
121
|
-
z-index: 10;
|
122
|
-
position: absolute;
|
123
|
-
display: none;
|
124
|
-
flex-direction: column;
|
125
|
-
align-items: flex-start;
|
126
|
-
width: max-content;
|
127
|
-
gap: 12px;
|
128
|
-
top: 88%;
|
129
|
-
left: 0;
|
130
|
-
background-color: black;
|
131
|
-
padding: 16px 14px;
|
132
|
-
animation-name: ${disappearAnimation};
|
133
|
-
animation-duration: 0.3s;
|
134
|
-
animation-fill-mode: forwards;
|
135
|
-
a {
|
136
|
-
color: ${props => props.colors?.text || theme.white};
|
137
|
-
padding: 0;
|
138
|
-
}
|
139
|
-
&:hover {
|
140
|
-
animation-name: ${appearAnimation};
|
141
|
-
display: flex;
|
142
|
-
}
|
143
|
-
}
|
144
|
-
&:hover {
|
145
|
-
border-color: white;
|
146
|
-
svg {
|
147
|
-
transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);
|
148
|
-
}
|
149
|
-
& > div{
|
150
|
-
animation-name: ${appearAnimation};
|
151
|
-
display: flex;
|
152
|
-
}
|
153
|
-
}
|
154
|
-
}
|
155
|
-
@media only screen and (max-width: 800px) {
|
156
|
-
display: none;
|
157
|
-
}
|
158
|
-
}
|
159
|
-
`
|
160
|
-
|
161
|
-
const Logo = styled.img`
|
162
|
-
cursor: pointer;
|
163
|
-
height: 56%;
|
164
|
-
transition: all 0.2s;
|
165
|
-
&:hover {
|
166
|
-
filter: brightness(1.2);
|
167
|
-
}
|
168
|
-
`
|
169
|
-
|
170
|
-
const ControlledNavItem = styled.div`
|
171
|
-
cursor: pointer;
|
172
|
-
height: 100%;
|
173
|
-
max-height: 90px;
|
174
|
-
text-transform: uppercase;
|
175
|
-
position: relative;
|
176
|
-
display: flex;
|
177
|
-
align-items: center;
|
178
|
-
justify-content: center;
|
179
|
-
transition: 0.3s;
|
180
|
-
a {
|
181
|
-
display: flex;
|
182
|
-
align-items: center;
|
183
|
-
justify-content: center;
|
184
|
-
height: 100%;
|
185
|
-
padding: 0 22px;
|
186
|
-
font-size: 12px;
|
187
|
-
letter-spacing: 2px;
|
188
|
-
font-weight: 500;
|
189
|
-
text-decoration: none;
|
190
|
-
}
|
191
|
-
&:hover {
|
192
|
-
& > div{
|
193
|
-
display: flex;
|
194
|
-
}
|
195
|
-
}
|
196
|
-
`
|