Refactor Header.tsx: remove unused imports, replace Card with HostLis…

…ting.
jitunayak · Aug 26, 2024 · 76d8529 · 76d8529
1 parent a6dfb21
commit 76d8529
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 64 deletions.
diff --git a/src/pages/Hosting/Header.tsx b/src/pages/Hosting/Header.tsx
@@ -1,12 +1,11 @@
-import { Button } from '@/components/Button';
 import { useApi } from '@/hooks';
 import { getLocalStorage } from '@/utils/LocalStorage';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
-import { PencilIcon, Trash2Icon } from 'lucide-react';
 
 import { AirBnbIcon } from '../../assets';
 import { styled } from '../../stitches.config';
+import HostListing from './HostListing';
 
 const HostingHeader: React.FC = () => {
   const navigate = useNavigate();
@@ -45,50 +44,7 @@ const HostingHeader: React.FC = () => {
           }}
         >
           {roomQuery.data.map((room) => (
-            <Card>
-              <div style={{ fontWeight: '500', marginBottom: '1rem' }}>
-                {room.name.substring(0, 20)}...
-              </div>
-              <img
-                style={{
-                  borderRadius: '4px',
-                  objectFit: 'cover',
-                }}
-                height={300}
-                src={room.images[0].url}
-                width={300}
-              />
-              <EditDeleteWrapper>
-                <Button
-                  color={'outline'}
-                  onClick={() => navigate({ to: `/hosting/edit/${room.id}` })}
-                  round={'xs'}
-                >
-                  <PencilIcon size={16} />
-                  Edit
-                </Button>
-                <Button
-                  onClick={() => {
-                    if (
-                      window.confirm(
-                        'Are you sure you want to delete this listing?',
-                      )
-                    ) {
-                      // roomsApi.deleteRoom(room.id).then(() => {
-                      //   roomQuery.refetch();
-                      // });
-                    }
-                  }}
-                  style={{
-                    color: 'red',
-                  }}
-                  color={'outline'}
-                  round={'xs'}
-                >
-                  <Trash2Icon size={16} />
-                </Button>
-              </EditDeleteWrapper>
-            </Card>
+            <HostListing key={room.id} room={room} />
           ))}
         </div>
       )}
@@ -132,20 +88,3 @@ const SubHeader = styled('p', {
   fontSize: '26px',
   fontWeight: '500',
 });
-
-const EditDeleteWrapper = styled('div', {
-  display: 'flex',
-  gap: '0.5rem',
-  justifyContent: 'center',
-  pb: '$2',
-  pl: '$2',
-});
-
-const Card = styled('div', {
-  border1: '$gray200',
-  borderRadius: '8px',
-  boxShadow: '$s',
-  mx: '$2',
-  my: '$2',
-  padding: '$2',
-});
diff --git a/src/pages/Hosting/HostListing.tsx b/src/pages/Hosting/HostListing.tsx
@@ -0,0 +1,103 @@
+import { Button } from '@/components/Button';
+import { styled } from '@/stitches.config';
+import { IRoom } from '@/types';
+import { useNavigate } from '@tanstack/react-router';
+import { AnimatePresence, motion } from 'framer-motion';
+import { PencilIcon, Trash2Icon } from 'lucide-react';
+import React, { useState } from 'react';
+
+type IProps = {
+  room: IRoom;
+};
+const HostListing: React.FC<IProps> = ({ room }) => {
+  const navigate = useNavigate();
+  const [isHovered, setisHovered] = useState(false);
+
+  return (
+    <Card
+      onMouseEnter={() => setisHovered(true)}
+      onMouseLeave={() => setisHovered(false)}
+    >
+      <div
+        style={{ fontSize: '14px', fontWeight: '500', marginBottom: '1rem' }}
+      >
+        {room.name.substring(0, 20)}...
+      </div>
+      <img
+        style={{
+          borderRadius: '4px',
+          objectFit: 'cover',
+        }}
+        height={300}
+        src={room.images[0].url}
+        width={260}
+      />
+      <span>₹ {room.price.discountedPrice}</span>
+
+      <AnimatePresence>
+        {isHovered && (
+          <motion.div
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            initial={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            <EditDeleteWrapper>
+              <Button
+                color={'outline'}
+                onClick={() => navigate({ to: `/hosting/edit/${room.id}` })}
+                round={'xs'}
+              >
+                <PencilIcon size={16} />
+                Edit
+              </Button>
+              <Button
+                onClick={() => {
+                  if (
+                    window.confirm(
+                      'Are you sure you want to delete this listing?',
+                    )
+                  ) {
+                    // roomsApi.deleteRoom(room.id).then(() => {
+                    //   roomQuery.refetch();
+                    // });
+                  }
+                }}
+                style={{
+                  color: 'red',
+                }}
+                color={'outline'}
+                round={'xs'}
+              >
+                <Trash2Icon size={16} />
+              </Button>
+            </EditDeleteWrapper>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </Card>
+  );
+};
+
+export default HostListing;
+
+const EditDeleteWrapper = styled('div', {
+  bottom: 10,
+  display: 'flex',
+  gap: '0.5rem',
+  justifyContent: 'center',
+  pb: '$2',
+  pl: '$2',
+  position: 'absolute',
+  right: 20,
+});
+
+const Card = styled('div', {
+  border1: '$gray200',
+  borderRadius: '8px',
+  boxShadow: '$s',
+  mx: '$2',
+  my: '$2',
+  padding: '$2',
+  position: 'relative',
+});
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
@@ -122,7 +122,7 @@ export const Messages: React.FC = () => {
                 message: inputText,
                 user:
                   `${user?.given_name?.substring(0, 1).toUpperCase()}${user?.family_name?.substring(0, 1).toUpperCase()}` ||
-                  'Guest',
+                  'G',
               },
             ]);
             setInputText('');