config tailwind

postcss.config.mjs

@@ -1,5 +1,6 @@
 const config = {
-  plugins: ["@tailwindcss/postcss"],
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
 };
-
 export default config;

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);
+}

src/app/layout.tsx

@@ -1,20 +1,20 @@
-import type { Metadata } from "next";
+import type { Metadata } from 'next';
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono } from 'next/font/google';
-import "./globals.css";
+import './globals.css';
 
 const geistSans = Geist({
-  variable: "--font-geist-sans",
+  variable: '--font-geist-sans',
-  subsets: ["latin"],
+  subsets: ['latin'],
 });
 
 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+  variable: '--font-geist-mono',
-  subsets: ["latin"],
+  subsets: ['latin'],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: 'Create Next App',
-  description: "Generated by create next app",
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({

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 (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+    <main className="flex min-h-screen flex-col items-center justify-between p-24 text-gray-300">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-        <Image
+        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          className="dark:invert"
+          {data.message}
-          src="/next.svg"
+        </p>
-          alt="Next.js logo"
+      </div>
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
+      <div className="mt-8 flex gap-4">
-          <a
+        <Button>Default Button</Button>
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
+        <Button disabled>Disabled Button</Button>
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+        <Button loading>Loading Button</Button>
-            target="_blank"
+        <Button endIcon={<span>→</span>}>Button with Icon</Button>
-            rel="noopener noreferrer"
+      </div>
-          >
+
-            <Image
+      <div className="mt-8 flex flex-col gap-4">
-              className="dark:invert"
+        <h3>Standard Buttons:</h3>
-              src="/vercel.svg"
+        <div className="flex gap-4">
-              alt="Vercel logomark"
+          <Button>Default Button</Button>
-              width={20}
+          <Button disabled>Disabled Button</Button>
-              height={20}
+          <Button loading>Loading Button</Button>
-            />
+          <Button endIcon={<span>→</span>}>Button with Icon</Button>
-            Deploy now
+        </div>
-          </a>
+
-          <a
+        <h3>Sized Buttons:</h3>
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
+        <div className="flex gap-4 items-center">
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          <Button size="small">Small Button</Button>
-            target="_blank"
+          <Button size="medium">Medium Button</Button>
-            rel="noopener noreferrer"
+          <Button size="large">Large Button</Button>
-          >
+        </div>
-            Read our docs
+
-          </a>
+        <h3>Icon Buttons:</h3>
+        <div className="flex gap-4 items-center">
+          <Button iconOnly endIcon={<span>←</span>} size="small" />
+          <Button iconOnly endIcon={<span>←</span>} size="medium" />
+          <Button iconOnly endIcon={<span>←</span>} size="large" />
+          <Button iconOnly endIcon={<span>←</span>} disabled size="medium" />
+          <Button iconOnly endIcon={<span>←</span>} loading size="medium" />
+        </div>
       </div>
     </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
   );
 }

src/components/Button.tsx

@@ -0,0 +1,78 @@
+import React, { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  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<ButtonProps> = ({
+  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 (
+    <button
+      className={`${baseStyles} ${sizeStyles[size]} ${currentStyles} ${className || 'bg-gray-500 '}`}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading ? (
+        <svg
+          className="animate-spin -ml-1 mr-3 h-5 w-5 text-primary"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l2-2.647z"
+          ></path>
+        </svg>
+      ) : null}
+      {children && !iconOnly ? children : null}
+      {endIcon && !loading && !iconOnly ? (
+        <span className="ml-2">{endIcon}</span>
+      ) : null}
+      {iconOnly && endIcon && !loading ? endIcon : null}
+    </button>
+  );
+};
+
+export default Button;

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;

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"]
 }