From b312df815162387fc55e0a341a9e7c28255b9526 Mon Sep 17 00:00:00 2001 From: baslani Date: Sat, 18 Apr 2026 10:42:55 +0330 Subject: [PATCH] implemented primary button component --- messages/ku.json | 5 ++ src/app/[locale]/layout.tsx | 2 +- src/app/[locale]/page.tsx | 4 +- src/components/ComponentsConteiner.tsx | 25 ++++++++++ src/components/buttons/PrimaryButton.tsx | 62 ++++++++++++++++++++++++ src/i18n/direction.ts | 1 + src/i18n/routing.ts | 2 +- src/styles/globals.css | 7 ++- 8 files changed, 100 insertions(+), 8 deletions(-) create mode 100644 messages/ku.json create mode 100644 src/components/ComponentsConteiner.tsx create mode 100644 src/components/buttons/PrimaryButton.tsx diff --git a/messages/ku.json b/messages/ku.json new file mode 100644 index 0000000..6e88cea --- /dev/null +++ b/messages/ku.json @@ -0,0 +1,5 @@ +{ + "Home": { + "title": "hello" + } +} diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index e8a9b77..7303fe5 100644 --- a/src/app/[locale]/layout.tsx +++ b/src/app/[locale]/layout.tsx @@ -45,7 +45,7 @@ export default async function RootLayout({ /> - + {children} diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx index a65a831..b634e00 100644 --- a/src/app/[locale]/page.tsx +++ b/src/app/[locale]/page.tsx @@ -1,13 +1,13 @@ -import ThemeToggle from "@/components/UI/ThemeToggle"; +import ComponentsConteiner from "@/components/ComponentsConteiner"; import { useTranslations } from "next-intl"; export default function Home() { const t = useTranslations("Home"); return (
-

{t("title")}

This project was generated completely offline.

+
); } diff --git a/src/components/ComponentsConteiner.tsx b/src/components/ComponentsConteiner.tsx new file mode 100644 index 0000000..a472a6b --- /dev/null +++ b/src/components/ComponentsConteiner.tsx @@ -0,0 +1,25 @@ +"use client"; + +import { useState } from "react"; +import PrimaryButton from "./buttons/PrimaryButton"; +import ThemeToggle from "./UI/ThemeToggle"; + +export default function ComponentsConteiner() { + const [isLoading, setIsloading] = useState(false); + function dummyLoading() { + setIsloading(true); + setTimeout(() => { + setIsloading(false); + }, 1500); + } + return ( +
+ +
+ dummyLoading()} loading={isLoading}> +

test text

+ +
+
+ ); +} diff --git a/src/components/buttons/PrimaryButton.tsx b/src/components/buttons/PrimaryButton.tsx new file mode 100644 index 0000000..ae555aa --- /dev/null +++ b/src/components/buttons/PrimaryButton.tsx @@ -0,0 +1,62 @@ +"use client"; + +import { cn } from "@/lib/utils"; +import { AnimatePresence, motion } from "framer-motion"; +import { LoaderPinwheel } from "lucide-react"; + +type PrimaryButtonProps = React.ButtonHTMLAttributes & { + loading?: boolean; + children: React.ReactNode; +}; + +export default function PrimaryButton({ children, loading, className, onClick }: PrimaryButtonProps) { + return ( + + ); +} diff --git a/src/i18n/direction.ts b/src/i18n/direction.ts index 5e85339..0af9ff5 100644 --- a/src/i18n/direction.ts +++ b/src/i18n/direction.ts @@ -3,6 +3,7 @@ export type Direction = "ltr" | "rtl"; export const localeDirectionMap: Record = { en: "ltr", ar: "rtl", + ku: "rtl", }; export function getDirection(locale: string): Direction { diff --git a/src/i18n/routing.ts b/src/i18n/routing.ts index 4a93171..792e19a 100644 --- a/src/i18n/routing.ts +++ b/src/i18n/routing.ts @@ -1,7 +1,7 @@ import { defineRouting } from "next-intl/routing"; export const routing = defineRouting({ - locales: ["en", "ar"], + locales: ["en", "ar", "ku"], defaultLocale: "en", localePrefix: "never", }); diff --git a/src/styles/globals.css b/src/styles/globals.css index 330552b..d871290 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -25,12 +25,11 @@ body { } @theme { - --color-primary: #cbd5e1; + --color-background: #cbd5e1; --color-text: #273343; /* constants */ - --color-neo-aqua: #16a795; - --color-core-red: #ef4444; + --color-primary: #16a795; --color-warning: #eedd55; --color-information: #0ea5e9; --color-error: #ef4444; @@ -38,6 +37,6 @@ body { } [data-theme="dark"] { - --color-primary: #273343; + --color-background: #273343; --color-text: #cbd5e1; }