Sedimark · NaryLozano · Nov 25, 2024 · Nov 25, 2024 · Nov 25, 2024 · Dec 17, 2024
diff --git a/next.config.js b/next.config.js
@@ -18,6 +18,16 @@ const nextConfig = {
         ]
       }
     ]
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'picsum.photos',
+        port: '',
+        pathname: '/200'
+      }
+    ]
   }
 }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@heroicons/react": "^2.0.18",
+    "@heroicons/react": "^2.2.0",
     "@metamask/sdk-react": "^0.27.0",
     "dayjs": "^1.11.13",
     "flowbite-react": "^0.7.2",

diff --git a/src/app/catalogue/asset/components/Asset.jsx b/src/app/catalogue/asset/components/Asset.jsx
@@ -1,5 +1,6 @@
 import { Badge } from 'flowbite-react'
 import Image from 'next/image'
+import { HiLocationMarker, HiCalendar, HiOutlineRefresh } from 'react-icons/hi'
 import Credentials from './Credentials'
 import ProviderCard from './ProviderCard'
 import mockProvider from '@/utils/data/mockProvider.json'
@@ -22,21 +23,15 @@ function Asset ({ asset }) {
       <div className='flex justify-between m-6 ml-0'>
         <div className='flex flex-row flex-wrap gap-4'>
           <div className='flex flex-row items-center gap-2'>
-            <svg class='w-5 h-5 text-black dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
-              <path fill-rule='evenodd' d='M11.906 1.994a8.002 8.002 0 0 1 8.09 8.421 7.996 7.996 0 0 1-1.297 3.957.996.996 0 0 1-.133.204l-.108.129c-.178.243-.37.477-.573.699l-5.112 6.224a1 1 0 0 1-1.545 0L5.982 15.26l-.002-.002a18.146 18.146 0 0 1-.309-.38l-.133-.163a.999.999 0 0 1-.13-.202 7.995 7.995 0 0 1 6.498-12.518ZM15 9.997a3 3 0 1 1-5.999 0 3 3 0 0 1 5.999 0Z' clip-rule='evenodd' />
-            </svg>
+            <HiLocationMarker />
             <p>{location}</p>
           </div>
           <div className='flex flex-row items-center gap-2'>
-            <svg class='w-5 h-5 text-black dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
-              <path fill-rule='evenodd' d='M5 5a1 1 0 0 0 1-1 1 1 0 1 1 2 0 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 1 1 0 1 1 2 0 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 1 1 0 1 1 2 0 1 1 0 0 0 1 1 2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a2 2 0 0 1 2-2ZM3 19v-7a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Zm6.01-6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm2 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm6 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm-10 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm6 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm2 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z' clip-rule='evenodd' />
-            </svg>
+            <HiCalendar />
             <p>Published {createdAt.toISOString().split('T')[0]}</p>
           </div>
           <div className='flex flex-row items-center gap-2'>
-            <svg class='w-5 h-5 text-black dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'>
-              <path stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m16 10 3-3m0 0-3-3m3 3H5v3m3 4-3 3m0 0 3 3m-3-3h14v-3' />
-            </svg>
+            <HiOutlineRefresh />
             <p>Updated {updatedAt.toISOString().split('T')[0]}</p>
           </div>
         </div>

diff --git a/src/app/catalogue/asset/components/PriceCard.jsx b/src/app/catalogue/asset/components/PriceCard.jsx
@@ -1,5 +1,7 @@
 import { Card } from 'flowbite-react'
+import { HiClock, HiShoppingCart } from 'react-icons/hi'
 import { TermsNConditions } from './Terms&ConditionsModal'
+
 function PriceCard ({ price }) {
   return (
     <Card className='flex max-w-sm min-w-fit max-h-72 min-h-fit pt-2 sticky top-28'>
@@ -8,9 +10,7 @@ function PriceCard ({ price }) {
         <span className='text-5xl font-bold tracking-tight'>{price}</span>
       </div>
       <div className='my-3 flex space-x-3'>
-        <svg class='w-6 h-6 text-sedimark-deep-blue dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
-          <path fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V8Z' clip-rule='evenodd' />
-        </svg>
+        <HiClock size={20} />
         <span className='text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>Accessible for three months</span>
       </div>
       <div className='flex flex-col items-center'>
@@ -19,11 +19,10 @@ function PriceCard ({ price }) {
           type='button'
           className='inline-flex w-full justify-center rounded-lg bg-sedimark-deep-blue px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-cyan-700 focus:outline-none focus:ring-4 focus:ring-cyan-200 dark:focus:ring-cyan-900'
         >
-          <svg class='w-5 h-5 text-white dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
-            <path d='M12.268 6A2 2 0 0 0 14 9h1v1a2 2 0 0 0 3.04 1.708l-.311 1.496a1 1 0 0 1-.979.796H8.605l.208 1H16a3 3 0 1 1-2.83 2h-2.34a3 3 0 1 1-4.009-1.76L4.686 5H4a1 1 0 0 1 0-2h1.5a1 1 0 0 1 .979.796L6.939 6h5.329Z' />
-            <path d='M18 4a1 1 0 1 0-2 0v2h-2a1 1 0 1 0 0 2h2v2a1 1 0 1 0 2 0V8h2a1 1 0 1 0 0-2h-2V4Z' />
-          </svg>
-          Buy
+          <span className='flex items center'>
+            <HiShoppingCart size={18} className='mr-1' />
+            Buy
+          </span>
         </button>
       </div>
     </Card>

diff --git a/src/app/catalogue/asset/components/ProviderCard.jsx b/src/app/catalogue/asset/components/ProviderCard.jsx
@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import { HiMail, HiGlobeAlt } from 'react-icons/hi'
 
 function ProviderCard ({ provider }) {
   return (
@@ -10,17 +11,12 @@ function ProviderCard ({ provider }) {
           <p className='text-xs text-center text-black pt-1'><a href={provider.url} target='_blank' rel='noreferrer'>{provider.name}</a></p>
         </div>
         <div className='flex flex-col justify-around'>
-          <div className='flex gap-2'>
-            <svg class='w-5 h-5 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
-              <path d='M2.038 5.61A2.01 2.01 0 0 0 2 6v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6c0-.12-.01-.238-.03-.352l-.866.65-7.89 6.032a2 2 0 0 1-2.429 0L2.884 6.288l-.846-.677Z' />
-              <path d='M20.677 4.117A1.996 1.996 0 0 0 20 4H4c-.225 0-.44.037-.642.105l.758.607L12 10.742 19.9 4.7l.777-.583Z' />
-            </svg>
+          <div className='flex items-center gap-2'>
+            <HiMail size={20} />
             <p>{provider.email}</p>
           </div>
-          <div className='flex gap-2'>
-            <svg class='w-5 h-5 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
-              <path fill-rule='evenodd' d='M8.64 4.737A7.97 7.97 0 0 1 12 4a7.997 7.997 0 0 1 6.933 4.006h-.738c-.65 0-1.177.25-1.177.9 0 .33 0 2.04-2.026 2.008-1.972 0-1.972-1.732-1.972-2.008 0-1.429-.787-1.65-1.752-1.923-.374-.105-.774-.218-1.166-.411-1.004-.497-1.347-1.183-1.461-1.835ZM6 4a10.06 10.06 0 0 0-2.812 3.27A9.956 9.956 0 0 0 2 12c0 5.289 4.106 9.619 9.304 9.976l.054.004a10.12 10.12 0 0 0 1.155.007h.002a10.024 10.024 0 0 0 1.5-.19 9.925 9.925 0 0 0 2.259-.754 10.041 10.041 0 0 0 4.987-5.263A9.917 9.917 0 0 0 22 12a10.025 10.025 0 0 0-.315-2.5A10.001 10.001 0 0 0 12 2a9.964 9.964 0 0 0-6 2Zm13.372 11.113a2.575 2.575 0 0 0-.75-.112h-.217A3.405 3.405 0 0 0 15 18.405v1.014a8.027 8.027 0 0 0 4.372-4.307ZM12.114 20H12A8 8 0 0 1 5.1 7.95c.95.541 1.421 1.537 1.835 2.415.209.441.403.853.637 1.162.54.712 1.063 1.019 1.591 1.328.52.305 1.047.613 1.6 1.316 1.44 1.825 1.419 4.366 1.35 5.828Z' clip-rule='evenodd' />
-            </svg>
+          <div className='flex items-center gap-2'>
+            <HiGlobeAlt size={20} />
             <p>{provider.url}</p>
           </div>
         </div>

diff --git a/src/app/catalogue/asset/components/RecommenderItem.jsx b/src/app/catalogue/asset/components/RecommenderItem.jsx
@@ -1,7 +1,9 @@
+import { HiOutlineCurrencyEuro, HiCalendar, HiUser } from 'react-icons/hi'
+
 function RecommenderItem ({ vc, providerName, price, color }) {
   const maxLengthTitle = 42
   const maxLengthDescription = 60
-  const name = vc.title.length > maxLengthTitle ? vc.title.substring( 0, maxLengthTitle ) + '...' : vc.title
+  const name = vc.title.length > maxLengthTitle ? vc.title.substring(0, maxLengthTitle) + '...' : vc.title
   const description = vc.short_description.length > maxLengthDescription ? vc.short_description.substring(0, maxLengthDescription) + '...' : vc.short_description
   const issuanceDate = vc.created_at ? new Date(vc.created_at) : new Date()
   const date = isNaN(issuanceDate.getTime()) ? new Date() : issuanceDate
@@ -14,52 +16,19 @@ function RecommenderItem ({ vc, providerName, price, color }) {
         <div className='text-sm mr-4'>{description}</div>
         <span>
           <div className='flex flex-row gap-2 w-36'>
-            <svg
-              className='w-5 h-5'
-              aria-hidden='true'
-              fill='currentColor'
-              viewBox='0 0 20 20'
-              xmlns='http://www.w3.org/2000/svg'
-            >
-              <path
-                clipRule='evenodd'
-                d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.798 7.45c.512-.67 1.135-.95 1.702-.95s1.19.28 1.702.95a.75.75 0 0 0 1.192-.91C12.637 5.55 11.596 5 10.5 5s-2.137.55-2.894 1.54A5.205 5.205 0 0 0 6.83 8H5.75a.75.75 0 0 0 0 1.5h.77a6.333 6.333 0 0 0 0 1h-.77a.75.75 0 0 0 0 1.5h1.08c.183.528.442 1.023.776 1.46.757.99 1.798 1.54 2.894 1.54s2.137-.55 2.894-1.54a.75.75 0 0 0-1.192-.91c-.512.67-1.135.95-1.702.95s-1.19-.28-1.702-.95a3.505 3.505 0 0 1-.343-.55h1.795a.75.75 0 0 0 0-1.5H8.026a4.835 4.835 0 0 1 0-1h2.224a.75.75 0 0 0 0-1.5H8.455c.098-.195.212-.38.343-.55Z'
-                fillRule='evenodd'
-              />
-            </svg>
+            <HiOutlineCurrencyEuro size={20} />
             <p className='text-sm'>{validatedPrice} euros</p>
           </div>
           <div className='flex flex-row gap-2 w-36 mt-2'>
-            <svg
-              className='w-5 h-5'
-              aria-hidden='true'
-              fill='currentColor'
-              viewBox='0 0 20 20'
-              xmlns='http://www.w3.org/2000/svg'
-            >
-              <path d='M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75V12ZM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75H6ZM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75V12ZM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75H8ZM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75V10ZM10 11.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75H10ZM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75V14ZM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75H12ZM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75V12ZM12 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75H12ZM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75V10ZM14 11.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75H14Z' />
-              <path
-                clipRule='evenodd'
-                d='M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2Zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75Z'
-                fillRule='evenodd'
-              />
-            </svg>
-            <p className="text-sm">{date.toISOString().split('T')[0]}</p>
+            <HiCalendar size={20} />
+            <p className='text-sm'>{date.toISOString().split('T')[0]}</p>
           </div>
         </span>
       </div>
       <div className='flex justify-between'>
         <div className='flex flex-row gap-4'>
           <div className='flex flex-row items-center gap-2'>
-            <svg
-              className='w-5 h-5'
-              aria-hidden='true'
-              fill='currentColor'
-              viewBox='0 0 20 20'
-              xmlns='http://www.w3.org/2000/svg'
-            >
-              <path d='M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z' />
-            </svg>
+            <HiUser size={20} />
             <p className='pr-2 text-sm'>{providedBy}</p>
           </div>
         </div>

diff --git a/src/app/catalogue/asset/page.js b/src/app/catalogue/asset/page.js
@@ -1,16 +1,18 @@
 import { Button } from 'flowbite-react'
+import { HiArrowLeft } from 'react-icons/hi'
 import DatasetInfoComponent from './components/DatasetInfoComponent'
 import Recommender from './components/Recommender'
 import mockRecommendations from '@/utils/data/mockRecommendations.json'
+
 export default function Page () {
   return (
     <>
       <div className='bg-sedimark-light-blue pt-2 pb-2'>
-        <Button className=' max-w-fit m-2 ml-10 bg-sedimark-light-gray enabled:hover:bg-sedimark-medium-gray text-sedimark-dark-gray' href='/catalogue'>
-          <svg class='w-5 h-5 text-sedimark-dark-deep-blue dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'>
-            <path stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14M5 12l4-4m-4 4 4 4' />
-          </svg>
-          Back to search
+        <Button className='max-w-fit m-2 ml-10 bg-sedimark-light-gray enabled:hover:bg-sedimark-medium-gray text-sedimark-dark-gray' href='/catalogue'>
+          <span className='flex items-center'>
+            <HiArrowLeft className='mr-2' />
+            Back to search
+          </span>
         </Button>
         <DatasetInfoComponent />
         <Recommender recommendations={mockRecommendations.recommendations} />

diff --git a/src/app/catalogue/components/OfferingItem.jsx b/src/app/catalogue/components/OfferingItem.jsx
@@ -1,3 +1,5 @@
+import { HiOutlineCurrencyEuro, HiCalendar, HiUser } from 'react-icons/hi'
+
 function OfferingItem ({ vc, providerName, price, color }) {
   const name = vc.title
   const description = vc.short_description
@@ -11,52 +13,19 @@ function OfferingItem ({ vc, providerName, price, color }) {
       <div className='flex items-center justify-between w-full'>
         <div>{description}</div>
         <div className='flex flex-row items-center gap-2 w-36'>
-          <svg
-            className='w-8 h-8'
-            aria-hidden='true'
-            fill='currentColor'
-            viewBox='0 0 20 20'
-            xmlns='http://www.w3.org/2000/svg'
-          >
-            <path
-              clipRule='evenodd'
-              d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.798 7.45c.512-.67 1.135-.95 1.702-.95s1.19.28 1.702.95a.75.75 0 0 0 1.192-.91C12.637 5.55 11.596 5 10.5 5s-2.137.55-2.894 1.54A5.205 5.205 0 0 0 6.83 8H5.75a.75.75 0 0 0 0 1.5h.77a6.333 6.333 0 0 0 0 1h-.77a.75.75 0 0 0 0 1.5h1.08c.183.528.442 1.023.776 1.46.757.99 1.798 1.54 2.894 1.54s2.137-.55 2.894-1.54a.75.75 0 0 0-1.192-.91c-.512.67-1.135.95-1.702.95s-1.19-.28-1.702-.95a3.505 3.505 0 0 1-.343-.55h1.795a.75.75 0 0 0 0-1.5H8.026a4.835 4.835 0 0 1 0-1h2.224a.75.75 0 0 0 0-1.5H8.455c.098-.195.212-.38.343-.55Z'
-              fillRule='evenodd'
-            />
-          </svg>
+          <HiOutlineCurrencyEuro size={20} />
           <p>{validatedPrice} euros</p>
         </div>
       </div>
       <div className='flex justify-between'>
         <div className='flex flex-row gap-4'>
           <div className='flex flex-row items-center gap-2'>
-            <svg
-              className='w-8 h-8'
-              aria-hidden='true'
-              fill='currentColor'
-              viewBox='0 0 20 20'
-              xmlns='http://www.w3.org/2000/svg'
-            >
-              <path d='M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z' />
-            </svg>
+            <HiUser size={20} />
             <p className='pr-2'>{providedBy}</p>
           </div>
         </div>
         <div className='flex flex-row items-center gap-2 w-36'>
-          <svg
-            className='w-8 h-8'
-            aria-hidden='true'
-            fill='currentColor'
-            viewBox='0 0 20 20'
-            xmlns='http://www.w3.org/2000/svg'
-          >
-            <path d='M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75V12ZM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75H6ZM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75V12ZM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75H8ZM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75V10ZM10 11.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75H10ZM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75V14ZM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75H12ZM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75V12ZM12 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75H12ZM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75V10ZM14 11.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75H14Z' />
-            <path
-              clipRule='evenodd'
-              d='M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2Zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75Z'
-              fillRule='evenodd'
-            />
-          </svg>
+          <HiCalendar size={20} />
           <p>{date.toISOString().split('T')[0]}</p>
         </div>
       </div>