diff --git a/frontend/src/components/CartHeader.tsx b/frontend/src/components/CartHeader.tsx index ab5b80f20e75086259bc2a9effe27129e1a17d6b..a5184828bdd1f7d5e25989e0f98d1ac6d9288ca0 100644 --- a/frontend/src/components/CartHeader.tsx +++ b/frontend/src/components/CartHeader.tsx @@ -12,7 +12,7 @@ export default function CartHeader({ image, name }: CartHeaderProps) { {image && ( <div className="flex items-center h-20 w-20"> <img - src={`../../public/images/${image}`} + src={image} alt="" className="object-cover h-full w-full rounded-3xl" /> diff --git a/frontend/src/components/OrderCard.tsx b/frontend/src/components/OrderCard.tsx index d8dff1d3e63dcc4625f9a1c988dca1cfb5750320..e63977eb81d28a3612c110109f18c618a0ed4b7b 100644 --- a/frontend/src/components/OrderCard.tsx +++ b/frontend/src/components/OrderCard.tsx @@ -7,14 +7,14 @@ type OrderCardProps = { price: number; } -export default function OrderCard({data}: {data: OrderCardProps[]}) { - const orderlist = data.map(({id, image, name, status, orderlist, price}) => { +export default function OrderCard({ data }: { data: OrderCardProps[] }) { + const orderlist = data.map(({ id, image, name, status, orderlist, price }) => { const orderStatus = () => { if (status === "Waiting for Payment") { return ( <div className="flex text-white bg-mealshub-red h-6 w-6 rounded-full text-sm justify-center items-center"> <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none"> - <path d="M3.78837 3.35712C3.22004 3.35712 2.675 3.58288 2.27314 3.98474C1.87127 4.38661 1.64551 4.93165 1.64551 5.49997V5.92854H15.3575V5.49997C15.3575 4.93165 15.1317 4.38661 14.7299 3.98474C14.328 3.58288 13.783 3.35712 13.2147 3.35712H3.78837ZM1.64551 11.5V6.78569H15.3575V11.5C15.3575 12.0683 15.1317 12.6133 14.7299 13.0152C14.328 13.4171 13.783 13.6428 13.2147 13.6428H3.78894C3.22062 13.6428 2.67557 13.4171 2.27371 13.0152C1.87184 12.6133 1.64608 12.0683 1.64608 11.5H1.64551ZM10.9289 9.92854C10.8153 9.92854 10.7063 9.9737 10.6259 10.0541C10.5455 10.1344 10.5004 10.2435 10.5004 10.3571C10.5004 10.4708 10.5455 10.5798 10.6259 10.6602C10.7063 10.7405 10.8153 10.7857 10.9289 10.7857H12.9289C13.0426 10.7857 13.1516 10.7405 13.232 10.6602C13.3124 10.5798 13.3575 10.4708 13.3575 10.3571C13.3575 10.2435 13.3124 10.1344 13.232 10.0541C13.1516 9.9737 13.0426 9.92854 12.9289 9.92854H10.9289Z" fill="white"/> + <path d="M3.78837 3.35712C3.22004 3.35712 2.675 3.58288 2.27314 3.98474C1.87127 4.38661 1.64551 4.93165 1.64551 5.49997V5.92854H15.3575V5.49997C15.3575 4.93165 15.1317 4.38661 14.7299 3.98474C14.328 3.58288 13.783 3.35712 13.2147 3.35712H3.78837ZM1.64551 11.5V6.78569H15.3575V11.5C15.3575 12.0683 15.1317 12.6133 14.7299 13.0152C14.328 13.4171 13.783 13.6428 13.2147 13.6428H3.78894C3.22062 13.6428 2.67557 13.4171 2.27371 13.0152C1.87184 12.6133 1.64608 12.0683 1.64608 11.5H1.64551ZM10.9289 9.92854C10.8153 9.92854 10.7063 9.9737 10.6259 10.0541C10.5455 10.1344 10.5004 10.2435 10.5004 10.3571C10.5004 10.4708 10.5455 10.5798 10.6259 10.6602C10.7063 10.7405 10.8153 10.7857 10.9289 10.7857H12.9289C13.0426 10.7857 13.1516 10.7405 13.232 10.6602C13.3124 10.5798 13.3575 10.4708 13.3575 10.3571C13.3575 10.2435 13.3124 10.1344 13.232 10.0541C13.1516 9.9737 13.0426 9.92854 12.9289 9.92854H10.9289Z" fill="white" /> </svg> </div> ); @@ -22,7 +22,7 @@ export default function OrderCard({data}: {data: OrderCardProps[]}) { return ( <div className="flex text-white bg-mealshub-orange h-6 w-6 rounded-full text-sm justify-center items-center"> <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none"> - <path d="M8.83333 1.5C7.65333 1.5 6.61333 2.28 6.28 3.41333C5.92667 3.25333 5.55333 3.16667 5.16667 3.16667C4.45942 3.16667 3.78115 3.44762 3.28105 3.94772C2.78095 4.44781 2.5 5.12609 2.5 5.83333C2.50158 6.42389 2.69866 6.9973 3.06048 7.46405C3.4223 7.93079 3.92848 8.26459 4.5 8.41333V13.1667H13.1667V8.41333C14.34 8.10667 15.1667 7.04667 15.1667 5.83333C15.1667 5.12609 14.8857 4.44781 14.3856 3.94772C13.8855 3.44762 13.2072 3.16667 12.5 3.16667C12.1133 3.16667 11.74 3.25333 11.3867 3.41333C11.0533 2.28 10.0133 1.5 8.83333 1.5ZM8.5 7.5H9.16667V12.1667H8.5V7.5ZM6.5 8.83333H7.16667V12.1667H6.5V8.83333ZM10.5 8.83333H11.1667V12.1667H10.5V8.83333ZM4.5 13.8333V14.5C4.5 14.6768 4.57024 14.8464 4.69526 14.9714C4.82029 15.0964 4.98986 15.1667 5.16667 15.1667H12.5C12.6768 15.1667 12.8464 15.0964 12.9714 14.9714C13.0964 14.8464 13.1667 14.6768 13.1667 14.5V13.8333H4.5Z" fill="white"/> + <path d="M8.83333 1.5C7.65333 1.5 6.61333 2.28 6.28 3.41333C5.92667 3.25333 5.55333 3.16667 5.16667 3.16667C4.45942 3.16667 3.78115 3.44762 3.28105 3.94772C2.78095 4.44781 2.5 5.12609 2.5 5.83333C2.50158 6.42389 2.69866 6.9973 3.06048 7.46405C3.4223 7.93079 3.92848 8.26459 4.5 8.41333V13.1667H13.1667V8.41333C14.34 8.10667 15.1667 7.04667 15.1667 5.83333C15.1667 5.12609 14.8857 4.44781 14.3856 3.94772C13.8855 3.44762 13.2072 3.16667 12.5 3.16667C12.1133 3.16667 11.74 3.25333 11.3867 3.41333C11.0533 2.28 10.0133 1.5 8.83333 1.5ZM8.5 7.5H9.16667V12.1667H8.5V7.5ZM6.5 8.83333H7.16667V12.1667H6.5V8.83333ZM10.5 8.83333H11.1667V12.1667H10.5V8.83333ZM4.5 13.8333V14.5C4.5 14.6768 4.57024 14.8464 4.69526 14.9714C4.82029 15.0964 4.98986 15.1667 5.16667 15.1667H12.5C12.6768 15.1667 12.8464 15.0964 12.9714 14.9714C13.0964 14.8464 13.1667 14.6768 13.1667 14.5V13.8333H4.5Z" fill="white" /> </svg> </div> ); @@ -30,13 +30,13 @@ export default function OrderCard({data}: {data: OrderCardProps[]}) { return ( <div className="flex text-white bg-mealshub-blue h-6 w-6 rounded-full text-sm justify-center items-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> - <path fillRule="evenodd" clipRule="evenodd" d="M13.471 4.52869C13.5959 4.65371 13.6661 4.82324 13.6661 5.00002C13.6661 5.1768 13.5959 5.34634 13.471 5.47135L7.13762 11.8047C7.0126 11.9297 6.84306 11.9999 6.66629 11.9999C6.48951 11.9999 6.31997 11.9297 6.19495 11.8047L3.19495 8.80469C3.07352 8.67895 3.00632 8.51055 3.00784 8.33575C3.00936 8.16096 3.07947 7.99375 3.20307 7.87014C3.32668 7.74654 3.49389 7.67642 3.66869 7.6749C3.84348 7.67339 4.01189 7.74058 4.13762 7.86202L6.66629 10.3907L12.5283 4.52869C12.6533 4.40371 12.8228 4.3335 12.9996 4.3335C13.1764 4.3335 13.3459 4.40371 13.471 4.52869Z" fill="white"/> + <path fillRule="evenodd" clipRule="evenodd" d="M13.471 4.52869C13.5959 4.65371 13.6661 4.82324 13.6661 5.00002C13.6661 5.1768 13.5959 5.34634 13.471 5.47135L7.13762 11.8047C7.0126 11.9297 6.84306 11.9999 6.66629 11.9999C6.48951 11.9999 6.31997 11.9297 6.19495 11.8047L3.19495 8.80469C3.07352 8.67895 3.00632 8.51055 3.00784 8.33575C3.00936 8.16096 3.07947 7.99375 3.20307 7.87014C3.32668 7.74654 3.49389 7.67642 3.66869 7.6749C3.84348 7.67339 4.01189 7.74058 4.13762 7.86202L6.66629 10.3907L12.5283 4.52869C12.6533 4.40371 12.8228 4.3335 12.9996 4.3335C13.1764 4.3335 13.3459 4.40371 13.471 4.52869Z" fill="white" /> </svg> </div> ); } } - + const orderList = () => { let orderList = ""; for (let i = 0; i < orderlist.length; i++) { @@ -49,14 +49,14 @@ export default function OrderCard({data}: {data: OrderCardProps[]}) { <p className="mt-2 font-normal text-lg text-gray-700 w-11/12">{orderList}</p> ); } - + const priceidr = price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); - + return ( <div className="flex flex-row bg-white border-b border-gray-300 py-10 md:flex-row mx-16 justify-start"> <div className="flex"> <div className="flex flex-row h-36 w-36 rounded-3xl md:rounded-3xl"> - <img src={`../../public/images/${image}`} alt={name} className="object-cover h-full w-full rounded-3xl"> + <img src={image} alt={name} className="object-cover h-full w-full rounded-3xl"> </img> </div> </div> diff --git a/frontend/src/components/TenantCard.tsx b/frontend/src/components/TenantCard.tsx index 323ba777183bec615c193956eef1f2f86a9d309e..0d0d92d5d74189f2c4b3ed285af5c403568c1898 100644 --- a/frontend/src/components/TenantCard.tsx +++ b/frontend/src/components/TenantCard.tsx @@ -1,85 +1,42 @@ type TenantCardProps = { - id: number; - image: string; - name: string; - rating: number; - open_hour: string; - close_hour: string; - lowestprice: number; - highestprice: number; -}; + id: number, + image: string, + name: string, + rating: number, + open_hour: string, + close_hour: string, + lowestprice: number, + highestprice: number, +} export default function TenantCard({ data }: { data: TenantCardProps[] }) { - const tenantlist = data.map( - ({ - id, - image, - name, - rating, - open_hour, - close_hour, - lowestprice, - highestprice, - }) => { - const lowestpriceidr = lowestprice - .toString() - .replace(/\B(?=(\d{3})+(?!\d))/g, "."); - const highestpriceidr = highestprice - .toString() - .replace(/\B(?=(\d{3})+(?!\d))/g, "."); + const tenantlist = data.map(({ id, image, name, rating, open_hour, close_hour, lowestprice, highestprice }) => { + const lowestpriceidr = lowestprice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + const highestpriceidr = highestprice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") - return ( - <a href={`tenant/${id}`}> - <div className="w-72 h-80 bg-white rounded-3xl shadow-xl"> - <div className="flex items-center h-48 w-full"> - <img - className="object-cover h-full w-full rounded-3xl" - src={`../../public/images/${image}`} - alt={name} - /> - </div> - <div className="mt-3 px-4"> - <h5 className="mb-2 text-lg font-bold tracking-tight text-gray-900"> - {name} - </h5> - <div className="flex items-center"> - <span> - <svg - className="w-6 h-6 text-mealshub-orange" - aria-hidden="true" - xmlns="http://www.w3.org/2000/svg" - fill="currentColor" - viewBox="0 0 24 24" - > - <path - fill="mealshub-orange" - d="M9.15323 5.408C10.4202 3.136 11.0532 2 12.0002 2C12.9472 2 13.5802 3.136 14.8472 5.408L15.1752 5.996C15.5352 6.642 15.7152 6.965 15.9952 7.178C16.2752 7.391 16.6252 7.47 17.3252 7.628L17.9612 7.772C20.4212 8.329 21.6502 8.607 21.9432 9.548C22.2352 10.488 21.3972 11.469 19.7202 13.43L19.2862 13.937C18.8102 14.494 18.5712 14.773 18.4642 15.117C18.3572 15.462 18.3932 15.834 18.4652 16.577L18.5312 17.254C18.7842 19.871 18.9112 21.179 18.1452 21.76C17.3792 22.342 16.2272 21.811 13.9252 20.751L13.3282 20.477C12.6742 20.175 12.3472 20.025 12.0002 20.025C11.6532 20.025 11.3262 20.175 10.6712 20.477L10.0762 20.751C7.77323 21.811 6.62123 22.341 5.85624 21.761C5.08924 21.179 5.21623 19.871 5.46923 17.254L5.53523 16.578C5.60723 15.834 5.64323 15.462 5.53523 15.118C5.42923 14.773 5.19024 14.494 4.71424 13.938L4.28024 13.43C2.60324 11.47 1.76523 10.489 2.05723 9.548C2.35024 8.607 3.58024 8.328 6.04024 7.772L6.67624 7.628C7.37524 7.47 7.72424 7.391 8.00524 7.178C8.28524 6.965 8.46523 6.642 8.82523 5.996L9.15323 5.408Z" - /> - </svg> - </span> - <span className="px-1.5 mr-1.5 font-light"> - {rating} - </span> - <div className="border-r h-4 border-gray-300"></div> - <span className="px-1.5 ml-1.5 font-light"> - {open_hour} - {close_hour} - </span> - </div> - <div className="pl-1.5 mt-2 flex items-center"> - <svg - className="w-3" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 288 512" - > - <path - fill="currentColor" - d="m209.2 233.4l-108-31.6C88.7 198.2 80 186.5 80 173.5c0-16.3 13.2-29.5 29.5-29.5h66.3c12.2 0 24.2 3.7 34.2 10.5c6.1 4.1 14.3 3.1 19.5-2l34.8-34c7.1-6.9 6.1-18.4-1.8-24.5C238 74.8 207.4 64.1 176 64V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48h-2.5C45.8 64-5.4 118.7.5 183.6c4.2 46.1 39.4 83.6 83.8 96.6l102.5 30c12.5 3.7 21.2 15.3 21.2 28.3c0 16.3-13.2 29.5-29.5 29.5h-66.3C100 368 88 364.3 78 357.5c-6.1-4.1-14.3-3.1-19.5 2l-34.8 34c-7.1 6.9-6.1 18.4 1.8 24.5c24.5 19.2 55.1 29.9 86.5 30v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-48.2c46.6-.9 90.3-28.6 105.7-72.7c21.5-61.6-14.6-124.8-72.5-141.7z" - /> + return ( + <a href={`tenant/${id}`}> + <div className="w-72 h-80 bg-white rounded-3xl shadow-xl"> + <div className="flex items-center h-48 w-full"> + <img className="object-cover h-full w-full rounded-3xl" src={image} alt={name} /> + </div> + <div className="mt-3 px-4"> + <h5 className="mb-2 text-lg font-bold tracking-tight text-gray-900">{name}</h5> + <div className="flex items-center"> + <span> + <svg className="w-6 h-6 text-mealshub-orange" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"> + <path fill="mealshub-orange" d="M9.15323 5.408C10.4202 3.136 11.0532 2 12.0002 2C12.9472 2 13.5802 3.136 14.8472 5.408L15.1752 5.996C15.5352 6.642 15.7152 6.965 15.9952 7.178C16.2752 7.391 16.6252 7.47 17.3252 7.628L17.9612 7.772C20.4212 8.329 21.6502 8.607 21.9432 9.548C22.2352 10.488 21.3972 11.469 19.7202 13.43L19.2862 13.937C18.8102 14.494 18.5712 14.773 18.4642 15.117C18.3572 15.462 18.3932 15.834 18.4652 16.577L18.5312 17.254C18.7842 19.871 18.9112 21.179 18.1452 21.76C17.3792 22.342 16.2272 21.811 13.9252 20.751L13.3282 20.477C12.6742 20.175 12.3472 20.025 12.0002 20.025C11.6532 20.025 11.3262 20.175 10.6712 20.477L10.0762 20.751C7.77323 21.811 6.62123 22.341 5.85624 21.761C5.08924 21.179 5.21623 19.871 5.46923 17.254L5.53523 16.578C5.60723 15.834 5.64323 15.462 5.53523 15.118C5.42923 14.773 5.19024 14.494 4.71424 13.938L4.28024 13.43C2.60324 11.47 1.76523 10.489 2.05723 9.548C2.35024 8.607 3.58024 8.328 6.04024 7.772L6.67624 7.628C7.37524 7.47 7.72424 7.391 8.00524 7.178C8.28524 6.965 8.46523 6.642 8.82523 5.996L9.15323 5.408Z" /> </svg> - <span className="px-3 font-light"> - Rp.{lowestpriceidr} - Rp.{highestpriceidr} - </span> - </div> + </span> + <span className="px-1.5 mr-1.5 font-light">{rating}</span> + <div className="border-r h-4 border-gray-300"></div> + <span className="px-1.5 ml-1.5 font-light">{open_hour} - {close_hour}</span> + </div> + <div className="pl-1.5 mt-2 flex items-center"> + <svg className="w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 512"> + <path fill="currentColor" d="m209.2 233.4l-108-31.6C88.7 198.2 80 186.5 80 173.5c0-16.3 13.2-29.5 29.5-29.5h66.3c12.2 0 24.2 3.7 34.2 10.5c6.1 4.1 14.3 3.1 19.5-2l34.8-34c7.1-6.9 6.1-18.4-1.8-24.5C238 74.8 207.4 64.1 176 64V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48h-2.5C45.8 64-5.4 118.7.5 183.6c4.2 46.1 39.4 83.6 83.8 96.6l102.5 30c12.5 3.7 21.2 15.3 21.2 28.3c0 16.3-13.2 29.5-29.5 29.5h-66.3C100 368 88 364.3 78 357.5c-6.1-4.1-14.3-3.1-19.5 2l-34.8 34c-7.1 6.9-6.1 18.4 1.8 24.5c24.5 19.2 55.1 29.9 86.5 30v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-48.2c46.6-.9 90.3-28.6 105.7-72.7c21.5-61.6-14.6-124.8-72.5-141.7z" /> + </svg> + <span className="px-3 font-light">Rp.{lowestpriceidr} - Rp.{highestpriceidr}</span> </div> </div> </a> diff --git a/frontend/src/components/TenantHeader.tsx b/frontend/src/components/TenantHeader.tsx index fb884a7992c351687da2d093a68db63f5c560fc3..2ddac416a3dc2d4b2c7010f82bed4999b510fb05 100644 --- a/frontend/src/components/TenantHeader.tsx +++ b/frontend/src/components/TenantHeader.tsx @@ -9,16 +9,16 @@ type TenantHeaderProps = { highestprice: number; } -export default function TenantHeader({data}: {data: TenantHeaderProps[]}) { - const tenantlist = data.map(({image, name, description, rating, openinghour, closinghour, lowestprice, highestprice}) => { +export default function TenantHeader({ data }: { data: TenantHeaderProps[] }) { + const tenantlist = data.map(({ image, name, description, rating, openinghour, closinghour, lowestprice, highestprice }) => { const lowestpriceidr = lowestprice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") const highestpriceidr = highestprice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") - + return ( <div className="flex bg-white md:flex-row mx-16"> <div className="flex flex-row leading-normal w-full border-b border-gray-300 pb-10"> <div className="flex items-center h-52 w-72"> - <img src={`../../public/images/${image}`} alt={name} className='object-cover h-full w-full rounded-3xl'> + <img src={image} alt={name} className='object-cover h-full w-full rounded-3xl'> </img> </div> <div className="flex flex-col ms-12"> @@ -26,17 +26,17 @@ export default function TenantHeader({data}: {data: TenantHeaderProps[]}) { <p className="w-full font-normal text-lg text-gray-500 text-left mb-2">{description}</p> <div className="flex items-center my-2 w-full"> <svg className="w-6 h-6 text-mealshub-orange" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"> - <path fill="mealshub-orange" d="M9.15323 5.408C10.4202 3.136 11.0532 2 12.0002 2C12.9472 2 13.5802 3.136 14.8472 5.408L15.1752 5.996C15.5352 6.642 15.7152 6.965 15.9952 7.178C16.2752 7.391 16.6252 7.47 17.3252 7.628L17.9612 7.772C20.4212 8.329 21.6502 8.607 21.9432 9.548C22.2352 10.488 21.3972 11.469 19.7202 13.43L19.2862 13.937C18.8102 14.494 18.5712 14.773 18.4642 15.117C18.3572 15.462 18.3932 15.834 18.4652 16.577L18.5312 17.254C18.7842 19.871 18.9112 21.179 18.1452 21.76C17.3792 22.342 16.2272 21.811 13.9252 20.751L13.3282 20.477C12.6742 20.175 12.3472 20.025 12.0002 20.025C11.6532 20.025 11.3262 20.175 10.6712 20.477L10.0762 20.751C7.77323 21.811 6.62123 22.341 5.85624 21.761C5.08924 21.179 5.21623 19.871 5.46923 17.254L5.53523 16.578C5.60723 15.834 5.64323 15.462 5.53523 15.118C5.42923 14.773 5.19024 14.494 4.71424 13.938L4.28024 13.43C2.60324 11.47 1.76523 10.489 2.05723 9.548C2.35024 8.607 3.58024 8.328 6.04024 7.772L6.67624 7.628C7.37524 7.47 7.72424 7.391 8.00524 7.178C8.28524 6.965 8.46523 6.642 8.82523 5.996L9.15323 5.408Z"/> - </svg> - <span className="px-1.5 mr-1.5 text-lg font-normal text-gray-500">{rating}</span> + <path fill="mealshub-orange" d="M9.15323 5.408C10.4202 3.136 11.0532 2 12.0002 2C12.9472 2 13.5802 3.136 14.8472 5.408L15.1752 5.996C15.5352 6.642 15.7152 6.965 15.9952 7.178C16.2752 7.391 16.6252 7.47 17.3252 7.628L17.9612 7.772C20.4212 8.329 21.6502 8.607 21.9432 9.548C22.2352 10.488 21.3972 11.469 19.7202 13.43L19.2862 13.937C18.8102 14.494 18.5712 14.773 18.4642 15.117C18.3572 15.462 18.3932 15.834 18.4652 16.577L18.5312 17.254C18.7842 19.871 18.9112 21.179 18.1452 21.76C17.3792 22.342 16.2272 21.811 13.9252 20.751L13.3282 20.477C12.6742 20.175 12.3472 20.025 12.0002 20.025C11.6532 20.025 11.3262 20.175 10.6712 20.477L10.0762 20.751C7.77323 21.811 6.62123 22.341 5.85624 21.761C5.08924 21.179 5.21623 19.871 5.46923 17.254L5.53523 16.578C5.60723 15.834 5.64323 15.462 5.53523 15.118C5.42923 14.773 5.19024 14.494 4.71424 13.938L4.28024 13.43C2.60324 11.47 1.76523 10.489 2.05723 9.548C2.35024 8.607 3.58024 8.328 6.04024 7.772L6.67624 7.628C7.37524 7.47 7.72424 7.391 8.00524 7.178C8.28524 6.965 8.46523 6.642 8.82523 5.996L9.15323 5.408Z" /> + </svg> + <span className="px-1.5 mr-1.5 text-lg font-normal text-gray-500">{rating}</span> <div className="border-r h-4 border-gray-300"></div> <span className="px-1.5 ml-1.5 text-lg font-normal text-gray-500">{openinghour} - {closinghour}</span> </div> <div className="flex items-center pl-1.5 mt-2"> <svg className="w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 512"> - <path fill="currentColor" d="m209.2 233.4l-108-31.6C88.7 198.2 80 186.5 80 173.5c0-16.3 13.2-29.5 29.5-29.5h66.3c12.2 0 24.2 3.7 34.2 10.5c6.1 4.1 14.3 3.1 19.5-2l34.8-34c7.1-6.9 6.1-18.4-1.8-24.5C238 74.8 207.4 64.1 176 64V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48h-2.5C45.8 64-5.4 118.7.5 183.6c4.2 46.1 39.4 83.6 83.8 96.6l102.5 30c12.5 3.7 21.2 15.3 21.2 28.3c0 16.3-13.2 29.5-29.5 29.5h-66.3C100 368 88 364.3 78 357.5c-6.1-4.1-14.3-3.1-19.5 2l-34.8 34c-7.1 6.9-6.1 18.4 1.8 24.5c24.5 19.2 55.1 29.9 86.5 30v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-48.2c46.6-.9 90.3-28.6 105.7-72.7c21.5-61.6-14.6-124.8-72.5-141.7z"/> + <path fill="currentColor" d="m209.2 233.4l-108-31.6C88.7 198.2 80 186.5 80 173.5c0-16.3 13.2-29.5 29.5-29.5h66.3c12.2 0 24.2 3.7 34.2 10.5c6.1 4.1 14.3 3.1 19.5-2l34.8-34c7.1-6.9 6.1-18.4-1.8-24.5C238 74.8 207.4 64.1 176 64V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48h-2.5C45.8 64-5.4 118.7.5 183.6c4.2 46.1 39.4 83.6 83.8 96.6l102.5 30c12.5 3.7 21.2 15.3 21.2 28.3c0 16.3-13.2 29.5-29.5 29.5h-66.3C100 368 88 364.3 78 357.5c-6.1-4.1-14.3-3.1-19.5 2l-34.8 34c-7.1 6.9-6.1 18.4 1.8 24.5c24.5 19.2 55.1 29.9 86.5 30v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-48.2c46.6-.9 90.3-28.6 105.7-72.7c21.5-61.6-14.6-124.8-72.5-141.7z" /> </svg> - <span className="px-3 font-normal text-lg text-gray-500">Rp.{lowestpriceidr} - Rp.{highestpriceidr}</span> + <span className="px-3 font-normal text-lg text-gray-500">Rp.{lowestpriceidr} - Rp.{highestpriceidr}</span> </div> </div> </div>