@versini/ui-footer 4.0.5 → 4.0.7
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 +306 -1
- package/dist/index.js +3 -3
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -1,3 +1,308 @@
|
|
|
1
1
|
# @versini/ui-footer
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@versini/ui-footer)
|
|
4
|
+
|
|
5
|
+
> A flexible and accessible React footer component built with TypeScript and TailwindCSS.
|
|
6
|
+
|
|
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
|
+
|
|
9
|
+
|
|
10
|
+
## Table of Contents
|
|
11
|
+
|
|
12
|
+
- [Features](#features)
|
|
13
|
+
- [Installation](#installation)
|
|
14
|
+
- [Usage](#usage)
|
|
15
|
+
|
|
16
|
+
## Features
|
|
17
|
+
|
|
18
|
+
- **🎯 Two-Row Layout**: Support for primary and secondary content rows
|
|
19
|
+
- **♿ Semantic HTML**: Uses proper `<footer>` element for accessibility
|
|
20
|
+
- **🎨 Customizable**: Multiple themes and styling options
|
|
21
|
+
- **🌲 Tree-shakeable**: Lightweight and optimized for bundle size
|
|
22
|
+
- **🔧 TypeScript**: Fully typed with comprehensive prop definitions
|
|
23
|
+
- **🎭 Theme Support**: Built-in support for light, dark, and system themes
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install @versini/ui-footer
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [root README](../../README.md#tailwindcss-setup) for complete setup instructions.
|
|
32
|
+
|
|
33
|
+
## Usage
|
|
34
|
+
|
|
35
|
+
### Basic Footer
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import { Footer } from "@versini/ui-footer";
|
|
39
|
+
|
|
40
|
+
function App() {
|
|
41
|
+
return (
|
|
42
|
+
<Footer row1="© 2024 Your Company. All rights reserved." />
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Two-Row Footer
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
import { Footer } from "@versini/ui-footer";
|
|
51
|
+
|
|
52
|
+
function App() {
|
|
53
|
+
return (
|
|
54
|
+
<Footer
|
|
55
|
+
row1={
|
|
56
|
+
<div className="flex justify-center space-x-4">
|
|
57
|
+
<a href="/privacy">Privacy Policy</a>
|
|
58
|
+
<a href="/terms">Terms of Service</a>
|
|
59
|
+
<a href="/contact">Contact</a>
|
|
60
|
+
</div>
|
|
61
|
+
}
|
|
62
|
+
row2="© 2024 Your Company. All rights reserved."
|
|
63
|
+
/>
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Custom Styled Footer
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
import { Footer } from "@versini/ui-footer";
|
|
72
|
+
|
|
73
|
+
function App() {
|
|
74
|
+
return (
|
|
75
|
+
<Footer
|
|
76
|
+
className="bg-gray-800 text-white"
|
|
77
|
+
mode="dark"
|
|
78
|
+
noMargins
|
|
79
|
+
row1={
|
|
80
|
+
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-6">
|
|
81
|
+
<div>
|
|
82
|
+
<h3 className="font-bold mb-2">Company</h3>
|
|
83
|
+
<ul className="space-y-1">
|
|
84
|
+
<li><a href="/about">About</a></li>
|
|
85
|
+
<li><a href="/careers">Careers</a></li>
|
|
86
|
+
</ul>
|
|
87
|
+
</div>
|
|
88
|
+
<div>
|
|
89
|
+
<h3 className="font-bold mb-2">Products</h3>
|
|
90
|
+
<ul className="space-y-1">
|
|
91
|
+
<li><a href="/product1">Product 1</a></li>
|
|
92
|
+
<li><a href="/product2">Product 2</a></li>
|
|
93
|
+
</ul>
|
|
94
|
+
</div>
|
|
95
|
+
<div>
|
|
96
|
+
<h3 className="font-bold mb-2">Support</h3>
|
|
97
|
+
<ul className="space-y-1">
|
|
98
|
+
<li><a href="/help">Help Center</a></li>
|
|
99
|
+
<li><a href="/contact">Contact</a></li>
|
|
100
|
+
</ul>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
}
|
|
104
|
+
row2="© 2024 Your Company. All rights reserved."
|
|
105
|
+
/>
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## API
|
|
111
|
+
|
|
112
|
+
### Footer Props
|
|
113
|
+
|
|
114
|
+
| Prop | Type | Default | Description |
|
|
115
|
+
|------|------|---------|-------------|
|
|
116
|
+
| row1 | `React.ReactNode` | - | The content to render in the first row |
|
|
117
|
+
| row2 | `React.ReactNode` | - | The content to render in the second row |
|
|
118
|
+
| mode | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The type of Footer (controls theme/color) |
|
|
119
|
+
| noMargins | `boolean` | `false` | Whether to render the Footer with margins |
|
|
120
|
+
| raw | `boolean` | `false` | Whether to render the Footer with no styles |
|
|
121
|
+
| className | `string` | - | CSS class(es) to add to the main component wrapper |
|
|
122
|
+
|
|
123
|
+
*Also supports all standard HTML footer element attributes*
|
|
124
|
+
|
|
125
|
+
## Examples
|
|
126
|
+
|
|
127
|
+
### Simple Copyright Footer
|
|
128
|
+
|
|
129
|
+
```tsx
|
|
130
|
+
import { Footer } from "@versini/ui-footer";
|
|
131
|
+
|
|
132
|
+
function SimpleCopyright() {
|
|
133
|
+
const currentYear = new Date().getFullYear();
|
|
134
|
+
|
|
135
|
+
return (
|
|
136
|
+
<Footer
|
|
137
|
+
row1={`© ${currentYear} My Company. All rights reserved.`}
|
|
138
|
+
/>
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### Footer with Links
|
|
144
|
+
|
|
145
|
+
```tsx
|
|
146
|
+
import { Footer } from "@versini/ui-footer";
|
|
147
|
+
|
|
148
|
+
function FooterWithLinks() {
|
|
149
|
+
return (
|
|
150
|
+
<Footer
|
|
151
|
+
row1={
|
|
152
|
+
<nav className="flex justify-center space-x-6">
|
|
153
|
+
<a href="/privacy" className="hover:underline">
|
|
154
|
+
Privacy Policy
|
|
155
|
+
</a>
|
|
156
|
+
<a href="/terms" className="hover:underline">
|
|
157
|
+
Terms of Service
|
|
158
|
+
</a>
|
|
159
|
+
<a href="/contact" className="hover:underline">
|
|
160
|
+
Contact Us
|
|
161
|
+
</a>
|
|
162
|
+
<a href="/sitemap" className="hover:underline">
|
|
163
|
+
Sitemap
|
|
164
|
+
</a>
|
|
165
|
+
</nav>
|
|
166
|
+
}
|
|
167
|
+
row2="© 2024 Your Company. All rights reserved."
|
|
168
|
+
/>
|
|
169
|
+
);
|
|
170
|
+
}
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
### Rich Footer with Social Links
|
|
174
|
+
|
|
175
|
+
```tsx
|
|
176
|
+
import { Footer } from "@versini/ui-footer";
|
|
177
|
+
|
|
178
|
+
function RichFooter() {
|
|
179
|
+
return (
|
|
180
|
+
<Footer
|
|
181
|
+
mode="dark"
|
|
182
|
+
className="bg-gray-900 text-gray-100"
|
|
183
|
+
row1={
|
|
184
|
+
<div className="max-w-6xl mx-auto px-4 py-8">
|
|
185
|
+
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
186
|
+
{/* Company Info */}
|
|
187
|
+
<div>
|
|
188
|
+
<h3 className="text-lg font-semibold mb-4">Company</h3>
|
|
189
|
+
<ul className="space-y-2">
|
|
190
|
+
<li><a href="/about" className="hover:text-blue-400">About Us</a></li>
|
|
191
|
+
<li><a href="/careers" className="hover:text-blue-400">Careers</a></li>
|
|
192
|
+
<li><a href="/news" className="hover:text-blue-400">News</a></li>
|
|
193
|
+
</ul>
|
|
194
|
+
</div>
|
|
195
|
+
|
|
196
|
+
{/* Products */}
|
|
197
|
+
<div>
|
|
198
|
+
<h3 className="text-lg font-semibold mb-4">Products</h3>
|
|
199
|
+
<ul className="space-y-2">
|
|
200
|
+
<li><a href="/product1" className="hover:text-blue-400">Product 1</a></li>
|
|
201
|
+
<li><a href="/product2" className="hover:text-blue-400">Product 2</a></li>
|
|
202
|
+
<li><a href="/enterprise" className="hover:text-blue-400">Enterprise</a></li>
|
|
203
|
+
</ul>
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
{/* Support */}
|
|
207
|
+
<div>
|
|
208
|
+
<h3 className="text-lg font-semibold mb-4">Support</h3>
|
|
209
|
+
<ul className="space-y-2">
|
|
210
|
+
<li><a href="/help" className="hover:text-blue-400">Help Center</a></li>
|
|
211
|
+
<li><a href="/contact" className="hover:text-blue-400">Contact</a></li>
|
|
212
|
+
<li><a href="/status" className="hover:text-blue-400">System Status</a></li>
|
|
213
|
+
</ul>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
{/* Social */}
|
|
217
|
+
<div>
|
|
218
|
+
<h3 className="text-lg font-semibold mb-4">Follow Us</h3>
|
|
219
|
+
<div className="flex space-x-4">
|
|
220
|
+
<a href="/twitter" className="hover:text-blue-400">Twitter</a>
|
|
221
|
+
<a href="/linkedin" className="hover:text-blue-400">LinkedIn</a>
|
|
222
|
+
<a href="/github" className="hover:text-blue-400">GitHub</a>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
}
|
|
228
|
+
row2={
|
|
229
|
+
<div className="border-t border-gray-800 py-4">
|
|
230
|
+
<div className="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
|
|
231
|
+
<span>© 2024 Your Company. All rights reserved.</span>
|
|
232
|
+
<div className="flex space-x-4 mt-2 md:mt-0">
|
|
233
|
+
<a href="/privacy" className="text-sm hover:text-blue-400">Privacy</a>
|
|
234
|
+
<a href="/terms" className="text-sm hover:text-blue-400">Terms</a>
|
|
235
|
+
<a href="/cookies" className="text-sm hover:text-blue-400">Cookies</a>
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
238
|
+
</div>
|
|
239
|
+
}
|
|
240
|
+
/>
|
|
241
|
+
);
|
|
242
|
+
}
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
### Minimal Footer
|
|
246
|
+
|
|
247
|
+
```tsx
|
|
248
|
+
import { Footer } from "@versini/ui-footer";
|
|
249
|
+
|
|
250
|
+
function MinimalFooter() {
|
|
251
|
+
return (
|
|
252
|
+
<Footer
|
|
253
|
+
noMargins
|
|
254
|
+
className="py-4 text-center text-sm text-gray-600"
|
|
255
|
+
row1="Made with ❤️ by Your Team"
|
|
256
|
+
/>
|
|
257
|
+
);
|
|
258
|
+
}
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
### Raw Footer (Unstyled)
|
|
262
|
+
|
|
263
|
+
```tsx
|
|
264
|
+
import { Footer } from "@versini/ui-footer";
|
|
265
|
+
|
|
266
|
+
function RawFooter() {
|
|
267
|
+
return (
|
|
268
|
+
<Footer
|
|
269
|
+
raw
|
|
270
|
+
className="custom-footer-styles"
|
|
271
|
+
row1={
|
|
272
|
+
<div className="my-custom-layout">
|
|
273
|
+
Custom styled footer content
|
|
274
|
+
</div>
|
|
275
|
+
}
|
|
276
|
+
/>
|
|
277
|
+
);
|
|
278
|
+
}
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
### Theme Variations
|
|
282
|
+
|
|
283
|
+
```tsx
|
|
284
|
+
import { Footer } from "@versini/ui-footer";
|
|
285
|
+
|
|
286
|
+
function ThemeVariations() {
|
|
287
|
+
return (
|
|
288
|
+
<div className="space-y-8">
|
|
289
|
+
<Footer
|
|
290
|
+
mode="light"
|
|
291
|
+
className="bg-white border-t"
|
|
292
|
+
row1="Light theme footer"
|
|
293
|
+
/>
|
|
294
|
+
|
|
295
|
+
<Footer
|
|
296
|
+
mode="dark"
|
|
297
|
+
className="bg-gray-800 text-white"
|
|
298
|
+
row1="Dark theme footer"
|
|
299
|
+
/>
|
|
300
|
+
|
|
301
|
+
<Footer
|
|
302
|
+
mode="system"
|
|
303
|
+
row1="System theme footer (adapts to user preference)"
|
|
304
|
+
/>
|
|
305
|
+
</div>
|
|
306
|
+
);
|
|
307
|
+
}
|
|
308
|
+
```
|
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.7
|
|
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: "
|
|
8
|
+
version: "4.0.7",
|
|
9
|
+
buildTime: "08/14/2025 06:06 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.7",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"dev:types": "tsup --watch src",
|
|
28
28
|
"dev": "npm-run-all clean --parallel dev:js dev:types",
|
|
29
29
|
"lint": "biome lint src",
|
|
30
|
+
"lint:fix": "biome check src --write --no-errors-on-unmatched",
|
|
30
31
|
"prettier": "biome check --write --no-errors-on-unmatched",
|
|
31
32
|
"start": "static-server dist --port 5173",
|
|
32
33
|
"test:coverage:ui": "vitest --coverage --ui",
|
|
@@ -39,14 +40,14 @@
|
|
|
39
40
|
"react-dom": "^18.3.1 || ^19.0.0"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|
|
42
|
-
"@versini/ui-types": "
|
|
43
|
+
"@versini/ui-types": "../ui-types"
|
|
43
44
|
},
|
|
44
45
|
"dependencies": {
|
|
45
46
|
"@tailwindcss/typography": "0.5.16",
|
|
46
|
-
"tailwindcss": "4.1.
|
|
47
|
+
"tailwindcss": "4.1.12"
|
|
47
48
|
},
|
|
48
49
|
"sideEffects": [
|
|
49
50
|
"**/*.css"
|
|
50
51
|
],
|
|
51
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "a2a11904039a5bc55ff17a954e4a16073abbe0bf"
|
|
52
53
|
}
|