v.korobtsev/next-enterprise
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: navbar and resposive issues

Browse source
This commit is contained in:
VizoleLabs 2024-04-09 07:26:56 +00:00
parent 005f63aeeb
commit f7311438a3
6 changed files with 152 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

15
components/ImageFilter/ImageFilter.tsx
View file

@ -2,7 +2,7 @@
import { Button } from "components/Button/Button"
import { useState } from "react"
import { Image } from "./image"
import { ImageCard } from "./image"
import { FilterableData } from "./FilterableData"
import { CardBody, CardContainer, CardItem } from "components/Ui/Card"
import { motion } from "framer-motion" // Import motion
@ -33,11 +33,16 @@ const ImageFilter = () => {
))}
{/* filtered cards display */}
</div>
<main className="grid w-full gap-x-5 gap-y-8 md:mt-8 md:grid-cols-2 lg:grid-cols-3">
{/* <main className="grid w-full gap-x-5 gap-y-8 md:mt-8 md:grid-cols-2 lg:grid-cols-3"> */}
<main className="grid max-w-full grid-cols-1 place-items-center gap-3 p-4 md:max-w-full md:grid-cols-3">
{FilterableData.map((item, index) => (
<motion.div
key={index}
layout
layout={"position"}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
className={`w-full cursor-pointer rounded-lg border border-gray-600 bg-gray-800 shadow ${
activeFilter === "all" || activeFilter === item.name
? "" /* Show card */
@ -46,8 +51,8 @@ const ImageFilter = () => {
>
<CardContainer>
<CardBody>
<Image
className="h-[400px] w-full overflow-hidden rounded-lg"
<ImageCard
className="h-full w-full overflow-hidden rounded-lg"
image={item.src}
alt={item.name}
objectCover="object-cover"

5
components/ImageFilter/image.tsx
View file

@ -7,8 +7,9 @@ type ImageOwnProps<T extends React.ElementType> = {
}
type ImageProps<T extends React.ElementType> = ImageOwnProps<T> & Omit<React.ComponentProps<T>, keyof ImageOwnProps<T>>
import Image from "next/image"
export const Image = <T extends React.ElementType = "div">({
export const ImageCard = <T extends React.ElementType = "div">({
className,
image,
alt,
@ -19,7 +20,7 @@ export const Image = <T extends React.ElementType = "div">({
const Component = as || "div"
return (
<Component className={className} {...rest}>
<img src={image} alt={alt} className={`h-full w-full ${objectCover}`} />
<Image src={image} width={400} height={400} alt={alt} className={`h-full w-full ${objectCover}`} />
</Component>
)
}