@versini/ui-footer 4.0.8 → 4.0.10
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/README.md +101 -49
- package/dist/index.js +3 -3
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# @versini/ui-footer
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@versini/ui-footer)
|
|
4
|
+
>)
|
|
4
5
|
|
|
5
6
|
> A flexible and accessible React footer component built with TypeScript and TailwindCSS.
|
|
6
7
|
|
|
7
8
|
The Footer component provides a semantic footer element with support for two-row layouts, multiple theme modes, and customizable styling. Perfect for page footers with copyright information, links, and other footer content.
|
|
8
9
|
|
|
9
|
-
|
|
10
10
|
## Table of Contents
|
|
11
11
|
|
|
12
12
|
- [Features](#features)
|
|
@@ -28,7 +28,7 @@ The Footer component provides a semantic footer element with support for two-row
|
|
|
28
28
|
npm install @versini/ui-footer
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [
|
|
31
|
+
> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [installation documentation](https://versini-org.github.io/ui-components/?path=/docs/getting-started-installation--docs) for complete setup instructions.
|
|
32
32
|
|
|
33
33
|
## Usage
|
|
34
34
|
|
|
@@ -38,9 +38,7 @@ npm install @versini/ui-footer
|
|
|
38
38
|
import { Footer } from "@versini/ui-footer";
|
|
39
39
|
|
|
40
40
|
function App() {
|
|
41
|
-
return
|
|
42
|
-
<Footer row1="© 2024 Your Company. All rights reserved." />
|
|
43
|
-
);
|
|
41
|
+
return <Footer row1="© 2024 Your Company. All rights reserved." />;
|
|
44
42
|
}
|
|
45
43
|
```
|
|
46
44
|
|
|
@@ -81,22 +79,34 @@ function App() {
|
|
|
81
79
|
<div>
|
|
82
80
|
<h3 className="font-bold mb-2">Company</h3>
|
|
83
81
|
<ul className="space-y-1">
|
|
84
|
-
<li
|
|
85
|
-
|
|
82
|
+
<li>
|
|
83
|
+
<a href="/about">About</a>
|
|
84
|
+
</li>
|
|
85
|
+
<li>
|
|
86
|
+
<a href="/careers">Careers</a>
|
|
87
|
+
</li>
|
|
86
88
|
</ul>
|
|
87
89
|
</div>
|
|
88
90
|
<div>
|
|
89
91
|
<h3 className="font-bold mb-2">Products</h3>
|
|
90
92
|
<ul className="space-y-1">
|
|
91
|
-
<li
|
|
92
|
-
|
|
93
|
+
<li>
|
|
94
|
+
<a href="/product1">Product 1</a>
|
|
95
|
+
</li>
|
|
96
|
+
<li>
|
|
97
|
+
<a href="/product2">Product 2</a>
|
|
98
|
+
</li>
|
|
93
99
|
</ul>
|
|
94
100
|
</div>
|
|
95
101
|
<div>
|
|
96
102
|
<h3 className="font-bold mb-2">Support</h3>
|
|
97
103
|
<ul className="space-y-1">
|
|
98
|
-
<li
|
|
99
|
-
|
|
104
|
+
<li>
|
|
105
|
+
<a href="/help">Help Center</a>
|
|
106
|
+
</li>
|
|
107
|
+
<li>
|
|
108
|
+
<a href="/contact">Contact</a>
|
|
109
|
+
</li>
|
|
100
110
|
</ul>
|
|
101
111
|
</div>
|
|
102
112
|
</div>
|
|
@@ -111,16 +121,16 @@ function App() {
|
|
|
111
121
|
|
|
112
122
|
### Footer Props
|
|
113
123
|
|
|
114
|
-
| Prop
|
|
115
|
-
|
|
116
|
-
| row1
|
|
117
|
-
| row2
|
|
118
|
-
| mode
|
|
119
|
-
| noMargins | `boolean`
|
|
120
|
-
| raw
|
|
121
|
-
| className | `string`
|
|
124
|
+
| Prop | Type | Default | Description |
|
|
125
|
+
| --------- | ----------------------------------------------- | ---------- | -------------------------------------------------- |
|
|
126
|
+
| row1 | `React.ReactNode` | - | The content to render in the first row |
|
|
127
|
+
| row2 | `React.ReactNode` | - | The content to render in the second row |
|
|
128
|
+
| mode | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The type of Footer (controls theme/color) |
|
|
129
|
+
| noMargins | `boolean` | `false` | Whether to render the Footer with margins |
|
|
130
|
+
| raw | `boolean` | `false` | Whether to render the Footer with no styles |
|
|
131
|
+
| className | `string` | - | CSS class(es) to add to the main component wrapper |
|
|
122
132
|
|
|
123
|
-
|
|
133
|
+
_Also supports all standard HTML footer element attributes_
|
|
124
134
|
|
|
125
135
|
## Examples
|
|
126
136
|
|
|
@@ -131,12 +141,8 @@ import { Footer } from "@versini/ui-footer";
|
|
|
131
141
|
|
|
132
142
|
function SimpleCopyright() {
|
|
133
143
|
const currentYear = new Date().getFullYear();
|
|
134
|
-
|
|
135
|
-
return
|
|
136
|
-
<Footer
|
|
137
|
-
row1={`© ${currentYear} My Company. All rights reserved.`}
|
|
138
|
-
/>
|
|
139
|
-
);
|
|
144
|
+
|
|
145
|
+
return <Footer row1={`© ${currentYear} My Company. All rights reserved.`} />;
|
|
140
146
|
}
|
|
141
147
|
```
|
|
142
148
|
|
|
@@ -187,39 +193,81 @@ function RichFooter() {
|
|
|
187
193
|
<div>
|
|
188
194
|
<h3 className="text-lg font-semibold mb-4">Company</h3>
|
|
189
195
|
<ul className="space-y-2">
|
|
190
|
-
<li
|
|
191
|
-
|
|
192
|
-
|
|
196
|
+
<li>
|
|
197
|
+
<a href="/about" className="hover:text-blue-400">
|
|
198
|
+
About Us
|
|
199
|
+
</a>
|
|
200
|
+
</li>
|
|
201
|
+
<li>
|
|
202
|
+
<a href="/careers" className="hover:text-blue-400">
|
|
203
|
+
Careers
|
|
204
|
+
</a>
|
|
205
|
+
</li>
|
|
206
|
+
<li>
|
|
207
|
+
<a href="/news" className="hover:text-blue-400">
|
|
208
|
+
News
|
|
209
|
+
</a>
|
|
210
|
+
</li>
|
|
193
211
|
</ul>
|
|
194
212
|
</div>
|
|
195
|
-
|
|
213
|
+
|
|
196
214
|
{/* Products */}
|
|
197
215
|
<div>
|
|
198
216
|
<h3 className="text-lg font-semibold mb-4">Products</h3>
|
|
199
217
|
<ul className="space-y-2">
|
|
200
|
-
<li
|
|
201
|
-
|
|
202
|
-
|
|
218
|
+
<li>
|
|
219
|
+
<a href="/product1" className="hover:text-blue-400">
|
|
220
|
+
Product 1
|
|
221
|
+
</a>
|
|
222
|
+
</li>
|
|
223
|
+
<li>
|
|
224
|
+
<a href="/product2" className="hover:text-blue-400">
|
|
225
|
+
Product 2
|
|
226
|
+
</a>
|
|
227
|
+
</li>
|
|
228
|
+
<li>
|
|
229
|
+
<a href="/enterprise" className="hover:text-blue-400">
|
|
230
|
+
Enterprise
|
|
231
|
+
</a>
|
|
232
|
+
</li>
|
|
203
233
|
</ul>
|
|
204
234
|
</div>
|
|
205
|
-
|
|
235
|
+
|
|
206
236
|
{/* Support */}
|
|
207
237
|
<div>
|
|
208
238
|
<h3 className="text-lg font-semibold mb-4">Support</h3>
|
|
209
239
|
<ul className="space-y-2">
|
|
210
|
-
<li
|
|
211
|
-
|
|
212
|
-
|
|
240
|
+
<li>
|
|
241
|
+
<a href="/help" className="hover:text-blue-400">
|
|
242
|
+
Help Center
|
|
243
|
+
</a>
|
|
244
|
+
</li>
|
|
245
|
+
<li>
|
|
246
|
+
<a href="/contact" className="hover:text-blue-400">
|
|
247
|
+
Contact
|
|
248
|
+
</a>
|
|
249
|
+
</li>
|
|
250
|
+
<li>
|
|
251
|
+
<a href="/status" className="hover:text-blue-400">
|
|
252
|
+
System Status
|
|
253
|
+
</a>
|
|
254
|
+
</li>
|
|
213
255
|
</ul>
|
|
214
256
|
</div>
|
|
215
|
-
|
|
257
|
+
|
|
216
258
|
{/* Social */}
|
|
217
259
|
<div>
|
|
218
260
|
<h3 className="text-lg font-semibold mb-4">Follow Us</h3>
|
|
219
261
|
<div className="flex space-x-4">
|
|
220
|
-
<a href="/twitter" className="hover:text-blue-400">
|
|
221
|
-
|
|
222
|
-
|
|
262
|
+
<a href="/twitter" className="hover:text-blue-400">
|
|
263
|
+
Twitter
|
|
264
|
+
</a>
|
|
265
|
+
<a href="/linkedin" className="hover:text-blue-400">
|
|
266
|
+
LinkedIn
|
|
267
|
+
</a>
|
|
268
|
+
<a href="/github" className="hover:text-blue-400">
|
|
269
|
+
GitHub
|
|
270
|
+
</a>
|
|
223
271
|
</div>
|
|
224
272
|
</div>
|
|
225
273
|
</div>
|
|
@@ -230,9 +278,15 @@ function RichFooter() {
|
|
|
230
278
|
<div className="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
|
|
231
279
|
<span>© 2024 Your Company. All rights reserved.</span>
|
|
232
280
|
<div className="flex space-x-4 mt-2 md:mt-0">
|
|
233
|
-
<a href="/privacy" className="text-sm hover:text-blue-400">
|
|
234
|
-
|
|
235
|
-
|
|
281
|
+
<a href="/privacy" className="text-sm hover:text-blue-400">
|
|
282
|
+
Privacy
|
|
283
|
+
</a>
|
|
284
|
+
<a href="/terms" className="text-sm hover:text-blue-400">
|
|
285
|
+
Terms
|
|
286
|
+
</a>
|
|
287
|
+
<a href="/cookies" className="text-sm hover:text-blue-400">
|
|
288
|
+
Cookies
|
|
289
|
+
</a>
|
|
236
290
|
</div>
|
|
237
291
|
</div>
|
|
238
292
|
</div>
|
|
@@ -269,9 +323,7 @@ function RawFooter() {
|
|
|
269
323
|
raw
|
|
270
324
|
className="custom-footer-styles"
|
|
271
325
|
row1={
|
|
272
|
-
<div className="my-custom-layout">
|
|
273
|
-
Custom styled footer content
|
|
274
|
-
</div>
|
|
326
|
+
<div className="my-custom-layout">Custom styled footer content</div>
|
|
275
327
|
}
|
|
276
328
|
/>
|
|
277
329
|
);
|
|
@@ -291,13 +343,13 @@ function ThemeVariations() {
|
|
|
291
343
|
className="bg-white border-t"
|
|
292
344
|
row1="Light theme footer"
|
|
293
345
|
/>
|
|
294
|
-
|
|
346
|
+
|
|
295
347
|
<Footer
|
|
296
348
|
mode="dark"
|
|
297
349
|
className="bg-gray-800 text-white"
|
|
298
350
|
row1="Dark theme footer"
|
|
299
351
|
/>
|
|
300
|
-
|
|
352
|
+
|
|
301
353
|
<Footer
|
|
302
354
|
mode="system"
|
|
303
355
|
row1="System theme footer (adapts to user preference)"
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { FOOTER_CLASSNAME as i, Footer as r } from "./components/Footer/Footer.js";
|
|
2
2
|
/*!
|
|
3
|
-
@versini/ui-footer v4.0.
|
|
3
|
+
@versini/ui-footer v4.0.10
|
|
4
4
|
© 2025 gizmette.com
|
|
5
5
|
*/
|
|
6
6
|
try {
|
|
7
7
|
window.__VERSINI_UI_FOOTER__ || (window.__VERSINI_UI_FOOTER__ = {
|
|
8
|
-
version: "4.0.
|
|
9
|
-
buildTime: "08/23/2025
|
|
8
|
+
version: "4.0.10",
|
|
9
|
+
buildTime: "08/23/2025 12:23 PM EDT",
|
|
10
10
|
homepage: "https://github.com/aversini/ui-components",
|
|
11
11
|
license: "MIT"
|
|
12
12
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-footer",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"sideEffects": [
|
|
51
51
|
"**/*.css"
|
|
52
52
|
],
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "d568e20474c6c87f836c4cb6548f2cc0143a353c"
|
|
54
54
|
}
|