diff --git a/src/App.tsx b/src/App.tsx index 3045385..28f8835 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,10 @@ +import { Layout } from "@/components"; + function App() { return ( -
-

Hello world!

-
+ +

Hello world!

+ ); } diff --git a/src/assets/icons/icappsLogo.tsx b/src/assets/icons/icappsLogo.tsx new file mode 100644 index 0000000..b2d55ff --- /dev/null +++ b/src/assets/icons/icappsLogo.tsx @@ -0,0 +1,22 @@ +import type { SvgIcon } from "./types"; + +function icappsLogo({ title, width = 100, height = 16 }: SvgIcon) { + return ( + + {title} + + + + + + + + + + + + + ); +} + +export default icappsLogo; diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts new file mode 100644 index 0000000..4dff83b --- /dev/null +++ b/src/assets/icons/index.ts @@ -0,0 +1 @@ +export { default as IcappsLogo } from "./icappsLogo.tsx"; diff --git a/src/assets/icons/types.ts b/src/assets/icons/types.ts new file mode 100644 index 0000000..e8df642 --- /dev/null +++ b/src/assets/icons/types.ts @@ -0,0 +1,5 @@ +export type SvgIcon = { + title: string; + width?: number; + height?: number; +}; diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..e9f659a --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,86 @@ +import { IcappsLogo } from "@/assets/icons"; +import navigationItems from "@/navigation"; +import { cx } from "@/utils"; +import { useState } from "react"; + +function Header() { + const [isNavOpen, setIsNavOpen] = useState(false); + + const toggleNavigation = () => { + setIsNavOpen((prev) => !prev); + }; + + return ( +
+
+
+ + + +
+ {/* biome-ignore lint/a11y/useButtonType: */} + +
+
+
+
+ {navigationItems.map((item) => ( + + {item.title} + + ))} +
+
+
+
+ ); +} + +export default Header; diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx new file mode 100644 index 0000000..a3ea6df --- /dev/null +++ b/src/components/Layout.tsx @@ -0,0 +1,15 @@ +import { Header } from "@/components"; +import type { PropsWithChildren } from "react"; + +type Layout = PropsWithChildren; + +function Layout({ children }: Layout) { + return ( +
+
+ {children} +
+ ); +} + +export default Layout; diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..fe853b3 --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,2 @@ +export { default as Layout } from "./Layout"; +export { default as Header } from "./Header"; diff --git a/src/index.css b/src/index.css index b5c61c9..6198ba2 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,9 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + body { + @apply min-h-screen bg-congress-blue-900 text-white font-sans; + } +} diff --git a/src/navigation.ts b/src/navigation.ts new file mode 100644 index 0000000..899fc40 --- /dev/null +++ b/src/navigation.ts @@ -0,0 +1,14 @@ +export type NavigationItem = { + title: string; + href: string; + isActive?: boolean; +}; + +const navigationItems: NavigationItem[] = [ + { title: "Home", href: "#!", isActive: true }, + { title: "Services", href: "#!" }, + { title: "About", href: "#!" }, + { title: "Contact", href: "#!" }, +]; + +export default navigationItems; diff --git a/src/utils/cx.ts b/src/utils/cx.ts new file mode 100644 index 0000000..32493dd --- /dev/null +++ b/src/utils/cx.ts @@ -0,0 +1,5 @@ +function cx(...args: (string | undefined)[]): string { + return args.filter(Boolean).join(" "); +} + +export default cx; diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..58dbbe1 --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1 @@ +export { default as cx } from "./cx";