humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:ui

This commit is contained in:
Rama Priyanto 2025-05-25 12:34:42 +07:00
parent 79724453f1
commit a7808c832f
5 changed files with 30 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/landing/MedolUpdate.tsx
View File

@ -182,8 +182,11 @@ export default function MedolUpdate() {
<CardBody className="overflow-visible p-0"> <CardBody className="overflow-visible p-0">
<Image <Image
alt="thumbnail" alt="thumbnail"
className="object-cover !h-[20vh]" className="object-cover !h-[20vh] !w-full"
// src={newsItem.thumbnailLink} classNames={{
wrapper: "!w-full !max-w-full",
img: "!w-full",
}} // src={newsItem.thumbnailLink}
src={`https://mediahub.polri.go.id/api/media/view?id=${newsItem?.id}&operation=thumbnail&isSmall=true`} src={`https://mediahub.polri.go.id/api/media/view?id=${newsItem?.id}&operation=thumbnail&isSmall=true`}
/> />
</CardBody> </CardBody>
@ -271,7 +274,11 @@ export default function MedolUpdate() {
<CardBody className="overflow-visible p-0"> <CardBody className="overflow-visible p-0">
<Image <Image
alt="thumbnail" alt="thumbnail"
className="object-cover !h-[20vh]" classNames={{
wrapper: "!w-full !max-w-full",
img: "!w-full",
}}
className="object-cover !h-[20vh] w-full"
src={newsItem?.image} src={newsItem?.image}
/> />
</CardBody> </CardBody>
@ -362,7 +369,11 @@ export default function MedolUpdate() {
<CardBody className="overflow-visible p-0"> <CardBody className="overflow-visible p-0">
<Image <Image
alt="thumnail" alt="thumnail"
className="object-cover !h-[20vh]" classNames={{
wrapper: "!w-full !max-w-full",
img: "!w-full",
}}
className="object-cover !h-[20vh] w-full"
src={newsItem?.thumbnail} src={newsItem?.thumbnail}
/> />
</CardBody> </CardBody>

2
components/landing/banner-new.tsx
View File

@ -347,7 +347,7 @@ export default function BannerHumasNew() {
</div> </div>
<Input <Input
label="" label=""
placeholder="Temukkan Informasi Publik Terkini Dari Polri" placeholder="Temukan Informasi Publik Terkini Dari Polri"
type="text" type="text"
value={searchValue} value={searchValue}
onValueChange={setSearchValue} onValueChange={setSearchValue}

12
components/landing/digital-services.tsx
View File

@ -5,7 +5,7 @@ import CategorySatker from "./CategorySatker";
import PolriApps from "./PolriApps"; import PolriApps from "./PolriApps";
import Link from "next/link"; import Link from "next/link";
import SuggestionsModal from "./suggestions"; import SuggestionsModal from "./suggestions";
import Image from "next/image"; import { Image } from "@heroui/react";
export default function DigitalServices() { export default function DigitalServices() {
const [isPoldaOpen, setIsPoldaOpen] = useState(false); const [isPoldaOpen, setIsPoldaOpen] = useState(false);
@ -26,8 +26,6 @@ export default function DigitalServices() {
className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out" className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
> >
<Image <Image
width={480}
height={480}
src="/indonesia-map.png" src="/indonesia-map.png"
alt="indonesia" alt="indonesia"
className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out" className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
@ -44,8 +42,6 @@ export default function DigitalServices() {
className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out" className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
> >
<Image <Image
width={480}
height={480}
src="/satker.png" src="/satker.png"
alt="satker" alt="satker"
className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out" className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
@ -62,8 +58,6 @@ export default function DigitalServices() {
className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out" className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
> >
<Image <Image
width={480}
height={480}
src="/presisi.png" src="/presisi.png"
alt="presisi" alt="presisi"
className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out" className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
@ -80,8 +74,6 @@ export default function DigitalServices() {
className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out" className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
> >
<Image <Image
width={480}
height={480}
src="/kritik-saran.png" src="/kritik-saran.png"
alt="kritik-saran" alt="kritik-saran"
className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out" className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
@ -98,8 +90,6 @@ export default function DigitalServices() {
className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out" className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
> >
<Image <Image
width={480}
height={480}
src="/survey.png" src="/survey.png"
alt="survey" alt="survey"
className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out" className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"

21
components/landing/footer-new.tsx
View File

@ -13,9 +13,9 @@ import {
import Link from "next/link"; import Link from "next/link";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Image from "next/image";
import { error, success } from "@/config/swal"; import { error, success } from "@/config/swal";
import { subscription } from "@/services/subscribe"; import { subscription } from "@/services/subscribe";
import { Image } from "@heroui/react";
export default function FooterNew(props: { margin?: boolean }) { export default function FooterNew(props: { margin?: boolean }) {
const [emailValue, setEmailValue] = useState(""); const [emailValue, setEmailValue] = useState("");
@ -57,8 +57,6 @@ export default function FooterNew(props: { margin?: boolean }) {
> >
<Image <Image
src="/assets/portal-humas.png" src="/assets/portal-humas.png"
width={480}
height={480}
alt="portal-humas" alt="portal-humas"
className="w-[50px] lg:w-[100px]" className="w-[50px] lg:w-[100px]"
/> />
@ -69,24 +67,21 @@ export default function FooterNew(props: { margin?: boolean }) {
> >
<Image <Image
src="/assets/mediahub.png" src="/assets/mediahub.png"
width={480}
height={480}
alt="mediahub" alt="mediahub"
className="w-[80px] lg:w-[200px]" className="w-[80px] lg:w-[200px]"
/> />
</Link> </Link>
<Link href="" className="flex justify-center"> <Link
href="https://spit.humas.polri.go.id"
className="flex justify-center"
>
<Image <Image
src="/assets/spit.png" src="/assets/spit.png"
width={480}
height={480}
alt="spit" alt="spit"
className="w-[85px] lg:w-[170px] hidden dark:block" className="w-[85px] lg:w-[170px] hidden dark:block"
/> />
<Image <Image
src="/assets/spit-blackline.png" src="/assets/spit-blackline.png"
width={480}
height={480}
alt="spit" alt="spit"
className="w-[85px] lg:w-[170px] dark:hidden" className="w-[85px] lg:w-[170px] dark:hidden"
/> />
@ -97,8 +92,6 @@ export default function FooterNew(props: { margin?: boolean }) {
> >
<Image <Image
src="/assets/polri-tv.png" src="/assets/polri-tv.png"
width={480}
height={480}
alt="polritv" alt="polritv"
className="w-[85px] lg:w-[170px]" className="w-[85px] lg:w-[170px]"
/> />
@ -109,8 +102,6 @@ export default function FooterNew(props: { margin?: boolean }) {
> >
<Image <Image
src="/assets/tb-news.png" src="/assets/tb-news.png"
width={480}
height={480}
alt="tbn" alt="tbn"
className="w-[85px] lg:w-[170px]" className="w-[85px] lg:w-[170px]"
/> />
@ -118,8 +109,6 @@ export default function FooterNew(props: { margin?: boolean }) {
<Link href="https://inp.polri.go.id/" className="flex justify-center"> <Link href="https://inp.polri.go.id/" className="flex justify-center">
<Image <Image
src="/assets/inp.png" src="/assets/inp.png"
width={480}
height={480}
alt="inp" alt="inp"
className="w-[85px] lg:w-[170px]" className="w-[85px] lg:w-[170px]"
/> />

92
components/layout/navbar/NavbarHumas.tsx
View File

@ -15,8 +15,8 @@ import {
DropdownItem, DropdownItem,
DropdownMenu, DropdownMenu,
DropdownTrigger, DropdownTrigger,
Image,
} from "@heroui/react"; } from "@heroui/react";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { import {
@ -153,13 +153,7 @@ export default function NavbarHumas(props: { size: string }) {
}`} }`}
> >
<Link href={"/"}> <Link href={"/"}>
<Image <Image src="/logohumas.png" alt="logo" className="w-[95px]" />
width={720}
height={720}
src="/logohumas.png"
alt="logo"
className="w-[95px]"
/>
</Link> </Link>
<Dropdown <Dropdown
className="bg-white dark:bg-[#1F1A17] " className="bg-white dark:bg-[#1F1A17] "
@ -203,8 +197,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/at4.png" src="/at4.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -221,8 +213,6 @@ export default function NavbarHumas(props: { size: string }) {
<DropdownItem key="Formulir Permohonan Informasi"> <DropdownItem key="Formulir Permohonan Informasi">
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm2.png" src="/pm2.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -248,8 +238,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm3.png" src="/pm3.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -269,13 +257,11 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm4.png" src="/pm4.png"
className="w-[50px] h-[50px]" className="w-[65px] h-[55px]"
/> />
<div className="flex flex-col "> <div className="flex flex-col">
<p className="text-[16px] font-bold"> <p className="text-[16px] font-bold">
Pelayanan e-Rikkes SIM Pelayanan e-Rikkes SIM
</p> </p>
@ -292,8 +278,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm5.png" src="/pm5.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -319,8 +303,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm6.png" src="/pm6.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -341,8 +323,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm7.png" src="/pm7.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -365,8 +345,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm8.png" src="/pm8.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -390,11 +368,9 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm9.png" src="/pm9.png"
className="w-[50px] h-[50px] " className="w-[55px] h-[55px] "
/> />
<div className="flex flex-col"> <div className="flex flex-col">
<p className="text-[16px] font-bold"> <p className="text-[16px] font-bold">
@ -415,8 +391,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm10.png" src="/pm10.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -440,11 +414,9 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm11.png" src="/pm11.png"
className="w-[50px] h-[50px]" className="w-[55px] h-[50px]"
/> />
<div className="flex flex-col"> <div className="flex flex-col">
<p className="text-[16px] font-bold">Pelayanan Binmas </p> <p className="text-[16px] font-bold">Pelayanan Binmas </p>
@ -466,8 +438,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm12.png" src="/pm12.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -784,8 +754,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/at1.png" src="/at1.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -810,8 +778,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/at2.png" src="/at2.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -835,8 +801,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/at3.png" src="/at3.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -861,8 +825,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/at4.png" src="/at4.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -886,8 +848,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/at5.png" src="/at5.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -911,8 +871,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/at6.png" src="/at6.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -936,8 +894,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm6.png" src="/pm6.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -956,11 +912,9 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm4.png" src="/pm4.png"
className="w-[50px] h-[50px]" className="w-[56px] h-[56px]"
/> />
<div className="flex flex-col "> <div className="flex flex-col ">
<p className="text-[16px] font-bold">e-Rikkes</p> <p className="text-[16px] font-bold">e-Rikkes</p>
@ -978,8 +932,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm5.png" src="/pm5.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -1000,8 +952,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm11.png" src="/pm11.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -1026,8 +976,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm7.png" src="/pm7.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -1048,8 +996,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm8.png" src="/pm8.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -1073,8 +1019,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm9.png" src="/pm9.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -1099,8 +1043,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/at14.png" src="/at14.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -1124,8 +1066,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/at15.png" src="/at15.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -1151,8 +1091,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/at16.png" src="/at16.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -1178,8 +1116,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2"> <div className="flex flex-row gap-2">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm10.png" src="/pm10.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -1204,8 +1140,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm12.png" src="/pm12.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -1231,8 +1165,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Image <Image
width={360}
height={360}
alt="logo" alt="logo"
src="/pm3.png" src="/pm3.png"
className="w-[50px] h-[50px]" className="w-[50px] h-[50px]"
@ -1330,13 +1262,7 @@ export default function NavbarHumas(props: { size: string }) {
> >
<div className="flex justify-between w-full"> <div className="flex justify-between w-full">
<Link href={"/"}> <Link href={"/"}>
<Image <Image src="/logohumas.png" alt="logo" className="w-[78px]" />
width={480}
height={480}
src="/logohumas.png"
alt="logo"
className="w-[78px]"
/>
</Link> </Link>
<div className="flex flex-row gap-3 items-center"> <div className="flex flex-row gap-3 items-center">
{/* <a {/* <a
@ -1408,8 +1334,6 @@ export default function NavbarHumas(props: { size: string }) {
> >
{subItem.img && ( {subItem.img && (
<Image <Image
width={480}
height={480}
alt={subItem.img} alt={subItem.img}
src={subItem.img} src={subItem.img}
className="w-[35px] h-[35px] object-cover" className="w-[35px] h-[35px] object-cover"