updating components ui

moovendhan-v · Apr 11, 2024 · c52d169 · c52d169
1 parent 379c6cc
commit c52d169
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git a/ui_tailwind_shadecn/src/screens/Components.tsx b/ui_tailwind_shadecn/src/screens/Components.tsx
@@ -35,7 +35,7 @@ import { fetchComponentsStore } from "@/api/components/components"
 import { NavSkeleton } from "@/components/custom_ui/skeleton/NavSkeleton"
 import { CardSkeleton } from "@/components/custom_ui/skeleton/CardSkeleton"
 import { useParams } from 'react-router-dom';
-import {ComponentData} from '@/types/ComponentData.type';
+import {ComponentData} from '@/type/ComponentData.type';
 
 export function Components() {
 
@@ -56,20 +56,20 @@ export function Components() {
   }, [catogries])
 
   return (
-    <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-      <div className="hidden border-r bg-muted/40 md:block">
-        <div className="flex h-full max-h-screen flex-col gap-2 relative">
-          <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+    <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[220px_1fr]">
+      <div className="hidden   md:block">
+       <div className="fixed h-full">
+       <div className="flex h-full max-h-screen flex-col gap-2 relative">
+       <Link to={"/"}>
+          <div className="flex h-14 items-center cursor-pointer px-4 lg:h-[60px] lg:p-6">
             <Logo /> <h3 className=" px-2 font-bold">Ui Components</h3>
-            <Button variant="outline" size="icon" className="ml-auto h-8 w-8">
-              <Bell className="h-4 w-4" />
-              <span className="sr-only">Toggle notifications</span>
-            </Button>
           </div>
-
-          <div className="flex-1 ">
+      </Link>
+      {/* [mask-image:linear-gradient(to_top,transparent,white_50%,white_100%,transparent)] */}
+          <div className="flex-1 overflow-scroll  relative z-20 max-w-7xl ">
             <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
-              {categries.length > 0 ? (
+             <div>
+             {categries.length > 0 ? (
                 categries.map((category, index) => (
                   <div className="transition duration-1000 ease-in-out relative">
                     <Link
@@ -87,13 +87,15 @@ export function Components() {
                   <NavSkeleton />
                 </>
               )}
+             </div>
             </nav>
           </div>
 
         </div>
+       </div>
       </div>
-      <div className="flex flex-col">
-        <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+      <div className="flex flex-col px-4">
+        <header className="flex h-14 items-center gap-4  lg:h-[60px] ">
           <Sheet>
             <SheetTrigger asChild>
               <Button
@@ -107,7 +109,7 @@ export function Components() {
             </SheetTrigger>
 
             <SheetContent side="left" className="flex flex-col">
-              <nav className="grid gap-2 text-lg font-medium">
+              <nav className="grid gap-2 text-lg font-medium overflow-scroll">
                 {categries.length > 0 ? (
                   categries.map((category, index) => (
                     <div className="transition duration-1000 ease-in-out">
@@ -136,7 +138,7 @@ export function Components() {
                   </CardHeader>
                   <CardContent>
                     <Button size="sm" className="w-full">
-                      Upgrade
+                      Joing 
                     </Button>
                   </CardContent>
                 </Card>
@@ -155,7 +157,11 @@ export function Components() {
                 />
               </div>
             </form>
-          </div>
+          </div> 
+          <Button variant="outline" size="icon" className="ml-auto h-8 w-8">
+              <Bell className="h-4 w-4" />
+              <span className="sr-only">Toggle notifications</span>
+            </Button>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="secondary" size="icon" className="rounded-full">
@@ -173,7 +179,7 @@ export function Components() {
             </DropdownMenuContent>
           </DropdownMenu>
         </header>
-        <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
+        <main className="flex flex-1 flex-col gap-4 lg:gap-6 ">
           <div className="flex items-center">
             <h1 className="text-lg font-semibold md:text-2xl">{catogries}  Components</h1>
           </div>

diff --git a/ui_tailwind_shadecn/src/screens/Home.tsx b/ui_tailwind_shadecn/src/screens/Home.tsx
@@ -68,10 +68,10 @@ export function Dashboard() {
                         UiComponents
                     </Link>
                     <Link
-                        to={`/${"components"}`}
+                        to={`/${"all"}`}
                         className="text-muted-foreground transition-colors hover:text-foreground"
                     >
-                        Components
+                        AllComponents
                     </Link>
 
                     <Link