Basic components and migration to Shadcn/ui.

components.json

@@ -11,8 +11,8 @@
     "prefix": ""
   },
   "aliases": {
-    "components": "src/components",
+    "components": "@/components",
-    "utils": "src/lib/utils",
+    "utils": "@/lib/utils",
     "ui": "src/components/ui"
   }
 }

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@radix-ui/react-checkbox": "^1.0.4",
+        "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-popover": "^1.0.7",
@@ -19,6 +20,7 @@
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
         "embla-carousel-react": "^8.0.2",
+        "lucide-react": "^0.378.0",
         "react": "^18.2.0",
         "react-day-picker": "^8.10.1",
         "react-dom": "^18.2.0",
@@ -809,6 +811,32 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
@@ -843,6 +871,23 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
@@ -870,6 +915,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz",
+      "integrity": "sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-menu": "2.0.6",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
@@ -961,6 +1035,46 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz",
+      "integrity": "sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.7.tgz",
@@ -1100,6 +1214,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
@@ -3383,6 +3528,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.378.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.378.0.tgz",
+      "integrity": "sha512-u6EPU8juLUk9ytRcyapkWI18epAv3RU+6+TC23ivjR0e+glWKBobFeSgRwOIJihzktILQuy6E0E80P2jVTDR5g==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
@@ -21,6 +22,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.0.2",
+    "lucide-react": "^0.378.0",
     "react": "^18.2.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.2.0",

src/components/Rooms/room-item-card.tsx

@@ -0,0 +1,34 @@
+import { Separator } from "../ui/separator"
+import { Card, CardContent, CardHeader } from "../ui/card"
+import { Typography } from "../ui/typography"
+import { BedDoubleIcon, BedSingleIcon, UserIcon } from "lucide-react"
+
+export function RoomItemCard() {
+
+  return (
+    <Card>
+      <CardHeader className="p-0 m-0 mb-5">
+        <img src="https://images.unsplash.com/photo-1618773928121-c32242e63f39" className="rounded-md"></img>
+        <Typography variant={"h2"} as="h1" className="mx-5 py-2">Doble con baño</Typography>
+      </CardHeader>
+      <CardContent>
+        <Typography variant={"p"} as="p">
+          Habitación doble con <strong>baño privado</strong>.
+        </Typography>
+        <Separator className="my-4" />
+        <div className="flex justify-around">
+          <div className="flex flex-row gap-2">
+            <Typography variant={"p_inline"}>2</Typography>
+            <BedSingleIcon />
+            <Typography variant={"p_inline"}>1</Typography>
+            <BedDoubleIcon />
+          </div>
+          <div className="flex flex-row">
+            <UserIcon />
+            <Typography variant={"p_inline"} className="ml-3">3</Typography>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/Search/SearchFilterCard.tsx

@@ -0,0 +1,26 @@
+import { Separator } from "../ui/separator"
+import { Card, CardContent, CardHeader } from "../ui/card"
+import { Typography } from "../ui/typography"
+import 'react-day-picker/dist/style.css';
+import { DatePickerWithRange } from "../ui/DateRangePicker";
+import { Button } from "../ui/button";
+import { SearchIcon } from "lucide-react";
+
+export function SearchFilterCard() {
+
+  return (
+    <Card>
+      <CardHeader className="p-0 m-0 mb-5">
+        <Typography variant={"h2"} as="h1" className="mx-5 py-2">Reserva ahora</Typography>
+      </CardHeader>
+      <CardContent>
+        <DatePickerWithRange></DatePickerWithRange>
+        <Separator className="my-4" />
+        <Button size={"lg"}>
+            <SearchIcon className="text-primary-foreground me-2"/>
+            <Typography variant={"h3"} className="text-primary-foreground">Buscar</Typography>
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}

src/components/app-footer.css

@@ -1,19 +0,0 @@
-.footerComponent {
-    position: relative;
-    width: 100vw;
-    margin-inline: auto;
-
-    display: grid;
-    grid-template-columns: 60% 40%;
-
-    
-    align-items: center;
-
-    background-color: rgb(0, 71, 71);
-    border-radius: 10pt;
-
-    padding-block: 10px;
-
-    left: 0;
-    bottom: 0;
-}

src/components/app-footer.tsx

@@ -1,15 +1,14 @@
-import "./app-footer.css"
 
 function AppFooter() {
 
   return (
-    <div className="footerComponent">
+    <div className="bg-secondary flex-col hidden">
-        <div className="footerColumn">
+        <div className="">
             Created with Love by me :)
         </div>
-        <div className="footerColumn">
+        <div className="">
             <p>Más información</p>
-            <ul>
+            <ul className="list-outside">
                 <li>Info</li>
                 <li>Info2</li>
                 <li>Info3</li>

src/components/app-header.css

@@ -1,18 +0,0 @@
-.headerContainer {
-    display: flex;
-    flex-flow: row nowrap;
-    column-gap: 25px;
-
-    justify-content: space-around;
-    align-items: center;
-
-    height: 80px;
-    margin-inline: auto;
-
-    background-color: rgb(0, 71, 71);
-    border-radius: 10pt;
-}
-
-.headerElement {
-    padding: 6px;
-}

src/components/app-header.tsx

@@ -1,19 +1,24 @@
-import "./app-header.css"
+import { BookmarkIcon } from "@radix-ui/react-icons"
+import { ModeToggle } from "./mode-toggle"
+import { Button } from "./ui/button"
+import { Card, CardContent } from "./ui/card"
+import { Typography } from "./ui/typography"
 
 function AppHeader() {
 
   return (
-    <div className="headerContainer">
+    <Card className="flex items-center mx-10 my-4">
-        <div className="headerElement">
+      <CardContent className="w-full">
-            Hostal del Val
+        <div className="flex justify-around">
+          <Typography variant={"largeText"}>Hostal del Val</Typography>
+          <Button variant="ghost">
+            <BookmarkIcon/>
+            <Typography variant={"largeText"}>Reservar</Typography>
+          </Button>
+          <ModeToggle />
         </div>
-        <div className="headerElement">
+      </CardContent>
-            Reservar
+    </Card>
-        </div>
-        <div className="headerElement">
-            Contacto
-        </div>
-    </div>
   )
 }
 

src/components/mode-toggle.tsx

@@ -0,0 +1,37 @@
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useTheme } from "@/components/theme-provider"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

src/components/theme-provider.tsx

@@ -0,0 +1,73 @@
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+    children: React.ReactNode
+    defaultTheme?: Theme
+    storageKey?: string
+}
+
+type ThemeProviderState = {
+    theme: Theme
+    setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+    theme: "system",
+    setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+    children,
+    defaultTheme = "system",
+    storageKey = "vite-ui-theme",
+    ...props
+}: ThemeProviderProps) {
+    const [theme, setTheme] = useState<Theme>(
+        () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+    )
+
+    useEffect(() => {
+        const root = window.document.documentElement
+
+        root.classList.remove("light", "dark")
+
+        if (theme === "system") {
+            const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+                .matches
+                ? "dark"
+                : "light"
+
+            root.classList.add(systemTheme)
+            return
+        }
+
+        root.classList.add(theme)
+    }, [theme])
+
+    const value = {
+        theme,
+        setTheme: (theme: Theme) => {
+            localStorage.setItem(storageKey, theme)
+            setTheme(theme)
+        },
+    }
+
+    return (
+        <ThemeProviderContext.Provider {...props} value={value}>
+            {children}
+        </ThemeProviderContext.Provider>
+    )
+}
+
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext)
+
+    if (context === undefined)
+        throw new Error("useTheme must be used within a ThemeProvider")
+
+    return context
+}

src/components/ui/DateRangePicker.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { format } from "date-fns"
+import { ActiveModifiers, DateRange } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Typography } from "./typography"
+
+export function DatePickerWithRange({
+  className,
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: undefined,
+    to: undefined,
+  })
+
+  //TODOME: Si el día es mods.outside, navegar al mes correspondiente.
+  const handleDayClickFrom = (day: Date, mods: ActiveModifiers) => {
+    setDateRange({
+      from: mods.selected ? undefined : day,
+      to: dateRange?.to
+    })
+  }
+  const handleDayClickTo = (day: Date, mods: ActiveModifiers) => {
+    setDateRange({
+      from: dateRange?.from,
+      to: mods.selected ? undefined : day
+    })
+  }
+
+  return (
+    <div className={cn("grid gap-x-2 grid-cols-2 grid-rows-2", className)}>
+      <Typography variant={"largeText"} as="p">Desde</Typography>
+      <Typography variant={"largeText"} as="p">Hasta</Typography>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="dateFrom"
+            variant={"outline"}
+            className={cn(
+              "justify-start text-left font-normal",
+              !dateRange && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {dateRange?.from ? (
+              format(dateRange.from, "LLL dd, y")
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="single"
+            defaultMonth={dateRange?.from}
+            selected={dateRange?.from}
+            onDayClick={handleDayClickFrom}
+            numberOfMonths={1}
+          />
+        </PopoverContent>
+      </Popover>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="dateTo"
+            variant={"outline"}
+            className={cn(
+              "justify-start text-left font-normal",
+              !dateRange && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {dateRange?.to ? (
+              format(dateRange.to, "LLL dd, y")
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="single"
+            defaultMonth={dateRange?.to}
+            selected={dateRange?.to}
+            onDayClick={handleDayClickTo}
+            numberOfMonths={1}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,203 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

src/components/ui/typography.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import * as React from 'react';
+import { VariantProps, cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Slot } from '@radix-ui/react-slot';
+
+const typographyVariants = cva('text-foreground', {
+    variants: {
+        variant: {
+            h1: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl',
+            h2: 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0',
+            h3: 'scroll-m-20 text-2xl font-semibold tracking-tight',
+            h4: 'scroll-m-20 text-xl font-semibold tracking-tight',
+            h5: 'scroll-m-20 text-lg font-semibold tracking-tight',
+            h6: 'scroll-m-20 text-base font-semibold tracking-tight',
+            p: 'leading-7 [&:not(:first-child)]:mt-6',
+            p_inline: 'leading-7',
+            blockquote: 'mt-6 border-l-2 pl-6 italic',
+            ul: 'my-6 ml-6 list-disc [&>li]:mt-2',
+            inlineCode:
+                'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold',
+            lead: 'text-xl text-muted-foreground',
+            largeText: 'text-lg font-semibold',
+            smallText: 'text-sm font-medium leading-none',
+            mutedText: 'text-sm text-muted-foreground',
+        },
+    },
+    defaultVariants: {
+        variant: "p",
+    },
+});
+
+type VariantPropType = VariantProps<typeof typographyVariants>;
+
+const variantElementMap: Record<
+    NonNullable<VariantPropType['variant']>,
+    string
+> = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    p: 'p',
+    p_inline: 'p',
+    blockquote: 'blockquote',
+    inlineCode: 'code',
+    largeText: 'div',
+    smallText: 'small',
+    lead: 'p',
+    mutedText: 'p',
+    ul: 'ul',
+};
+
+export interface TypographyProps
+    extends React.HTMLAttributes<HTMLElement>,
+        VariantProps<typeof typographyVariants> {
+    asChild?: boolean;
+    as?: string;
+}
+
+const Typography = React.forwardRef<HTMLElement, TypographyProps>(
+    ({ className, variant, as, asChild, ...props }, ref) => {
+        const Comp = asChild
+            ? Slot
+            : as ?? (variant ? variantElementMap[variant] : undefined) ?? 'div';
+        return (
+            <Comp
+                className={cn(typographyVariants({ variant, className }))}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+
+Typography.displayName = 'Typography';
+
+export { Typography, typographyVariants };

src/index.css

@@ -2,67 +2,51 @@
 @tailwind components;
 @tailwind utilities;
 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
+    --foreground: 240 10% 3.9%;
-
     --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
+    --card-foreground: 240 10% 3.9%;
-
     --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
+    --popover-foreground: 240 10% 3.9%;
-
+    --primary: 142.1 76.2% 36.3%;
-    --primary: 24 9.8% 10%;
+    --primary-foreground: 355.7 100% 97.3%;
-    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 240 4.8% 95.9%;
-
+    --secondary-foreground: 240 5.9% 10%;
-    --secondary: 60 4.8% 95.9%;
+    --muted: 240 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
+    --muted-foreground: 240 3.8% 46.1%;
-
+    --accent: 240 4.8% 95.9%;
-    --muted: 60 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
+    --destructive-foreground: 0 0% 98%;
-
+    --border: 240 5.9% 90%;
-    --border: 20 5.9% 90%;
+    --input: 240 5.9% 90%;
-    --input: 20 5.9% 90%;
+    --ring: 142.1 76.2% 36.3%;
-    --ring: 20 14.3% 4.1%;
+    --radius: 0.75rem;
-
-    --radius: 0.5rem;
   }
 
   .dark {
     --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
+    --foreground: 0 0% 95%;
-
+    --card: 24 9.8% 10%;
-    --card: 20 14.3% 4.1%;
+    --card-foreground: 0 0% 95%;
-    --card-foreground: 60 9.1% 97.8%;
+    --popover: 0 0% 9%;
-
+    --popover-foreground: 0 0% 95%;
-    --popover: 20 14.3% 4.1%;
+    --primary: 142.1 70.6% 45.3%;
-    --popover-foreground: 60 9.1% 97.8%;
+    --primary-foreground: 144.9 80.4% 10%;
-
+    --secondary: 240 3.7% 15.9%;
-    --primary: 60 9.1% 97.8%;
+    --secondary-foreground: 0 0% 98%;
-    --primary-foreground: 24 9.8% 10%;
+    --muted: 0 0% 15%;
-
+    --muted-foreground: 240 5% 64.9%;
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
     --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
+    --accent-foreground: 0 0% 98%;
-
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
+    --destructive-foreground: 0 85.7% 97.3%;
-
+    --border: 240 3.7% 15.9%;
-    --border: 12 6.5% 15.1%;
+    --input: 240 3.7% 15.9%;
-    --input: 12 6.5% 15.1%;
+    --ring: 142.4 71.8% 29.2%;
-    --ring: 24 5.7% 82.9%;
   }
 }
 

src/routes/Root.css

@@ -14,6 +14,4 @@ html {
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
-
-  background-color: rgb(45, 45, 45);
 }

src/routes/Root.tsx

@@ -2,16 +2,19 @@ import { Outlet } from 'react-router-dom'
 import './Root.css'
 import AppHeader from '../components/app-header'
 import AppFooter from '../components/app-footer'
+import { ThemeProvider } from '@/components/theme-provider'
 
 function Root() {
 
   return (
     <>
-      <AppHeader />
+      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-      <div className='appPage'>
+        <AppHeader />
-        <Outlet />
+        <div className='appPage'>
-      </div>
+          <Outlet />
-      <AppFooter />
+        </div>
+        <AppFooter />
+      </ThemeProvider>
     </>
   )
 }

src/routes/home-page.css

@@ -1,3 +0,0 @@
-.homePage {
-    min-height: 100vh;
-}

src/routes/home-page.tsx

@@ -1,11 +1,17 @@
-import "./home-page.css"
+import { RoomItemCard } from "@/components/Rooms/room-item-card"
+import { SearchFilterCard } from "@/components/Search/SearchFilterCard"
 import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
 
 function Homepage() {
 
   return (
     <div className="bg-background text-foreground">
       <Button>Test</Button>
+      <Separator className="my-10"/>
+      <SearchFilterCard />
+      <Separator className="my-10"/>
+      <RoomItemCard />
     </div>
   )
 }