witel/base-front-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implemented primary button component

Browse Source
This commit is contained in:
baslani
2026-04-18 10:42:55 +03:30
parent b59a58f8f9
commit b312df8151
8 changed files with 100 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
messages/ku.json Normal file
View File

@@ -0,0 +1,5 @@
{
"Home": {
"title": "hello"
}
}

2
src/app/[locale]/layout.tsx
View File

@@ -45,7 +45,7 @@ export default async function RootLayout({
/>
</head>
<body className="bg-primary">
<body className="bg-background">
<NextIntlClientProvider locale={locale} messages={messages}>
<ClientAppProvider>{children}</ClientAppProvider>
</NextIntlClientProvider>

4
src/app/[locale]/page.tsx
View File

@@ -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 (
<main>
<ThemeToggle />
<h1>{t("title")}</h1>
<p>This project was generated completely offline.</p>
<ComponentsConteiner />
</main>
);
}

25
src/components/ComponentsConteiner.tsx Normal file
View File

@@ -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 (
<div className="flex flex-col items-start gap-2 p-4">
<ThemeToggle />
<div className="w-36">
<PrimaryButton onClick={() => dummyLoading()} loading={isLoading}>
<p>test text</p>
</PrimaryButton>
</div>
</div>
);
}

62
src/components/buttons/PrimaryButton.tsx Normal file
View File

@@ -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<HTMLButtonElement> & {
loading?: boolean;
children: React.ReactNode;
};
export default function PrimaryButton({ children, loading, className, onClick }: PrimaryButtonProps) {
return (
<button
onClick={onClick}
className={cn(
"bg-primary flex w-full items-center justify-center overflow-hidden rounded-xl px-4 py-2 text-white",
className
)}
>
<AnimatePresence mode="wait">
{loading ? (
<motion.div
key={"loading"}
initial={{
opacity: 0,
x: -100,
}}
animate={{
opacity: 1,
x: 0,
}}
exit={{
opacity: 0,
x: -100,
}}
>
<LoaderPinwheel className="animate-spin" />
</motion.div>
) : (
<motion.div
key="content"
initial={{
opacity: 0,
x: 100,
}}
animate={{
opacity: 1,
x: 0,
}}
exit={{
opacity: 0,
x: 100,
}}
>
{children}
</motion.div>
)}
</AnimatePresence>
</button>
);
}

1
src/i18n/direction.ts
View File

@@ -3,6 +3,7 @@ export type Direction = "ltr" | "rtl";
export const localeDirectionMap: Record<string, Direction> = {
en: "ltr",
ar: "rtl",
ku: "rtl",
};
export function getDirection(locale: string): Direction {

2
src/i18n/routing.ts
View File

@@ -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",
});

7
src/styles/globals.css
View File

@@ -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;
}