From 66cf9632b404707a02b0a567c863adb6ce35ac19 Mon Sep 17 00:00:00 2001 From: Odafe Aror Date: Thu, 2 Nov 2023 03:02:52 +0000 Subject: [PATCH] setup default ui build --- frontend/nextjs/components.json | 16 +++ frontend/nextjs/package.json | 6 + frontend/nextjs/src/app/globals.css | 89 ++++++++++---- frontend/nextjs/src/app/page.tsx | 115 ++----------------- frontend/nextjs/src/components/ui/button.tsx | 56 +++++++++ frontend/nextjs/src/lib/utils.ts | 6 + frontend/nextjs/tailwind.config.ts | 66 ++++++++++- 7 files changed, 225 insertions(+), 129 deletions(-) create mode 100644 frontend/nextjs/components.json create mode 100644 frontend/nextjs/src/components/ui/button.tsx create mode 100644 frontend/nextjs/src/lib/utils.ts diff --git a/frontend/nextjs/components.json b/frontend/nextjs/components.json new file mode 100644 index 0000000..e4e8e1a --- /dev/null +++ b/frontend/nextjs/components.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "src/app/globals.css", + "baseColor": "slate", + "cssVariables": true + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils" + } +} \ No newline at end of file diff --git a/frontend/nextjs/package.json b/frontend/nextjs/package.json index b5d84fd..609956b 100644 --- a/frontend/nextjs/package.json +++ b/frontend/nextjs/package.json @@ -9,11 +9,17 @@ "lint": "next lint" }, "dependencies": { + "@radix-ui/react-slot": "^1.0.2", "@rainbow-me/rainbowkit": "^1.1.4", + "class-variance-authority": "^0.7.0", + "clsx": "^2.0.0", + "lucide-react": "^0.291.0", "next": "14.0.1", "prettier": "^3.0.3", "react": "^18", "react-dom": "^18", + "tailwind-merge": "^2.0.0", + "tailwindcss-animate": "^1.0.7", "viem": "^1.18.1", "wagmi": "^1.4.5" }, diff --git a/frontend/nextjs/src/app/globals.css b/frontend/nextjs/src/app/globals.css index fd81e88..6a75725 100644 --- a/frontend/nextjs/src/app/globals.css +++ b/frontend/nextjs/src/app/globals.css @@ -1,27 +1,76 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + + --radius: 0.5rem; + } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; } } - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} \ No newline at end of file diff --git a/frontend/nextjs/src/app/page.tsx b/frontend/nextjs/src/app/page.tsx index e38c626..582d229 100644 --- a/frontend/nextjs/src/app/page.tsx +++ b/frontend/nextjs/src/app/page.tsx @@ -1,113 +1,12 @@ -import Image from 'next/image' - +import { Button } from "@/components/ui/button" export default function Home() { return ( -
-
-

- Get started by editing  - src/app/page.tsx -

-
- - By{' '} - Vercel Logo - -
-
- -
- Next.js Logo -
- -
- -

- Docs{' '} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{' '} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{' '} - - -> - -

-

- Explore the Next.js 13 playground. -

- - - -

- Deploy{' '} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
+
+

+ EMT Marketplace +

+

Under construction, check back later...

+
) } diff --git a/frontend/nextjs/src/components/ui/button.tsx b/frontend/nextjs/src/components/ui/button.tsx new file mode 100644 index 0000000..0ba4277 --- /dev/null +++ b/frontend/nextjs/src/components/ui/button.tsx @@ -0,0 +1,56 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", + { + 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 bg-background 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: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/frontend/nextjs/src/lib/utils.ts b/frontend/nextjs/src/lib/utils.ts new file mode 100644 index 0000000..ec79801 --- /dev/null +++ b/frontend/nextjs/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/frontend/nextjs/tailwind.config.ts b/frontend/nextjs/tailwind.config.ts index 1af3b8f..6d12b64 100644 --- a/frontend/nextjs/tailwind.config.ts +++ b/frontend/nextjs/tailwind.config.ts @@ -1,20 +1,84 @@ import type { Config } from 'tailwindcss' +/** @type {import('tailwindcss').Config} */ const config: Config = { + darkMode: ["class"], content: [ './src/pages/**/*.{js,ts,jsx,tsx,mdx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}', + './src/**/*.{ts,tsx}', ], theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, extend: { backgroundImage: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', }, + colors: { + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, }, }, - plugins: [], + plugins: [require("tailwindcss-animate")], } export default config