Issues in Mobile Responsiveness

[Mallik-vinukonda]

The nav bar is not visible and also the animation is half covered in the mobile view , I can fix this issues and make it mobile responsive

[github-actions]

👋 Thank you @Mallik-vinukonda for raising an issue! We appreciate your effort in helping us improve. Our team will review it shortly. Stay tuned!

[Mallik-vinukonda]

@Jaishree2310

Thanks for Assigning ! could please add gssoc-labels & level to it

[Mallik-vinukonda]

ERROR in ./src/components/Footer.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/mallik/Desktop/GlassyUI-Components/src/components/Footer.tsx: Expected corresponding JSX closing tag for

. (94:6)

92 |

© 2023 GlassyUI. All rights reserved.

93 |

94 |
| ^
95 |

96 | <a
97 | href='https://github.com/Jaishree2310/GlassyUI-Components'

ERROR in ./src/components/Footer.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/mallik/Desktop/GlassyUI-Components/src/components/Footer.tsx: Expected corresponding JSX closing tag for

. (94:6)

92 |

© 2023 GlassyUI. All rights reserved.

93 |

94 |
| ^
95 |

96 | <a
97 | href='https://github.com/Jaishree2310/GlassyUI-Components'
at constructor (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:359:19)
at TypeScriptParserMixin.raise (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:3266:19)
at TypeScriptParserMixin.jsxParseElementAt (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:6781:16)
at TypeScriptParserMixin.jsxParseElementAt (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:6752:32)
at TypeScriptParserMixin.jsxParseElement (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:6803:17)
at TypeScriptParserMixin.parseExprAtom (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:6813:19)
at TypeScriptParserMixin.parseExprSubscripts (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10615:23)
at TypeScriptParserMixin.parseUpdate (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10600:21)
at TypeScriptParserMixin.parseMaybeUnary (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10580:23)
at TypeScriptParserMixin.parseMaybeUnary (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:9489:18)
at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10434:61)
at TypeScriptParserMixin.parseExprOps (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10439:23)
at TypeScriptParserMixin.parseMaybeConditional (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10416:23)
at TypeScriptParserMixin.parseMaybeAssign (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10379:21)
at /Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:9427:39
at TypeScriptParserMixin.tryParse (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:3604:20)
at TypeScriptParserMixin.parseMaybeAssign (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:9427:18)
at /Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10349:39
at TypeScriptParserMixin.allowInAnd (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:11951:12)
at TypeScriptParserMixin.parseMaybeAssignAllowIn (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10349:17)
at TypeScriptParserMixin.parseParenAndDistinguishExpression (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:11210:28)
at TypeScriptParserMixin.parseExprAtom (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10863:23)
at TypeScriptParserMixin.parseExprAtom (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:6818:20)
at TypeScriptParserMixin.parseExprSubscripts (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10615:23)
at TypeScriptParserMixin.parseUpdate (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10600:21)
at TypeScriptParserMixin.parseMaybeUnary (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10580:23)
at TypeScriptParserMixin.parseMaybeUnary (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:9489:18)
at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10434:61)
at TypeScriptParserMixin.parseExprOps (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10439:23)
at TypeScriptParserMixin.parseMaybeConditional (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10416:23)
at TypeScriptParserMixin.parseMaybeAssign (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10379:21)
at TypeScriptParserMixin.parseMaybeAssign (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:9438:20)
at TypeScriptParserMixin.parseExpressionBase (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10333:23)
at /Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10329:39
at TypeScriptParserMixin.allowInAnd (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:11946:16)
at TypeScriptParserMixin.parseExpression (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10329:17)
at TypeScriptParserMixin.parseReturnStatement (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:12636:28)
at TypeScriptParserMixin.parseStatementContent (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:12288:21)
at TypeScriptParserMixin.parseStatementContent (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:9163:18)
at TypeScriptParserMixin.parseStatementLike (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:12257:17)
at TypeScriptParserMixin.parseStatementListItem (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:12237:17)
at TypeScriptParserMixin.parseBlockOrModuleBlockBody (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:12810:61)
at TypeScriptParserMixin.parseBlockBody (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:12803:10)
at TypeScriptParserMixin.parseBlock (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:12791:10)
at TypeScriptParserMixin.parseFunctionBody (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:11634:24)
at TypeScriptParserMixin.parseArrowExpression (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:11609:10)
at TypeScriptParserMixin.parseParenAndDistinguishExpression (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:11222:12)
at TypeScriptParserMixin.parseExprAtom (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10863:23)
at TypeScriptParserMixin.parseExprAtom (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:6818:20)
at TypeScriptParserMixin.parseExprSubscripts (/Users/mallik/Desktop/GlassyUI-Components/node_modules/@babel/parser/lib/index.js:10615:23)
ERROR
[eslint]
src/components/Footer.tsx
Line 94:8: Parsing error: Expected corresponding JSX closing tag for 'footer'

ERROR in src/components/Footer.tsx:94:9
TS17002: Expected corresponding JSX closing tag for 'footer'.
92 |

© 2023 GlassyUI. All rights reserved.

93 |

94 |
| ^^^
95 |

96 | <a
97 | href='https://github.com/Jaishree2310/GlassyUI-Components'
ERROR in src/components/Footer.tsx:123:12
TS2339: Property 'glass' does not exist on type '"\n .glass-footer {\n backdrop-filter: blur(10px) saturate(180%);\n -webkit-backdrop-filter: blur(10px) saturate(180%);\n background-color: rgba(43, 48, 60, 0.7);\n width: 100vw;\n padding: 40px 20px;\n border-radius: 15px;\n text-align: center;\n...'.
121 |
122 | <style jsx>{ 123 | .glass-footer { | ^^^^^ 124 | backdrop-filter: blur(10px) saturate(180%); 125 | -webkit-backdrop-filter: blur(10px) saturate(180%); 126 | background-color: rgba(43, 48, 60, 0.7); ERROR in src/components/Footer.tsx:123:18 TS2552: Cannot find name 'footer'. Did you mean 'Footer'? 121 | 122 | <style jsx>{
123 | .glass-footer {
| ^^^^^^
124 | backdrop-filter: blur(10px) saturate(180%);
125 | -webkit-backdrop-filter: blur(10px) saturate(180%);
126 | background-color: rgba(43, 48, 60, 0.7);
ERROR in src/components/Footer.tsx:123:25
TS1005: '}' expected.
121 |
122 | <style jsx>{ 123 | .glass-footer { | ^ 124 | backdrop-filter: blur(10px) saturate(180%); 125 | -webkit-backdrop-filter: blur(10px) saturate(180%); 126 | background-color: rgba(43, 48, 60, 0.7); ERROR in src/components/Footer.tsx:124:13 TS2304: Cannot find name 'backdrop'. 122 | <style jsx>{
123 | .glass-footer {
124 | backdrop-filter: blur(10px) saturate(180%);
| ^^^^^^^^
125 | -webkit-backdrop-filter: blur(10px) saturate(180%);
126 | background-color: rgba(43, 48, 60, 0.7);
127 | width: 100vw;
ERROR in src/components/Footer.tsx:124:22
TS2552: Cannot find name 'filter'. Did you mean 'File'?
122 | <style jsx>{ 123 | .glass-footer { 124 | backdrop-filter: blur(10px) saturate(180%); | ^^^^^^ 125 | -webkit-backdrop-filter: blur(10px) saturate(180%); 126 | background-color: rgba(43, 48, 60, 0.7); 127 | width: 100vw; ERROR in src/components/Footer.tsx:124:28 TS1005: '}' expected. 122 | <style jsx>{
123 | .glass-footer {
124 | backdrop-filter: blur(10px) saturate(180%);
| ^
125 | -webkit-backdrop-filter: blur(10px) saturate(180%);
126 | background-color: rgba(43, 48, 60, 0.7);
127 | width: 100vw;
ERROR in src/components/Footer.tsx:137:11
TS1381: Unexpected token. Did you mean {'}'} or }?
135 | justify-content: space-between;
136 | position: relative;
137 | }
| ^
138 |

there are lot of errors in the code .

[Mallik-vinukonda]

ERROR in src/components/GlassyUIComponentsPage.tsx:48:3
TS2339: Property 'onClick' does not exist on type 'ComponentCardProps'.
46 | description,
47 | icon,

48 | onClick,
| ^^^^^^^
49 | status,
50 |
51 | children,
ERROR in src/components/GlassyUIComponentsPage.tsx:251:5
TS2339: Property 'onClick' does not exist on type 'ComponentCardProps'.
249 | description,
250 | icon,
251 | onClick,
| ^^^^^^^
252 | status,
253 | children,
254 | darkMode,
ERROR in src/components/GlassyUIComponentsPage.tsx:340:17
TS2322: Type '{ key: number; title: string; description: string; icon: Element | undefined; onClick: (() => void) | (() => void); darkMode: boolean; }' is not assignable to type 'IntrinsicAttributes & ComponentCardProps'.
Property 'onClick' does not exist on type 'IntrinsicAttributes & ComponentCardProps'.
338 | description={component.description}
339 | icon={component.icon}
340 | onClick={component.onClick}
| ^^^^^^^
341 | darkMode={darkMode}
342 | />
343 | ))}
ERROR in src/components/ModalDetailsPage.tsx:25:24
TS2554: Expected 1-2 arguments, but got 0.
23 |
24 | return (
25 | <div className={${getGlassyClasses()} p-6 mb-14}>
| ^^^^^^^^^^^^^^^^^^
26 |

Examples

27 |
28 | {/* Basic Example /}
ERROR in src/components/ModalDetailsPage.tsx:37:30
TS2554: Expected 1-2 arguments, but got 0.
35 | <button
36 | onClick={() => setBasicModal(true)}
37 | className={mb-4 ${getGlassyClasses()} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-gray-100}
| ^^^^^^^^^^^^^^^^^^
38 | >
39 | Open Basic Modal
40 |
ERROR in src/components/ModalDetailsPage.tsx:61:30
TS2554: Expected 1-2 arguments, but got 0.
59 | <button
60 | onClick={() => setImageModal(true)}
61 | className={mb-4 ${getGlassyClasses()} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-gray-100}
| ^^^^^^^^^^^^^^^^^^
62 | >
63 | Open Modal with Image
64 |
ERROR in src/components/ModalDetailsPage.tsx:85:30
TS2554: Expected 1-2 arguments, but got 0.
83 | <button
84 | onClick={() => setCustomCTAModal(true)}
85 | className={mb-4 ${getGlassyClasses()} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-gray-100}
| ^^^^^^^^^^^^^^^^^^
86 | >
87 | Open Modal with Custom CTA
88 |
ERROR in src/components/ModalDetailsPage.tsx:111:30
TS2554: Expected 1-2 arguments, but got 0.
109 | <button
110 | onClick={() => setBgColorModal(true)}
111 | className={mb-4 ${getGlassyClasses()} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-gray-100}
| ^^^^^^^^^^^^^^^^^^
112 | >
113 | Open Modal with Custom Background Color
114 |
ERROR in src/components/ModalDetailsPage.tsx:163:44
TS2554: Expected 1-2 arguments, but got 0.
161 | <button
162 | onClick={() => copyToClipboard(text, codeKey)}
163 | className={absolute top-2 right-2 ${getGlassyClasses()} p-2 hover:bg-white/40 transition-all duration-300 z-10}
| ^^^^^^^^^^^^^^^^^^
164 | title='Copy to clipboard'
165 | >
166 | {copiedText ? (
ERROR in src/components/ModalDetailsPage.tsx:178:23
TS2554: Expected 1-2 arguments, but got 0.
176 |
177 | <div
178 | className={`${getGlassyClasses()} p-6 mb-14`}
| ^^^^^^^^^^^^^^^^^^
179 | onClick=${unmount}
180 | >
181 | <div
ERROR in src/components/ModalDetailsPage.tsx:213:26
TS2554: Expected 1-2 arguments, but got 0.
211 | return (
212 | <>
213 | <div className={${getGlassyClasses()} p-6 mb-14} onClick={unmount}>
| ^^^^^^^^^^^^^^^^^^
214 | <div
215 | className='relative p-6 rounded-lg shadow-lg'
216 | style={{ backgroundColor: bgColor, maxWidth: '500px', width: '100%' }}
ERROR in src/components/ModalDetailsPage.tsx:281:24
TS2554: Expected 1-2 arguments, but got 0.
279 |
280 | return (
281 | <div className={${getGlassyClasses()} p-6 mb-14}>
| ^^^^^^^^^^^^^^^^^^
282 |

283 | Customizable Modal Form
284 |

ERROR in src/components/ModalDetailsPage.tsx:609:10
TS2304: Cannot find name 'Example'.
607 |
608 | <div className={${getGlassyClasses(darkMode)} p-6 mb-16}>
609 |
| ^^^^^^^
610 |
611 |
612 |

ERROR in src/components/SpeedDialDetailsPage.tsx:145:47
TS2345: Argument of type 'number' is not assignable to parameter of type 'boolean'.
143 |
144 |

145 | <div className={${getGlassyClasses(20)} p-6 mb-14 relative}>
| ^^
146 |

147 | Customize Speed Dial
148 |

ERROR in src/components/SpeedDialDetailsPage.tsx:154:16
TS2741: Property 'darkMode' is missing in type '{ text: string; codeKey: string; }' but required in type '{ text: string; codeKey: string; darkMode: boolean; }'.
152 | {customSpeed}
153 |
154 |
| ^^^^^^^^^^
155 |

156 |

157 |
ERROR in src/components/SpeedDialDetailsPage.tsx:187:41
TS2345: Argument of type 'number' is not assignable to parameter of type 'boolean'.
185 |
186 | return (
187 | <div className={${getGlassyClasses(20)} p-6 mb-14 relative}>
| ^^
188 |

189 | Customize Your SpeedDial
190 |

ERROR in src/components/SpeedDialDetailsPage.tsx:195:45
TS2345: Argument of type 'number' is not assignable to parameter of type 'boolean'.
193 | {/ Direction Selection /}
194 |
195 | <div className={${getGlassyClasses(10)} p-6 w-[30%]}>
| ^^
196 |
197 | Choose Direction :
198 |
ERROR in src/components/SpeedDialDetailsPage.tsx:221:45
TS2345: Argument of type 'number' is not assignable to parameter of type 'boolean'.
219 |
220 | {/ Icon Selection */}
221 | <div className={${getGlassyClasses(10)} p-6 w-[30%]}>
| ^^
222 |
223 | Select Icons:{' '}
224 |