search + category card

This commit is contained in:
Tejas Panchal
2026-02-19 02:15:28 +05:30
parent 09f2968684
commit 3f915e8b17
5 changed files with 9 additions and 8 deletions

View File

@@ -113,6 +113,7 @@ const CategoryCard = React.memo(
cardStyle,
path,
limit,
gridClass,
}) => {
const { language } = useLanguage();
const navigate = useNavigate();
@@ -143,7 +144,7 @@ const CategoryCard = React.memo(
return (
<div className={`w-full ${className}`}>
<div className="flex items-center justify-between mb-8">
<div className="flex items-center justify-between mb-4">
<h1 className="font-semibold text-2xl text-white max-[478px]:text-[18px] capitalize tracking-wide">
{label}
</h1>
@@ -162,7 +163,7 @@ const CategoryCard = React.memo(
</div>
<>
{categoryPage && itemsToRender.firstRow.length > 0 && (
<div className="grid grid-cols-4 gap-x-3 gap-y-8 transition-all duration-300 ease-in-out mt-8 max-[758px]:hidden">
<div className="grid grid-cols-4 gap-x-3 gap-y-8 transition-all duration-300 ease-in-out mt-2 max-[758px]:hidden">
{itemsToRender.firstRow.map((item, index) => (
<AnimeCard
key={index}
@@ -175,7 +176,7 @@ const CategoryCard = React.memo(
))}
</div>
)}
<div className={`grid ${cardStyle || 'grid-cols-5 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3'} gap-x-3 gap-y-8 mt-6 transition-all duration-300 ease-in-out max-[478px]:gap-x-2`}>
<div className={`grid ${gridClass || cardStyle || 'grid-cols-5 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3'} gap-x-3 gap-y-8 mt-2 transition-all duration-300 ease-in-out max-[478px]:gap-x-2`}>
{itemsToRender.remainingItems.map((item, index) => (
<AnimeCard
key={index}

View File

@@ -35,7 +35,7 @@ const ContinueWatching = () => {
return (
<div className="mt-8">
<div className="flex items-center justify-between max-md:pl-4 mb-6">
<div className="flex items-center justify-between max-md:pl-4 mb-3">
<div className="flex items-center gap-x-3 justify-center">
<FaHistory className="text-gray-200 text-xl" />
<h1 className="text-gray-200 text-2xl font-bold tracking-tight max-[450px]:text-xl max-[450px]:mb-1 max-[350px]:text-lg">

View File

@@ -50,7 +50,7 @@ function Topten({ data, className }) {
};
return (
<div className={`flex flex-col space-y-4 ${className}`}>
<div className={`flex flex-col space-y-2 ${className}`}>
<div className="flex justify-between items-center max-[350px]:flex-col max-[350px]:gap-y-2 max-[350px]:items-start">
<h1 className="font-bold text-2xl text-white tracking-tight">Top 10</h1>
<ul className="flex justify-between w-fit bg-[#1a1a1a] rounded-lg overflow-hidden shadow-lg">

View File

@@ -13,11 +13,11 @@ const Trending = ({ trending, className }) => {
return (
<div className={`bg-[#141414] rounded-lg py-4 px-1.5 ${className}`}>
<div className="flex items-center gap-2 mb-4">
<div className="flex items-center gap-2 mb-2">
<FontAwesomeIcon icon={faFire} className="text-white/90" />
<h2 className="text-xl font-semibold text-white">Trending Now</h2>
</div>
<div className="flex flex-col space-y-2 max-h-[600px] overflow-y-auto pr-2 scrollbar-thin scrollbar-track-[#1a1a1a] scrollbar-thumb-[#2a2a2a] hover:scrollbar-thumb-[#333] scrollbar-thumb-rounded">
<div className={`flex flex-col space-y-2 max-h-[600px] overflow-y-auto pr-2 scrollbar-thin scrollbar-track-[#1a1a1a] scrollbar-thumb-[#2a2a2a] hover:scrollbar-thumb-[#333] scrollbar-thumb-rounded`}>
{trending &&
trending.map((item, index) => (
<div key={index} className="group">

View File

@@ -43,7 +43,7 @@ function Search() {
setSearchParams({ keyword, page: newPage });
};
const searchGridClass = "grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2";
const searchGridClass = "grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:gap-x-2";
const { title, description, keywords } = generateSearchMeta(keyword);
const canonicalUrl = generateCanonicalUrl(`/search?keyword=${keyword || ''}${page > 1 ? `&page=${page}` : ''}`);