From b8c3ebcee3d8e076384afcca4d196648740a1c8e Mon Sep 17 00:00:00 2001 From: ahasani194 Date: Sat, 31 May 2025 14:46:26 +0330 Subject: [PATCH] config tailwind --- postcss.config.mjs | 5 +- src/app/globals.css | 40 +++++++++++ src/app/layout.tsx | 18 ++--- src/app/page.tsx | 146 +++++++++++++------------------------- src/components/Button.tsx | 78 ++++++++++++++++++++ tailwind.config.ts | 68 ++++++++++++++++++ tsconfig.json | 2 +- 7 files changed, 248 insertions(+), 109 deletions(-) create mode 100644 src/components/Button.tsx create mode 100644 tailwind.config.ts diff --git a/postcss.config.mjs b/postcss.config.mjs index c7bcb4b..95d885e 100644 --- a/postcss.config.mjs +++ b/postcss.config.mjs @@ -1,5 +1,6 @@ const config = { - plugins: ["@tailwindcss/postcss"], + plugins: { + '@tailwindcss/postcss': {}, + }, }; - export default config; diff --git a/src/app/globals.css b/src/app/globals.css index a2dc41e..f740430 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,4 +1,5 @@ @import "tailwindcss"; +@import "tailwindcss/utilities"; :root { --background: #ffffff; @@ -24,3 +25,42 @@ body { color: var(--foreground); font-family: Arial, Helvetica, sans-serif; } + +:root { + --primary: #6366F1; + --secondary: #A78BFA; + --textColorLight: #FFFFFF; + --textColorGray: #222222; + --bgPrimary: #FFFFFF; + --gray-100: #EBEBEB; + --gray-200: #F5F5F5; + --gray-300: #81848A; + --gray-400: #777; + --gray-500: #222; + + .dark{ + --primary: #FA003F; + --secondary: #7C3AED; + --textColorLight: #FA003F; + --textColorGray: #FA003F; + --bgPrimary: #FA003F; + --gray-100: #EBEBEB; + --gray-200: #F5F5F5; + --gray-300: #81848A; + --gray-400: #777; + --gray-500: #222; + } +} + +@theme inline { + --color-primary: var(--primary-default); + --color-secondary: var(--secondary-default); + --color-text-light: var(--textColorLight-default); + --color-text-gray: var(--textColorGray-default); + --color-bg-primary: var(--bgPrimary-default); + --color-gray-100: var(--gray-100); + --color-gray-200: var(--gray-200); + --color-gray-300: var(--gray-300); + --color-gray-400: var(--gray-400); + --color-gray-500: var(--gray-500); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..8da647e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,20 +1,20 @@ -import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; -import "./globals.css"; +import type { Metadata } from 'next'; +import { Geist, Geist_Mono } from 'next/font/google'; +import './globals.css'; const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], + variable: '--font-geist-sans', + subsets: ['latin'], }); const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], + variable: '--font-geist-mono', + 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({ diff --git a/src/app/page.tsx b/src/app/page.tsx index e68abe6..ffefd17 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,103 +1,55 @@ -import Image from "next/image"; +// ... existing imports ... +import Button from '../components/Button'; // Adjust the import path if necessary + +async function getData() { + // Simulate a delay to show server-side data fetching + await new Promise((resolve) => setTimeout(resolve, 1000)); + return { message: 'This data was fetched on the server!' }; +} + +export default async function Home() { + const data = await getData(); -export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
+
+
+

+ {data.message} +

+
-
- - Vercel logomark - Deploy now - - - Read our docs - +
+ + + + +
+ +
+

Standard Buttons:

+
+ + + +
-
- -
+ +

Sized Buttons:

+
+ + + +
+ +

Icon Buttons:

+
+
+ + ); } diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..70d262b --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,78 @@ +import React, { ButtonHTMLAttributes, ReactNode } from 'react'; + +interface ButtonProps extends ButtonHTMLAttributes { + children?: ReactNode; // Make children optional for icon-only buttons + loading?: boolean; + disabled?: boolean; + endIcon?: ReactNode; + size?: 'small' | 'medium' | 'large'; // Add size prop + iconOnly?: boolean; // Add iconOnly prop +} + +const Button: React.FC = ({ + children, + loading = false, + disabled = false, + endIcon, + size = 'medium', // Default size to medium + iconOnly = false, // Default iconOnly to false + className, + ...props +}) => { + const baseStyles = + 'inline-flex items-center justify-center border border-transparent font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 '; + const enabledStyles = + 'text-white bg-primary-light hover:bg-indigo-700 active:bg-indigo-800 focus:ring-indigo-500'; + const disabledStyles = 'text-gray-400 bg-gray-200 cursor-not-allowed'; + const loadingStyles = 'text-gray-400 bg-gray-200 cursor-wait'; + + const sizeStyles = { + small: iconOnly ? 'p-2 text-sm' : 'px-3 py-1.5 text-sm', + medium: iconOnly ? 'p-2.5 text-base' : 'px-4 py-2 text-base', + large: iconOnly ? 'p-3 text-lg' : 'px-6 py-3 text-lg', + }; + + const currentStyles = disabled + ? disabledStyles + : loading + ? loadingStyles + : enabledStyles; + + return ( + + ); +}; + +export default Button; diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..ccdc167 --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,68 @@ +import type { Config } from 'tailwindcss'; + +const config: Config = { + darkMode: ['class', 'string'], + content: [ + './src/pages/**/*.{js,ts,jsx,tsx,mdx}', + './src/components/**/*.{js,ts,jsx,tsx,mdx}', + './src/app/**/*.{js,ts,jsx,tsx,mdx}', + ], + theme: { + // Move your custom colors directly here to override default Tailwind colors + extend: { + colors: { + // Custom colors + primary: { + light: '#6366F1', + DEFAULT: '#6366F1', + dark: '#FA003F', + }, + secondary: { + light: '#A78BFA', + DEFAULT: '#8B5CF6', + dark: '#7C3AED', + }, + textColorLight: { + light: '#FFFFFF', + DEFAULT: '#FFFFFF', + dark: '#FA003F', + }, + textColorGray: { + light: '#222222', + DEFAULT: '#222222', + dark: '#FA003F', + }, + bgPrimary: { + light: '#FFFFFF', + DEFAULT: '#FFFFFF', + dark: '#FA003F', + }, + gray: { + light: { + 100: '#EBEBEB', + 200: '#F5F5F5', + 300: '#81848A', + 400: '#777', + 500: '#222', + }, + dark: { + 100: '#EBEBEB', + 200: '#F5F5F5', + 300: '#81848A', + 400: '#777', + 500: '#222', + }, + }, + }, + backgroundImage: { + 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', + 'gradient-conic': + 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', + }, + // Any other extensions go here + }, + }, + plugins: [], +}; + +export default config; diff --git a/tsconfig.json b/tsconfig.json index c133409..e3b03b6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,6 +22,6 @@ "@/*": ["./src/*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "tailwind.config.js"], "exclude": ["node_modules"] }