update

src/Services/api.service.js

@@ -94,6 +94,18 @@ export const rubix = createApi({
       query: ({ pageNumber = 1, pageSize = 10 }) => `SubNet/GetAllSubnetworks?pageNumber=${pageNumber}&pageSize=${pageSize}`,
       providesTags: ["getTransAll"],
     }),
+
+
+
+
+    gnerateShortUrl: builder.mutation({
+      query: (data) => ({
+        url: `ShortUrl/create`,
+        method: "POST",
+        body: data,
+      }),
+      
+    }),
     
   }),
 });
@@ -110,5 +122,6 @@ export const {
   useGetDateWiseDataQuery,
   useGetSubnetCountQuery,
   useGetSubnetByIdQuery,
-  useGetSubnetAllQuery
+  useGetSubnetAllQuery,
+  useGnerateShortUrlMutation
 } = rubix;

src/pages/Home.jsx

@@ -5,9 +5,12 @@ import {
   Container,
   FormControl,
   Heading,
+  HStack,
+  Icon,
   Input,
   InputGroup,
   InputLeftElement,
+  Text,
   useColorMode,
   VStack,
 } from "@chakra-ui/react";
@@ -22,14 +25,66 @@ import Pagination from "../components/Pagination";
 import bannerImage from "../assets/images/bannerImg.png";
 import bannerImageMobile from "../assets/images/bannerImgmobile.png";
 import { BiSearchAlt } from "react-icons/bi";
+import { MdContentCopy } from "react-icons/md";
+
+
+import { motion, AnimatePresence } from "framer-motion"; // Import AnimatePresence and motion
+import { useGnerateShortUrlMutation } from "../Services/api.service";
+
+const AnimatedBox = motion(HStack); // Create an animated HStack
 
 
 
 const Home = () => {
   const [isSwitchOn, setIsSwitchOn] = useState(true);
   const { colorMode, toggleColorMode } = useColorMode();
+  const [ linkVisible, setLinkVisible ] = useState(false)
   const [ searchTerm, setSearchTerm] = useState("")
   const navigate = useNavigate()
+  const [ shortURL, setShortURL ] = useState(null)
+  const [ isLoading, setIsLoading ] = useState(false)
+
+  const[ genrateSortURL ] = useGnerateShortUrlMutation()
+
+  // const handleGenrateShortURL = async () => {
+  //   try {
+  //     // Ensure searchTerm is converted to a string before passing to the API
+  //     const res = await genrateSortURL(JSON.stringify(searchTerm));
+  //     console.log(res);
+  //   } catch (error) {
+  //     console.error("Error generating short URL:", error);
+  //   }
+  // };
+
+  const handleGenrateShortURL = async () => {
+    setLinkVisible(true)
+    setIsLoading(true)
+    try {
+      const response = await fetch('https://rexplorerapi.azurewebsites.net/api/ShortUrl/create', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(searchTerm), // Sending searchTerm as a JSON string
+      });
+  
+      if (!response.ok) {
+        throw new Error('Failed to generate short URL');
+      }
+  
+      const result = await response.json();
+      console.log(result);
+      setShortURL(result?.shortUrl)
+      setIsLoading(false)
+      // You can handle the result here, e.g., by updating a state with the short URL
+    } catch (error) {
+      console.error("Error generating short URL:", error);
+    }
+  };
+
+
+  
+  
 
 
   return (
@@ -40,9 +95,9 @@ const Home = () => {
       backgroundSize="contain"
       backgroundRepeat="no-repeat">
       <Box>
-        <VStack pt={{base:colorMode === "light"?28:24,md:28}} mb={{base:8,md: 14}}>
+        <VStack pt={{base:colorMode === "light"?28:24,md:28}} mb={{base:8,md: false ?8: 14}}>
           <Container maxW="3xl" position={"relative"}>
-            <Box  w={'100%'} display={"flex"} alignItems={"center"} >
+            <Box  w={'100%'} display={"flex"} alignItems={"center"}  flexDirection={'column'} gap={6}>
               <InputGroup
                 width={"100%"}
                 boxShadow={"sm"}
@@ -90,6 +145,8 @@ const Home = () => {
                   _focus={{ opacity:1, outline:'none', bg:colorMode === "light" ? "#4023A6" : "#565252" }}
                   _active={{ opacity:0.9, outline:'none', bg:colorMode === "light" ? "#4023A6" : "#565252" }}
                   color={'#fff'}
+
+                  onClick={handleGenrateShortURL}
                 >
                   Generate short url
                 </Button>
@@ -116,6 +173,44 @@ const Home = () => {
                 </Box>
                 
               </InputGroup>
+
+              
+      {/* Slide-down animated HStack */}
+      <AnimatePresence>
+        {isLoading || linkVisible && (
+          <AnimatedBox
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.3 }}
+            shadow={"md"}
+            bg={colorMode === "light" ? "#DEDBEB" : "#575252"}
+            ps={5}
+            pe={3}
+            pt={4}
+            pb={4}
+            justifyContent={"space-between"}
+            rounded={"md"}
+            w={"100%"}
+          >
+            <Text as={"span"} fontSize={"sm"} textDecoration={"underline"}>
+              {shortURL}
+            </Text>
+            <Icon
+              _hover={{ bg: "#ccc" }}
+              transition={"0.5s"}
+              boxSize={7}
+              p={1.5}
+              cursor={"pointer"}
+              rounded={"md"}
+              as={MdContentCopy}
+              color={"#230A79"}
+
+              onClick={()=>copyToClipboard(shortURL)}
+            />
+          </AnimatedBox>
+        )}
+      </AnimatePresence>
             </Box>
           </Container>
         </VStack>