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

created a placeholder PrimaryButton

Browse Source
This commit is contained in:
baslani
2026-04-18 10:54:27 +03:30
parent b312df8151
commit 896c812390
3 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ComponentsConteiner.tsx
View File

@@ -3,6 +3,7 @@
import { useState } from "react"; import { useState } from "react";
import PrimaryButton from "./buttons/PrimaryButton"; import PrimaryButton from "./buttons/PrimaryButton";
import ThemeToggle from "./UI/ThemeToggle"; import ThemeToggle from "./UI/ThemeToggle";
import { Home } from "lucide-react";
export default function ComponentsConteiner() { export default function ComponentsConteiner() {
const [isLoading, setIsloading] = useState(false); const [isLoading, setIsloading] = useState(false);
@@ -17,7 +18,8 @@ export default function ComponentsConteiner() {
<ThemeToggle /> <ThemeToggle />
<div className="w-36"> <div className="w-36">
<PrimaryButton onClick={() => dummyLoading()} loading={isLoading}> <PrimaryButton onClick={() => dummyLoading()} loading={isLoading}>
<p>test text</p> <Home size={20} />
<p>test icon</p>
</PrimaryButton> </PrimaryButton>
</div> </div>
</div> </div>

17
src/components/buttons/PrimaryButton.tsx
View File

@@ -14,7 +14,7 @@ export default function PrimaryButton({ children, loading, className, onClick }:
<button <button
onClick={onClick} onClick={onClick}
className={cn( className={cn(
"bg-primary flex w-full items-center justify-center overflow-hidden rounded-xl px-4 py-2 text-white", "bg-primary grid w-full place-items-center overflow-hidden rounded-xl px-4 py-2 text-white",
className className
)} )}
> >
@@ -24,7 +24,7 @@ export default function PrimaryButton({ children, loading, className, onClick }:
key={"loading"} key={"loading"}
initial={{ initial={{
opacity: 0, opacity: 0,
x: -100, x: -80,
}} }}
animate={{ animate={{
opacity: 1, opacity: 1,
@@ -32,7 +32,10 @@ export default function PrimaryButton({ children, loading, className, onClick }:
}} }}
exit={{ exit={{
opacity: 0, opacity: 0,
x: -100, x: -80,
}}
transition={{
duration: 0.2,
}} }}
> >
<LoaderPinwheel className="animate-spin" /> <LoaderPinwheel className="animate-spin" />
@@ -42,7 +45,7 @@ export default function PrimaryButton({ children, loading, className, onClick }:
key="content" key="content"
initial={{ initial={{
opacity: 0, opacity: 0,
x: 100, x: 80,
}} }}
animate={{ animate={{
opacity: 1, opacity: 1,
@@ -50,8 +53,12 @@ export default function PrimaryButton({ children, loading, className, onClick }:
}} }}
exit={{ exit={{
opacity: 0, opacity: 0,
x: 100, x: 80,
}} }}
transition={{
duration: 0.2,
}}
className="flex items-center justify-center gap-2"
> >
{children} {children}
</motion.div> </motion.div>

2
src/styles/globals.css
View File

@@ -29,7 +29,7 @@ body {
--color-text: #273343; --color-text: #273343;
/* constants */ /* constants */
--color-primary: #16a795; --color-primary: #114455;
--color-warning: #eedd55; --color-warning: #eedd55;
--color-information: #0ea5e9; --color-information: #0ea5e9;
--color-error: #ef4444; --color-error: #ef4444;