uibee 2.16.20 → 2.16.22
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/src/components/navbar/bubble.d.ts +6 -1
- package/dist/src/components/navbar/bubble.js +6 -2
- package/dist/src/components/navbar/navbar.d.ts +3 -0
- package/dist/src/components/navbar/navbar.js +3 -3
- package/dist/src/globals.css +3 -0
- package/package.json +1 -1
- package/src/components/navbar/bubble.tsx +18 -8
- package/src/components/navbar/navbar.tsx +6 -21
|
@@ -4,6 +4,11 @@ type BubbleText = {
|
|
|
4
4
|
fill: string;
|
|
5
5
|
stroke: string;
|
|
6
6
|
text: string;
|
|
7
|
+
x: string;
|
|
8
|
+
hide: boolean;
|
|
9
|
+
handleHide: () => void;
|
|
7
10
|
};
|
|
8
|
-
export default function Bubble({
|
|
11
|
+
export default function Bubble({ bubble }: {
|
|
12
|
+
bubble: BubbleText;
|
|
13
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
9
14
|
export {};
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import { X } from 'lucide-react';
|
|
3
|
+
export default function Bubble({ bubble }) {
|
|
4
|
+
if (bubble.hide) {
|
|
5
|
+
return null;
|
|
6
|
+
}
|
|
7
|
+
return (_jsxs("a", { href: bubble.href, className: `relative ${bubble.className}`, children: [_jsxs("svg", { viewBox: '0 0 24 12', className: 'absolute -top-3 h-3 w-6', "aria-hidden": 'true', children: [_jsx("path", { d: 'M12 0 24 12H0Z', fill: bubble.fill, stroke: bubble.stroke, strokeWidth: '1.5', strokeLinejoin: 'round' }), _jsx("path", { d: 'M12 0 24 12H0Z', fill: bubble.fill })] }), _jsx("span", { children: bubble.text }), _jsx(X, { onClick: bubble.handleHide, className: bubble.x })] }));
|
|
4
8
|
}
|
|
@@ -16,9 +16,9 @@ export default function Navbar({ children, bubble, className, disableLanguageTog
|
|
|
16
16
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
17
17
|
return (_jsx("div", { className: `${isMobileMenuOpen ? 'bg-[#181818f0]' : 'bg-[#18181899]'} backdrop-blur-xl fixed top-0 z-900 w-full ${className}`, children: _jsxs("div", { className: `flex w-full max-w-6xl m-auto p-2 transition duration-500 800px:justify-between 800px:p-4 ${isMobileMenuOpen ? 'h-screen bg-login-900/20 800px:h-20' : ''} ${innerClassName}
|
|
18
18
|
`, children: [_jsx("div", { className: 'block h-12 p-1 800px:p-0', children: _jsx(Link, { href: '/', onClick: () => setIsMobileMenuOpen(false), children: _jsx(LogoSmall, {}) }) }), onlyLogo ? null : (_jsxs(_Fragment, { children: [_jsx("nav", { className: 'hidden 800px:flex 800px:justify-between 800px:items-center 800px:w-fill max-w-200', children: children }), _jsxs("nav", { className: 'flex w-[calc(100vw-8rem)] justify-end h-12 800px:w-fit', children: [_jsxs("div", { className: 'grid gap-2', children: [!disableThemeToggle &&
|
|
19
|
-
_jsx(ThemeToggle, {}), bubble?.theme?.condition && _jsx(Bubble, {
|
|
20
|
-
_jsx(LanguageToggle, { language: lang }), bubble?.lang?.condition && _jsx(Bubble, {
|
|
21
|
-
_jsx(AuthButton, { profilePath: profilePath, token: token, loginPath: loginPath, logoutPath: logoutPath }), bubble?.login?.condition && _jsx(Bubble, {
|
|
19
|
+
_jsx(ThemeToggle, {}), bubble?.theme?.condition && _jsx(Bubble, { bubble: bubble.theme })] }), _jsxs("div", { className: 'grid gap-2', children: [!disableLanguageToggle &&
|
|
20
|
+
_jsx(LanguageToggle, { language: lang }), bubble?.lang?.condition && _jsx(Bubble, { bubble: bubble.lang })] }), _jsxs("div", { className: 'grid gap-2', children: [loginPath && logoutPath &&
|
|
21
|
+
_jsx(AuthButton, { profilePath: profilePath, token: token, loginPath: loginPath, logoutPath: logoutPath }), bubble?.login?.condition && _jsx(Bubble, { bubble: bubble.login })] })] }), _jsxs("button", { className: 'w-12 h-12 relative cursor-pointer bg-none border-none 800px:hidden', onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen), children: [_jsx("div", { className: hamburgerStyle(isMobileMenuOpen) }), _jsx("div", { className: hamburgerStyle(isMobileMenuOpen, true) })] }), _jsx("nav", { className: `fixed top-16 w-[calc(100%-2rem)] max-w-140 mx-auto left-0 right-0 800px:hidden
|
|
22
22
|
transition-all duration-500 ease-in-out overflow-hidden
|
|
23
23
|
${isMobileMenuOpen ? 'max-h-[calc(100vh-4rem)] opacity-100' : 'max-h-0 opacity-0'}`, onClick: () => setIsMobileMenuOpen(false), children: React.Children.map(children, (child, index) => (_jsx("div", { className: `transition-all duration-500 ease-out ${isMobileMenuOpen
|
|
24
24
|
? 'opacity-100 transform translate-y-0'
|
package/dist/src/globals.css
CHANGED
package/package.json
CHANGED
|
@@ -1,35 +1,45 @@
|
|
|
1
|
+
import { X } from 'lucide-react'
|
|
2
|
+
|
|
1
3
|
type BubbleText = {
|
|
2
4
|
href: string
|
|
3
5
|
className: string
|
|
4
6
|
fill: string
|
|
5
7
|
stroke: string
|
|
6
8
|
text: string
|
|
9
|
+
x: string
|
|
10
|
+
hide: boolean
|
|
11
|
+
handleHide: () => void
|
|
7
12
|
}
|
|
8
13
|
|
|
9
|
-
export default function Bubble({
|
|
14
|
+
export default function Bubble({ bubble }: { bubble: BubbleText }) {
|
|
15
|
+
if (bubble.hide) {
|
|
16
|
+
return null
|
|
17
|
+
}
|
|
18
|
+
|
|
10
19
|
return (
|
|
11
20
|
<a
|
|
12
|
-
href={href}
|
|
13
|
-
className={`relative ${className}`}
|
|
21
|
+
href={bubble.href}
|
|
22
|
+
className={`relative ${bubble.className}`}
|
|
14
23
|
>
|
|
15
24
|
<svg
|
|
16
25
|
viewBox='0 0 24 12'
|
|
17
|
-
className='absolute h-3 w-6'
|
|
26
|
+
className='absolute -top-3 h-3 w-6'
|
|
18
27
|
aria-hidden='true'
|
|
19
28
|
>
|
|
20
29
|
<path
|
|
21
30
|
d='M12 0 24 12H0Z'
|
|
22
|
-
fill={fill}
|
|
23
|
-
stroke={stroke}
|
|
31
|
+
fill={bubble.fill}
|
|
32
|
+
stroke={bubble.stroke}
|
|
24
33
|
strokeWidth='1.5'
|
|
25
34
|
strokeLinejoin='round'
|
|
26
35
|
/>
|
|
27
36
|
<path
|
|
28
37
|
d='M12 0 24 12H0Z'
|
|
29
|
-
fill={fill}
|
|
38
|
+
fill={bubble.fill}
|
|
30
39
|
/>
|
|
31
40
|
</svg>
|
|
32
|
-
<span>{text}</span>
|
|
41
|
+
<span>{bubble.text}</span>
|
|
42
|
+
<X onClick={bubble.handleHide} className={bubble.x} />
|
|
33
43
|
</a>
|
|
34
44
|
)
|
|
35
45
|
}
|
|
@@ -16,6 +16,9 @@ type BubbleContent = {
|
|
|
16
16
|
text: string
|
|
17
17
|
fill: string
|
|
18
18
|
stroke: string
|
|
19
|
+
x: string
|
|
20
|
+
hide: boolean
|
|
21
|
+
handleHide: () => void
|
|
19
22
|
}
|
|
20
23
|
|
|
21
24
|
function hamburgerStyle (isOpen: boolean, isSecond?: boolean) {
|
|
@@ -90,13 +93,7 @@ export default function Navbar({
|
|
|
90
93
|
{!disableThemeToggle &&
|
|
91
94
|
<ThemeToggle />
|
|
92
95
|
}
|
|
93
|
-
{bubble?.theme?.condition && <Bubble
|
|
94
|
-
href={bubble.theme.href}
|
|
95
|
-
className={bubble.theme.className}
|
|
96
|
-
text={bubble.theme.text}
|
|
97
|
-
fill={bubble.theme.fill}
|
|
98
|
-
stroke={bubble.theme.stroke}
|
|
99
|
-
/>}
|
|
96
|
+
{bubble?.theme?.condition && <Bubble bubble={bubble.theme} />}
|
|
100
97
|
</div>
|
|
101
98
|
<div className='grid gap-2'>
|
|
102
99
|
{!disableLanguageToggle &&
|
|
@@ -104,13 +101,7 @@ export default function Navbar({
|
|
|
104
101
|
language={lang}
|
|
105
102
|
/>
|
|
106
103
|
}
|
|
107
|
-
{bubble?.lang?.condition && <Bubble
|
|
108
|
-
href={bubble.lang.href}
|
|
109
|
-
className={bubble.lang.className}
|
|
110
|
-
text={bubble.lang.text}
|
|
111
|
-
fill={bubble.lang.fill}
|
|
112
|
-
stroke={bubble.lang.stroke}
|
|
113
|
-
/>}
|
|
104
|
+
{bubble?.lang?.condition && <Bubble bubble={bubble.lang} />}
|
|
114
105
|
</div>
|
|
115
106
|
<div className='grid gap-2'>
|
|
116
107
|
{loginPath && logoutPath &&
|
|
@@ -121,13 +112,7 @@ export default function Navbar({
|
|
|
121
112
|
logoutPath={logoutPath}
|
|
122
113
|
/>
|
|
123
114
|
}
|
|
124
|
-
{bubble?.login?.condition && <Bubble
|
|
125
|
-
href={bubble.login.href}
|
|
126
|
-
className={bubble.login.className}
|
|
127
|
-
text={bubble.login.text}
|
|
128
|
-
fill={bubble.login.fill}
|
|
129
|
-
stroke={bubble.login.stroke}
|
|
130
|
-
/>}
|
|
115
|
+
{bubble?.login?.condition && <Bubble bubble={bubble.login} />}
|
|
131
116
|
</div>
|
|
132
117
|
</nav>
|
|
133
118
|
|