gitadmin/moviebox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement responsive container utility and enhance layout styles across components; update Carousel and Gallery for improved structure and consistency

Browse Source
This commit is contained in:
Norbert Maciaszek
2025-08-18 15:27:28 +02:00
parent e891b37384
commit fd1240252d
17 changed files with 353 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/atoms/Button/index.tsx
View File

@@ -7,7 +7,7 @@ type Props = {
children: React.ReactNode;
className?: string;
theme?: Theme;
size?: "small" | "medium" | "large";
size?: "small" | "medium" | "large" | "icon";
onClick?: () => void;
href?: string;
gradient?: {
@@ -31,7 +31,7 @@ export const Button: FC<Props> = ({
return (
<Component
className={`flex items-center justify-center gap-2 cursor-pointer text-white rounded-xl font-semibold shadow-2xl transition-all duration-300 hover:scale-105
className={`flex items-center justify-center gap-2 cursor-pointer text-white rounded-xl font-semibold shadow-2xl transition-colors duration-300
bg-gradient-to-r ${buttonColor?.from} ${buttonColor?.to} cursor-pointer ${sizes[size]} ${className}`}
onClick={onClick}
{...(href && { href })}
@@ -45,6 +45,7 @@ const sizes = {
small: "px-4 py-2 text-sm",
medium: "px-8 py-4 text-lg",
large: "px-12 py-6 text-xl",
icon: "p-3 [&>*]:w-5 [&>*]:h-5",
};
const colors = {
@@ -57,7 +58,7 @@ const colors = {
to: "to-pink-600 hover:to-pink-500",
},
glass: {
from: "from-white/15 via-white/8 to-white/12",
from: "from-white/15 via-white/8 to-white/12 border border-white/20",
to: "to-white/15 hover:to-white/10",
},
rose: {

2
src/components/atoms/MovieCard/layouts/AuroraLayout.tsx
View File

@@ -48,7 +48,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
: "from-red-400 to-pink-400";
return (
<article className="group relative w-full overflow-hidden rounded-2xl">
<article className="group relative w-full overflow-hidden rounded-2xl max-w-[300px] mx-auto">
{/* Aurora background effect */}
<div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-teal-900/20 opacity-60"></div>
<div className="absolute inset-0 bg-gradient-to-tr from-pink-500/10 via-transparent to-cyan-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-1000"></div>