login google logo

src/components/button/PrimaryButton.tsx

@@ -6,6 +6,7 @@ interface ButtonProps {
   text?: string;
   className?: string;
   onClick: () => void;
+  children?: React.ReactNode;
 }
 
 export const PrimaryButton: React.FC<ButtonProps> = ({
@@ -13,6 +14,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
   text = "",
   className,
   onClick,
+  children,
 }) => {
   return (
     <label
@@ -51,7 +53,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
             "px-[16px] py-[8px]",
           )}
         >
-          {text}
+          {children || text}
         </div>
         <div
           className={cn(
@@ -60,7 +62,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
             disabled && "text-liquid-light"
           )}
         >
-          {text}
+          {children || text}
         </div>
       </div>
     </label>

src/components/button/SecondaryButton.tsx

@@ -6,6 +6,8 @@ interface ButtonProps {
   text?: string;
   className?: string;
   onClick: () => void;
+  children?: React.ReactNode;
+
 }
 
 export const SecondaryButton: React.FC<ButtonProps> = ({
@@ -13,6 +15,7 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
   text = "",
   className,
   onClick,
+  children,
 }) => {
   return (
     <label
@@ -50,7 +53,7 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
             "px-[16px] py-[8px]",
           )}
         >
-          {text}
+          {children || text}
         </div>
         <div
           className={cn(
@@ -58,7 +61,7 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
             disabled && "text-liquid-light"
           )}
         >
-          {text}
+          {children || text}
         </div>
       </div>
     </label>

src/views/home/auth/Login.tsx

@@ -8,6 +8,7 @@ import { cn } from "../../../lib/cn";
 import { setMenuActivePage } from "../../../redux/slices/store";
 import { Balloon } from "../../../assets/icons/auth";
 import { SecondaryButton } from "../../../components/button/SecondaryButton";
+import { googleLogo } from "../../../assets/icons/input";
 
 const Login = () => {
   const dispatch = useAppDispatch();
@@ -82,9 +83,13 @@ const Login = () => {
             />
             <SecondaryButton
               className="w-full"
-              onClick={navigateToRegister}
+              onClick={() => { }}
-              text="Войти с Google  "
+            >
-            />
+              <div className="flex items-center">
+                <img src={googleLogo} className="h-[24px] w-[24px] mr-[15px]" />
+                Вход с Google
+              </div>
+            </SecondaryButton>
           </div>
 
 

src/views/home/auth/Register.tsx

@@ -10,6 +10,7 @@ import { Balloon } from "../../../assets/icons/auth";
 import { Link } from "react-router-dom";
 import { SecondaryButton } from "../../../components/button/SecondaryButton";
 import { Checkbox } from "../../../components/checkbox/Checkbox";
+import { googleLogo } from "../../../assets/icons/input";
 
 
 const Register = () => {
@@ -95,8 +96,12 @@ const Register = () => {
             <SecondaryButton
               className="w-full"
               onClick={() => { }}
-              text="Регистрация с Google  "
+            >
-            />
+              <div className="flex items-center">
+                <img src={googleLogo} className="h-[24px] w-[24px] mr-[15px]" />
+                Регистрация с Google
+              </div>
+            </SecondaryButton>
           </div>