+
+
{t('com_home_banner_title') as string}
-
+
{t('com_home_banner_title_bold') as string}
-
-
diff --git a/src/components/layout/navbar/index.tsx b/src/components/layout/navbar/index.tsx
index 207efea..a36df57 100644
--- a/src/components/layout/navbar/index.tsx
+++ b/src/components/layout/navbar/index.tsx
@@ -1,11 +1,99 @@
+// 'use client';
+
+// import images from '@/assets/images/images';
+// import { Icon } from '@/components/uikit/icons';
+// import { t } from '@/locales/translates';
+// import Image from 'next/image';
+// import Link from 'next/link';
+// import { usePathname } from 'next/navigation';
+// import { useState } from 'react';
+
+// export default function Navbar() {
+// const [open, setOpen] = useState(false);
+// const pathname = usePathname();
+
+// const links = [
+// { href: '/', label: t('pages_home_title') as string },
+// { href: '/about', label: t('pages_about_title') as string },
+// { href: '/blog', label: t('pages_contact_title') as string },
+// { href: '/contact', label: t('pages_contact_title') as string },
+// { href: '/product', label: t('pages_product_title') as string },
+// { href: '/project', label: t('pages_project_title') as string },
+// ];
+
+// const linkClass = (href: string) =>
+// pathname === href ? ' text-red-500 font-semibold' : 'text-white';
+
+// return (
+//
+// );
+// }
+
'use client';
import images from '@/assets/images/images';
-import { t } from '@/locales/translates';
+import { Icon } from '@/components/uikit/icons';
import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState } from 'react';
+import HamburgerMenu from '../hamburgerMenu';
+import { t } from '@/locales/translates';
export default function Navbar() {
const [open, setOpen] = useState(false);
@@ -19,58 +107,52 @@ export default function Navbar() {
{ href: '/product', label: t('pages_product_title') as string },
{ href: '/project', label: t('pages_project_title') as string },
];
-
const linkClass = (href: string) =>
- pathname === href ? ' text-red-500 font-semibold' : 'text-white';
+ pathname === href ? 'text-primary font-semibold' : 'text-white';
return (
-
+
+
setOpen(false)} />
+
);
}
diff --git a/src/components/uikit/button/button.d.ts b/src/components/uikit/button/button.d.ts
new file mode 100644
index 0000000..72dc437
--- /dev/null
+++ b/src/components/uikit/button/button.d.ts
@@ -0,0 +1,14 @@
+export interface IBaseButtonProps extends ButtonHTMLAttributes {
+ children: ReactNode;
+ loading?: boolean;
+ disabled?: boolean;
+ className?: string
+}
+
+export interface ITextButtonProps extends IBaseButtonProps{
+ endIcon?: ReactNode;
+}
+export interface IIconButtonProps extends IBaseButtonProps{
+ color?: 'primary' | 'secondary'
+ size?: 'small' | 'medium' | 'large'
+}
\ No newline at end of file
diff --git a/src/components/uikit/button/index.tsx b/src/components/uikit/button/index.tsx
index e6cdb64..aa6ebc9 100644
--- a/src/components/uikit/button/index.tsx
+++ b/src/components/uikit/button/index.tsx
@@ -1,36 +1,24 @@
'use client';
-import React, { ButtonHTMLAttributes, ReactNode } from 'react';
+import React from 'react';
+import { IIconButtonProps, ITextButtonProps } from './button';
-interface ButtonProps extends ButtonHTMLAttributes {
- children?: ReactNode;
- loading?: boolean;
- disabled?: boolean;
- endIcon?: ReactNode;
- size?: 'small' | 'medium' | 'large';
- variant?: 'solid' | 'text';
-}
-
-const Button: React.FC = ({
+const Button: React.FC = ({
children,
loading = false,
disabled = false,
endIcon,
- size = 'medium',
- variant = 'solid',
className,
...props
}) => {
-
-
return (
);
};
export default Button;
+
+export const IconButton: React.FC = ({
+ children,
+ loading = false,
+ disabled = false,
+ size = 'medium',
+ color = 'primary',
+ className,
+ ...props
+}) => {
+ const colorClass =
+ color === 'primary' ? 'bg-primary text-white' : 'bg-gray-300 text-gray-500';
+
+ const sizeClass =
+ size === 'large' ? 'w-12 h-12' : size === 'small' ? 'w-8 h-8' : 'w-10 h-10';
+
+ return (
+
+ );
+};
diff --git a/src/components/uikit/icons/achievementIcon.tsx b/src/components/uikit/icons/achievementIcon.tsx
new file mode 100644
index 0000000..03aa88f
--- /dev/null
+++ b/src/components/uikit/icons/achievementIcon.tsx
@@ -0,0 +1,22 @@
+export const AchievementIcon = (props: React.SVGProps) => (
+
+);
diff --git a/src/components/uikit/icons/closeIcon.tsx b/src/components/uikit/icons/closeIcon.tsx
new file mode 100644
index 0000000..a092b3a
--- /dev/null
+++ b/src/components/uikit/icons/closeIcon.tsx
@@ -0,0 +1,15 @@
+export const CloseIcon = (props: React.SVGProps) => (
+
+);
diff --git a/src/components/uikit/icons/index.tsx b/src/components/uikit/icons/index.tsx
new file mode 100644
index 0000000..eec8384
--- /dev/null
+++ b/src/components/uikit/icons/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { CloseIcon } from './closeIcon';
+import { MenuIcon } from './menuIcon';
+import { SettingIcon } from './settingIcon';
+import { AchievementIcon } from './achievementIcon';
+import { PhoneIcon } from './phoneIcon';
+import { InstagramIcon } from './instagramIcon';
+
+export const icons = {
+ close: CloseIcon,
+ menu: MenuIcon,
+ setting: SettingIcon,
+ achievement: AchievementIcon,
+ phone: PhoneIcon,
+ instagram: InstagramIcon,
+};
+
+export type IconName = keyof typeof icons;
+
+interface IconProps extends React.SVGProps {
+ name: IconName;
+}
+
+export const Icon = ({ name, ...props }: IconProps) => {
+ const Component = icons[name];
+ if (!Component) return null;
+ return ;
+};
diff --git a/src/components/uikit/icons/instagramIcon.tsx b/src/components/uikit/icons/instagramIcon.tsx
new file mode 100644
index 0000000..13f63a0
--- /dev/null
+++ b/src/components/uikit/icons/instagramIcon.tsx
@@ -0,0 +1,27 @@
+export const InstagramIcon = (props: React.SVGProps) => (
+
+);
diff --git a/src/components/uikit/icons/menuIcon.tsx b/src/components/uikit/icons/menuIcon.tsx
new file mode 100644
index 0000000..86a56a0
--- /dev/null
+++ b/src/components/uikit/icons/menuIcon.tsx
@@ -0,0 +1,15 @@
+export const MenuIcon = (props: React.SVGProps) => (
+
+);
diff --git a/src/components/uikit/icons/phoneIcon.tsx b/src/components/uikit/icons/phoneIcon.tsx
new file mode 100644
index 0000000..e0a2968
--- /dev/null
+++ b/src/components/uikit/icons/phoneIcon.tsx
@@ -0,0 +1,38 @@
+export const PhoneIcon = (props: React.SVGProps) => (
+
+);
diff --git a/src/components/uikit/icons/settingIcon.tsx b/src/components/uikit/icons/settingIcon.tsx
new file mode 100644
index 0000000..7c2d8e9
--- /dev/null
+++ b/src/components/uikit/icons/settingIcon.tsx
@@ -0,0 +1,27 @@
+export const SettingIcon = (props: React.SVGProps) => (
+
+);