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