mirror of
https://github.com/JustAnimeCore/JustAnime.git
synced 2026-04-17 13:51:44 +00:00
search + category card
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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}` : ''}`);
|
||||
|
||||
Reference in New Issue
Block a user