Implement code changes to enhance functionality and improve performance

components/common/SideBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import {
-    Tag, Image, Upload, TextSelect,
+    Tag, Image as Images, Upload, TextSelect,
     ImageDownIcon,
     UploadIcon
 } from "lucide-react";
@@ -19,6 +19,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Input } from '@/components/ui/input';
+import Image from "next/image";
 
 
 
@@ -104,16 +105,17 @@ const Sidebar = () => {
                         <UploadIcon size="18" color="#ffffff" />
                         Upload media
                     </Button>
-                    <div className=''>
+                    <div className='flex flex-col gap-2 w-full items-center justify-center'>
+                       <p className='text-xl font-semibold  text-white'>No uploads yet</p>
 
+                       <Image src="/images/noUploads.png" alt="no uploads" width={104} height={104} className='w-[104px] h-[104px]'/>
                     </div>
-                    <CategoryHeading title="Recent Uploads" />
                 </TabsContent>
 
                 <TabsContent value="elements" className='relative w-full h-full flex flex-col overflow-y-auto no-scrollbar p-2 md:p-4'>
                     <CategoryHeading title="Graphics" />
                     <div className='grid grid-cols-3  w-full flex-wrap gap-3 md:gap-5 justify-between'>
-                        <ActionButtons icon={<Image size="18" color="#ffffff" />} label="Stock Photo" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Images size="18" color="#ffffff" />} label="Stock Photo" isGhost={false} buttonWidth={65} />
                         <ActionButtons icon={<ImageDownIcon size="18" color="#ffffff" />} label="Stock Video" isGhost={false} buttonWidth={65} />
                         <ActionButtons icon={<Shapes size="18" color="#ffffff" />} label="Shapes" isGhost={false} buttonWidth={65} />
                         <ActionButtons icon={<Gift size="18" color="#ffffff" />} label="Gif" isGhost={false} buttonWidth={65} />
@@ -142,7 +144,7 @@ const Sidebar = () => {
                     <CategoryHeading title="Images" />
                     <div className='grid grid-cols-3  w-full flex-wrap gap-3 md:gap-5'>
                         <ActionButtons icon={<Cardano size="18" color="#ffffff" />} label="Spotlight" isGhost={false} buttonWidth={65} />
-                        <ActionButtons icon={<Image size="18" color="#ffffff" />} label="Slideshow" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Images size="18" color="#ffffff" />} label="Slideshow" isGhost={false} buttonWidth={65} />
                     </div>
 
                     <CategoryHeading title="Audio & video" />