diff --git a/src/components/atoms/Button/index.tsx b/src/components/atoms/Button/index.tsx index ffccd33..1b3fd68 100644 --- a/src/components/atoms/Button/index.tsx +++ b/src/components/atoms/Button/index.tsx @@ -1,12 +1,19 @@ import Link from "next/link"; import { FC } from "react"; +type Theme = keyof typeof colors; + type Props = { children: React.ReactNode; className?: string; - theme?: "primary" | "glass"; + theme?: Theme; + size?: "small" | "medium" | "large"; onClick?: () => void; href?: string; + gradient?: { + from: string; + to: string; + }; }; export const Button: FC = ({ @@ -14,13 +21,18 @@ export const Button: FC = ({ className = "", onClick, href, + size = "medium", theme = "primary", + gradient, }) => { const Component = (href ? Link : "button") as any; + const buttonColor = gradient ?? colors[theme]; + return ( @@ -29,9 +41,39 @@ export const Button: FC = ({ ); }; -const styles = { - primary: - "block relative bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white px-8 py-4 rounded-xl font-semibold text-lg shadow-2xl transition-all duration-300 hover:scale-105", - glass: - "p-3 rounded-xl bg-gradient-to-br from-white/15 via-white/8 to-white/12 border border-white/20 transition-all duration-300 hover:bg-gradient-to-br hover:from-white/25 hover:to-white/15 hover:scale-105 shadow-lg shadow-black/20", +const sizes = { + small: "px-4 py-2 text-sm", + medium: "px-8 py-4 text-lg", + large: "px-12 py-6 text-xl", +}; + +const colors = { + primary: { + from: "from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500", + to: "to-emerald-600 hover:to-emerald-500", + }, + glass: { + from: "from-white/15 via-white/8 to-white/12", + to: "to-white/15 hover:to-white/10", + }, + rose: { + from: "from-rose-600/90 hover:from-rose-500/90", + to: "to-pink-600/90 hover:to-pink-500/90", + }, + emerald: { + from: "from-emerald-600/90 hover:from-emerald-500/90", + to: "to-teal-600/90 hover:to-teal-500/90", + }, + purple: { + from: "from-purple-600/90 hover:from-purple-500/90", + to: "to-pink-600/90 hover:to-pink-500/90", + }, + pink: { + from: "from-pink-600/90 hover:from-pink-500/90", + to: "to-emerald-600/90 hover:to-emerald-500/90", + }, + teal: { + from: "from-teal-600/90 hover:from-teal-500/90", + to: "to-emerald-600/90 hover:to-emerald-500/90", + }, }; diff --git a/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx b/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx index 6c6d8cd..bf3d0df 100644 --- a/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx +++ b/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx @@ -1,11 +1,11 @@ "use client"; import { FC, useState } from "react"; -import Link from "next/link"; import { MdFavorite } from "react-icons/md"; import { RxEyeOpen } from "react-icons/rx"; import { FaFire, FaTrash, FaInfoCircle } from "react-icons/fa"; import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri"; import { Movie } from "@/types/global"; +import { Button } from "../../Button"; interface AuroraLayoutProps extends Movie { showDayCounter?: boolean; @@ -153,13 +153,13 @@ export const AuroraLayout: FC = ({ {/* Magical action overlay */} {!alreadyInStore && (
- +
)} @@ -225,15 +225,15 @@ export const AuroraLayout: FC = ({ {/* Zobacz więcej button */} - -
- - Zobacz więcej -
- + + Zobacz więcej + {/* Decorative border glow */} diff --git a/src/components/molecules/HeroMovie/index.tsx b/src/components/molecules/HeroMovie/index.tsx index 0719a35..1665870 100644 --- a/src/components/molecules/HeroMovie/index.tsx +++ b/src/components/molecules/HeroMovie/index.tsx @@ -201,22 +201,27 @@ export const HeroMovie: FC = ({ movieDetails }) => { {/* Action buttons */}

- Podobne filmy + Rekomendowane filmy

diff --git a/src/components/organisms/Navbar/components/Search/index.tsx b/src/components/organisms/Navbar/components/Search/index.tsx index 1bc5603..a1cdc9b 100644 --- a/src/components/organisms/Navbar/components/Search/index.tsx +++ b/src/components/organisms/Navbar/components/Search/index.tsx @@ -51,6 +51,7 @@ export const Search = () => { <>