Add Footer component to layout and remove StyleGuidePage
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 2m19s
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 2m19s
This commit is contained in:
@@ -4,6 +4,7 @@ import { Orbitron, Rajdhani } from "next/font/google";
|
|||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import SessionProvider from "@/components/layout/SessionProvider";
|
import SessionProvider from "@/components/layout/SessionProvider";
|
||||||
import { ThemeProvider } from "@/contexts/ThemeContext";
|
import { ThemeProvider } from "@/contexts/ThemeContext";
|
||||||
|
import Footer from "@/components/layout/Footer";
|
||||||
|
|
||||||
const orbitron = Orbitron({
|
const orbitron = Orbitron({
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
@@ -34,7 +35,10 @@ export default function RootLayout({
|
|||||||
>
|
>
|
||||||
<body className="antialiased">
|
<body className="antialiased">
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
<SessionProvider>{children}</SessionProvider>
|
<SessionProvider>
|
||||||
|
{children}
|
||||||
|
<Footer />
|
||||||
|
</SessionProvider>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
40
components/layout/Footer.tsx
Normal file
40
components/layout/Footer.tsx
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export default function Footer() {
|
||||||
|
return (
|
||||||
|
<footer
|
||||||
|
className="w-full py-6 px-4 sm:px-8 border-t"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--background)",
|
||||||
|
borderColor: "color-mix(in srgb, var(--gray-800) 30%, transparent)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||||
|
<div
|
||||||
|
className="text-xs text-center sm:text-left"
|
||||||
|
style={{ color: "var(--muted-foreground)" }}
|
||||||
|
>
|
||||||
|
© {new Date().getFullYear()} Game of Tech - Peaksys
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<Link
|
||||||
|
href="/style-guide"
|
||||||
|
className="text-xs uppercase tracking-widest transition"
|
||||||
|
style={{ color: "var(--muted-foreground)" }}
|
||||||
|
onMouseEnter={(e) =>
|
||||||
|
(e.currentTarget.style.color = "var(--accent-color)")
|
||||||
|
}
|
||||||
|
onMouseLeave={(e) =>
|
||||||
|
(e.currentTarget.style.color = "var(--muted-foreground)")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Style Guide
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -42,22 +42,26 @@ export default function StarRating({
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={() => handleClick(star)}
|
onClick={() => handleClick(star)}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onMouseEnter={() => !disabled && setHoverValue(star)}
|
|
||||||
onMouseLeave={() => !disabled && setHoverValue(0)}
|
|
||||||
className={`transition-transform hover:scale-110 disabled:hover:scale-100 disabled:cursor-not-allowed ${sizeClasses[size]}`}
|
|
||||||
style={{
|
|
||||||
color: star <= displayValue ? "var(--accent-color)" : "var(--gray-500)",
|
|
||||||
}}
|
|
||||||
onMouseEnter={(e) => {
|
onMouseEnter={(e) => {
|
||||||
if (!disabled && star > displayValue) {
|
if (!disabled) {
|
||||||
e.currentTarget.style.color = "var(--gray-400)";
|
setHoverValue(star);
|
||||||
|
if (star > displayValue) {
|
||||||
|
e.currentTarget.style.color = "var(--gray-400)";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onMouseLeave={(e) => {
|
onMouseLeave={(e) => {
|
||||||
if (!disabled && star > displayValue) {
|
if (!disabled) {
|
||||||
e.currentTarget.style.color = "var(--gray-500)";
|
setHoverValue(0);
|
||||||
|
if (star > displayValue) {
|
||||||
|
e.currentTarget.style.color = "var(--gray-500)";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
className={`transition-transform hover:scale-110 disabled:hover:scale-100 disabled:cursor-not-allowed ${sizeClasses[size]}`}
|
||||||
|
style={{
|
||||||
|
color: star <= displayValue ? "var(--accent-color)" : "var(--gray-500)",
|
||||||
|
}}
|
||||||
aria-label={`Noter ${star} étoile${star > 1 ? "s" : ""}`}
|
aria-label={`Noter ${star} étoile${star > 1 ? "s" : ""}`}
|
||||||
>
|
>
|
||||||
★
|
★
|
||||||
|
|||||||
Reference in New Issue
Block a user