109 lines
2.5 KiB
TypeScript
109 lines
2.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { useResponsive } from "@/lib/hooks/useResponsive";
|
||
|
|
|
||
|
|
interface ResponsiveContainerProps {
|
||
|
|
children: React.ReactNode;
|
||
|
|
className?: string;
|
||
|
|
mobileClassName?: string;
|
||
|
|
tabletClassName?: string;
|
||
|
|
desktopClassName?: string;
|
||
|
|
breakpoint?: "sm" | "md" | "lg" | "xl" | "2xl";
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ResponsiveContainer: React.FC<ResponsiveContainerProps> = ({
|
||
|
|
children,
|
||
|
|
className = "",
|
||
|
|
mobileClassName = "",
|
||
|
|
tabletClassName = "",
|
||
|
|
desktopClassName = "",
|
||
|
|
breakpoint = "md",
|
||
|
|
}) => {
|
||
|
|
const { isMobile, isTablet, isDesktop } = useResponsive();
|
||
|
|
|
||
|
|
const getResponsiveClassName = () => {
|
||
|
|
let responsiveClass = className;
|
||
|
|
|
||
|
|
if (isMobile) {
|
||
|
|
responsiveClass += ` ${mobileClassName}`;
|
||
|
|
} else if (isTablet) {
|
||
|
|
responsiveClass += ` ${tabletClassName}`;
|
||
|
|
} else if (isDesktop) {
|
||
|
|
responsiveClass += ` ${desktopClassName}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
return responsiveClass.trim();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={getResponsiveClassName()}>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
interface ResponsiveGridProps {
|
||
|
|
children: React.ReactNode;
|
||
|
|
cols?: {
|
||
|
|
mobile?: number;
|
||
|
|
tablet?: number;
|
||
|
|
desktop?: number;
|
||
|
|
};
|
||
|
|
gap?: string;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
|
||
|
|
children,
|
||
|
|
cols = { mobile: 1, tablet: 2, desktop: 3 },
|
||
|
|
gap = "4",
|
||
|
|
className = "",
|
||
|
|
}) => {
|
||
|
|
const { isMobile, isTablet, isDesktop } = useResponsive();
|
||
|
|
|
||
|
|
const getGridCols = () => {
|
||
|
|
if (isMobile) return `grid-cols-${cols.mobile || 1}`;
|
||
|
|
if (isTablet) return `grid-cols-${cols.tablet || 2}`;
|
||
|
|
if (isDesktop) return `grid-cols-${cols.desktop || 3}`;
|
||
|
|
return "grid-cols-1";
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`grid ${getGridCols()} gap-${gap} ${className}`}>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
interface ResponsiveTextProps {
|
||
|
|
children: React.ReactNode;
|
||
|
|
size?: {
|
||
|
|
mobile?: string;
|
||
|
|
tablet?: string;
|
||
|
|
desktop?: string;
|
||
|
|
};
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ResponsiveText: React.FC<ResponsiveTextProps> = ({
|
||
|
|
children,
|
||
|
|
size = { mobile: "text-sm", tablet: "text-base", desktop: "text-lg" },
|
||
|
|
className = "",
|
||
|
|
}) => {
|
||
|
|
const { isMobile, isTablet, isDesktop } = useResponsive();
|
||
|
|
|
||
|
|
const getTextSize = () => {
|
||
|
|
if (isMobile) return size.mobile || "text-sm";
|
||
|
|
if (isTablet) return size.tablet || "text-base";
|
||
|
|
if (isDesktop) return size.desktop || "text-lg";
|
||
|
|
return "text-base";
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`${getTextSize()} ${className}`}>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|