diff --git a/.idea/prettier.xml b/.idea/prettier.xml
new file mode 100644
index 0000000..0c83ac4
--- /dev/null
+++ b/.idea/prettier.xml
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/app/layout.tsx b/app/layout.tsx
index 9a741ee..baf4279 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,22 +1,28 @@
-import '../styles/globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import { NavBar } from "@/components/navbar";
+import "../styles/globals.css";
+import { Footer } from "@/components/footer";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
- title: 'Create Next App',
- description: 'Generated by create next app',
-}
+ title: "Create Next App",
+ description: "Generated by create next app",
+};
export default function RootLayout({
children,
}: {
- children: React.ReactNode
+ children: React.ReactNode;
}) {
return (
- {children}
+
+
+ {children}
+
+
- )
+ );
}
diff --git a/app/page.tsx b/app/page.tsx
index 83588b2..009d8b3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,18 +1,16 @@
-'use client'
+"use client";
-import Image from 'next/image'
-// import { Inter } from 'next/font/google'
-import { useState } from 'react'
-import { Button } from '@/components/ui/button'
+import { Button } from "@/components/ui/button";
// const inter = Inter({ subsets: ['latin'] })
export default function Home() {
- const [dark, setDark] = useState (false)
return (
-
-
- Hello
-
- )
+ <>
+
+ Hello
+
+ );
}
diff --git a/components/content-wrapper.tsx b/components/content-wrapper.tsx
new file mode 100644
index 0000000..348c0ab
--- /dev/null
+++ b/components/content-wrapper.tsx
@@ -0,0 +1,11 @@
+import { cn } from "@/lib/utils";
+import { type PropsWithChildren } from "react";
+
+export const ContentWrapper = ({
+ children,
+ padding = "6",
+}: PropsWithChildren<{ padding?: string }>) => {
+ return (
+ {children}
+ );
+};
diff --git a/components/footer.tsx b/components/footer.tsx
new file mode 100644
index 0000000..e7ae1c0
--- /dev/null
+++ b/components/footer.tsx
@@ -0,0 +1,12 @@
+import { ContentWrapper } from "./content-wrapper";
+import { Logo } from "./logo";
+
+export const Footer = () => {
+ return (
+
+ );
+};
diff --git a/components/line.tsx b/components/line.tsx
new file mode 100644
index 0000000..8989ed0
--- /dev/null
+++ b/components/line.tsx
@@ -0,0 +1,3 @@
+export const Line = () => {
+ return ;
+};
diff --git a/components/logo.tsx b/components/logo.tsx
new file mode 100644
index 0000000..43716d8
--- /dev/null
+++ b/components/logo.tsx
@@ -0,0 +1,5 @@
+import { Heading } from "./ui/heading";
+
+export const Logo = () => {
+ return Outpost;
+};
diff --git a/components/menu-items.tsx b/components/menu-items.tsx
new file mode 100644
index 0000000..97b9aa7
--- /dev/null
+++ b/components/menu-items.tsx
@@ -0,0 +1,18 @@
+import Link from "next/link";
+import { Button } from "./ui/button";
+
+export const MenuItems = () => {
+ return (
+
+ {["Home", "About", "Contact"].map((item) => (
+ -
+
+
+
+
+ ))}
+
+ );
+};
diff --git a/components/navbar.tsx b/components/navbar.tsx
new file mode 100644
index 0000000..e2e52b4
--- /dev/null
+++ b/components/navbar.tsx
@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { Logo } from "./logo";
+import { ContentWrapper } from "./content-wrapper";
+import { ShoppingCart } from "lucide-react";
+import { Search } from "./search";
+import { MenuItems } from "./menu-items";
+import { Line } from "./line";
+
+export const NavBar = () => {
+ return (
+
+ );
+};
diff --git a/components/search.tsx b/components/search.tsx
new file mode 100644
index 0000000..c3c6935
--- /dev/null
+++ b/components/search.tsx
@@ -0,0 +1,5 @@
+import { Input } from "./ui/input";
+
+export const Search = () => {
+ return ;
+};
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 26801d9..0ec0799 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -1,41 +1,51 @@
-import React, { useMemo } from 'react';
+import * as React from "react";
+import { VariantProps, cva } from "class-variance-authority";
-const getSizeClasses = (size: string) => {
- switch (size) {
- case 'small': {
- return 'px-4 py-2.5';
- }
- case 'large': {
- return 'px-6 py-3';
- }
- default: {
- return 'px-5 py-2.5';
- }
- }
-};
+import { cn } from "@/lib/utils";
-const getModeClasses = (isPrimary: boolean) =>
- isPrimary
- ? 'text-white bg-pink-600 border-pink-600 dark:bg-pink-700 dark:border-pink-700'
- : 'text-slate-700 bg-transparent border-slate-700 dark:text-white dark:border-white';
+const buttonVariants = cva(
+ "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "underline-offset-4 hover:underline text-primary",
+ },
+ size: {
+ default: "h-10 py-2 px-4",
+ sm: "h-9 px-3 rounded-md",
+ lg: "h-11 px-8 rounded-md",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+);
-const BASE_BUTTON_CLASSES =
- 'cursor-pointer rounded-full border-2 font-bold leading-none inline-block';
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({ primary = false, size = 'medium', label, ...props }: {primary: boolean, size: string; label: string;}) => {
- const computedClasses = useMemo(() => {
- const modeClass = getModeClasses(primary);
- const sizeClass = getSizeClasses(size);
-
- return [modeClass, sizeClass].join(' ');
- }, [primary, size]);
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {}
+const Button = React.forwardRef(
+ ({ className, variant, size, ...props }, ref) => {
return (
-
+
);
-};
+ }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/components/ui/heading.tsx b/components/ui/heading.tsx
new file mode 100644
index 0000000..2e4accb
--- /dev/null
+++ b/components/ui/heading.tsx
@@ -0,0 +1,15 @@
+import { type PropsWithChildren } from "react";
+
+const headingStyles = {
+ h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+ h2: "scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0",
+ h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+ h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+};
+
+export const Heading = ({
+ children,
+ size: Tag,
+}: PropsWithChildren<{ size: "h1" | "h2" | "h3" | "h4" }>) => {
+ return {children};
+};
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..a625c1a
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface InputProps
+ extends React.InputHTMLAttributes {}
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+Input.displayName = "Input";
+
+export { Input };