>;
10 | }
11 |
12 | export const MenuMobile = ({ isOpen, onClose }: MenuMobileProps) => {
13 | return (
14 | <>
15 |
21 |
22 | {menu.map((menu) => (
23 | -
24 |
31 |
32 | {menu.label}
33 |
34 |
35 | ))}
36 |
37 |
onClose(false)}
41 | className={cn(
42 | "fixed bg-black/40 z-40 lg:hidden transition-all",
43 | isOpen
44 | ? "w-full h-full right-0 top-0"
45 | : "w-0 h-0 left-0 bottom-0 delay-300"
46 | )}
47 | />
48 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/src/types.d.ts:
--------------------------------------------------------------------------------
1 | export type Menu = {
2 | label: string;
3 | icon: string;
4 | href: string;
5 | };
6 |
7 | export type Category = {
8 | category: string;
9 | };
10 |
11 | export type Product = {
12 | name: string;
13 | category: string;
14 | image: string;
15 | discount: number;
16 | stock: number;
17 | price: number;
18 | description: string;
19 | };
20 |
21 | export type ProductCart = {
22 | name: string;
23 | image: string;
24 | price: number;
25 | quantity: number;
26 | };
27 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | const config: Config = {
4 | content: [
5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
8 | ],
9 | theme: {
10 | extend: {
11 | colors: {
12 | primary: {
13 | DEFAULT: "hsl(var(--primary))",
14 | },
15 | background: {
16 | DEFAULT: "hsl(var(--background))",
17 | foreground: "hsl(var(--background-foreground))",
18 | },
19 | text: {
20 | DEFAULT: "hsl(var(--text))",
21 | },
22 | },
23 | borderRadius: {
24 | "4xl": "2rem",
25 | },
26 | transitionDuration: {
27 | DEFAULT: "150ms",
28 | },
29 | },
30 | },
31 | plugins: [],
32 | };
33 | export default config;
34 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "plugins": [
16 | {
17 | "name": "next"
18 | }
19 | ],
20 | "paths": {
21 | "@/*": ["./src/*"]
22 | }
23 | },
24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 | "exclude": ["node_modules"]
26 | }
27 |
--------------------------------------------------------------------------------