diff --git a/app/components/button.tsx b/app/components/button.tsx new file mode 100644 index 0000000..87f67f3 --- /dev/null +++ b/app/components/button.tsx @@ -0,0 +1,31 @@ +import clsx from "clsx"; + +export default function Button({ + text, + route, + variant, + icon, +}: { + text: string; + route: string; + variant: "primary" | "secondary" | "ghost"; + icon: React.ElementType; +}) { + const Icon = icon; + return ( + + {icon && } + {text} + + ); +} diff --git a/app/fonts/GeistMonoVF.woff b/app/fonts/GeistMonoVF.woff deleted file mode 100644 index f2ae185..0000000 Binary files a/app/fonts/GeistMonoVF.woff and /dev/null differ diff --git a/app/fonts/GeistVF.woff b/app/fonts/GeistVF.woff deleted file mode 100644 index 1b62daa..0000000 Binary files a/app/fonts/GeistVF.woff and /dev/null differ diff --git a/app/globals.css b/app/globals.css index 13d40b8..b5c61c9 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,27 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -:root { - --background: #ffffff; - --foreground: #171717; -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} - -body { - color: var(--foreground); - background: var(--background); - font-family: Arial, Helvetica, sans-serif; -} - -@layer utilities { - .text-balance { - text-wrap: balance; - } -} diff --git a/app/layout.tsx b/app/layout.tsx index a36cde0..6560121 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,18 +1,6 @@ import type { Metadata } from "next"; -import localFont from "next/font/local"; import "./globals.css"; -const geistSans = localFont({ - src: "./fonts/GeistVF.woff", - variable: "--font-geist-sans", - weight: "100 900", -}); -const geistMono = localFont({ - src: "./fonts/GeistMonoVF.woff", - variable: "--font-geist-mono", - weight: "100 900", -}); - export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", @@ -25,11 +13,7 @@ export default function RootLayout({ }>) { return ( - - {children} - + {children} ); } diff --git a/app/page.tsx b/app/page.tsx index 433c8aa..b9bbd20 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,101 +1,29 @@ -import Image from "next/image"; +import Button from "@/app/components/button"; +import { EnvelopeIcon } from "@heroicons/react/20/solid"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
+
+
- +
); } diff --git a/package-lock.json b/package-lock.json index 6cc5e2e..0b9e1ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "jumbocode.org-2024", "version": "0.1.0", "dependencies": { + "@heroicons/react": "^2.1.5", + "clsx": "^2.1.1", "next": "14.2.12", "react": "^18", "react-dom": "^18" @@ -91,6 +93,14 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@heroicons/react": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz", + "integrity": "sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==", + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", @@ -1153,6 +1163,14 @@ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", diff --git a/package.json b/package.json index 15c271a..a17d2ef 100644 --- a/package.json +++ b/package.json @@ -9,18 +9,20 @@ "lint": "next lint" }, "dependencies": { + "@heroicons/react": "^2.1.5", + "clsx": "^2.1.1", + "next": "14.2.12", "react": "^18", - "react-dom": "^18", - "next": "14.2.12" + "react-dom": "^18" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "eslint": "^8", + "eslint-config-next": "14.2.12", "postcss": "^8", "tailwindcss": "^3.4.1", - "eslint": "^8", - "eslint-config-next": "14.2.12" + "typescript": "^5" } } diff --git a/tailwind.config.ts b/tailwind.config.ts index d43da91..9a52c29 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,5 +1,5 @@ import type { Config } from "tailwindcss"; - +import colors from "tailwindcss/colors"; const config: Config = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", @@ -9,8 +9,8 @@ const config: Config = { theme: { extend: { colors: { - background: "var(--background)", - foreground: "var(--foreground)", + gray: colors.slate, + brand: "#32C89E", }, }, },