shop information

src/app/globals.css

@@ -223,6 +223,16 @@ textarea.place-black::placeholder {
   direction: rtl;
 }
 
+/* React Query DevTools - Force LTR */
+[data-react-query-devtools] *,
+.tsqd-main-panel,
+.tsqd-main-panel *,
+[class*="tsqd-"] *,
+[class*="react-query-devtools"] * {
+  direction: ltr !important;
+  text-align: left !important;
+}
+
 .otp div {
   width: 100%;
 }

src/app/product/components/ShopInformation.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
-import { ArchiveTick, BoxTick, I3DRotate } from 'iconsax-react'
+import { BoxTick, I3DRotate } from 'iconsax-react'
 import React from 'react'
 import { Product } from '@/types/product.types'
 import Image from 'next/image'
@@ -53,16 +53,17 @@ const ShopInformation = ({ product }: ShopInformationProps) => {
             </div>
 
             <div className='flex gap-4 text-sm font-light border-b border-border pb-4 mt-4'>
-                <ArchiveTick size={20} color='#333333' />
+                <Image
+                    src={warranty.logoUrl}
+                    alt={warranty.name}
+                    width={20}
+                    height={20}
+                />
                 <div>{warranty.name}</div>
+                <Separator orientation='vertical' style={{ height: 20 }} />
+                <div>{warranty.duration}</div>
             </div>
 
-            <div className='mt-4'>
-                <div className='flex gap-4 text-sm font-light'>
-                    <ArchiveTick size={20} color='#333333' />
-                    <div>مدت گارانتی: {warranty.duration}</div>
-                </div>
-            </div>
             <div className='mt-6 border-b border-border pb-4'>
                 <div className='flex gap-4 text-sm font-light'>
                     <BoxTick size={20} color='blue' />

src/config/QueryProvider.tsx

@@ -2,6 +2,7 @@
 
 import { IGeneralError } from '@/types/error.types'
 import { QueryClient, QueryClientProvider, HydrationBoundary, QueryCache } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { ReactNode, useState } from 'react'
 import { removeToken } from './func'
 import { useSharedStore } from '@/share/store/sharedStore'
@@ -32,6 +33,10 @@ export default function QueryProvider({ children }: { children: ReactNode }) {
       <HydrationBoundary state={null}>
         {children}
       </HydrationBoundary>
+      <ReactQueryDevtools
+        initialIsOpen={false}
+        buttonPosition="bottom-left"
+      />
     </QueryClientProvider>
   )
 }