diff --git a/backend/__pycache__/config.cpython-312.pyc b/backend/__pycache__/config.cpython-312.pyc index 30cb937..9a865cf 100644 Binary files a/backend/__pycache__/config.cpython-312.pyc and b/backend/__pycache__/config.cpython-312.pyc differ diff --git a/backend/config.py b/backend/config.py index c1ec7e4..8348ffe 100644 --- a/backend/config.py +++ b/backend/config.py @@ -23,6 +23,7 @@ app.config["SESSION_USE_SIGNER"] = True app.config["SESSION_REDIS"] = redis.from_url("redis://192.168.50.107:6379") # upload directory app.config["UPLOAD_DIRECTORY"] = 'uploads/' +# app.config["UPLOAD_DIRECTORY"] = '../frontend/public/Group_1' # app.config["REDIS_PASSWORD"] = os.environ["REDIS_PASSWORD"] # File value limit diff --git a/frontend/bun.lockb b/frontend/bun.lockb index 8f7e383..f2e0eb7 100755 Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ diff --git a/frontend/components.json b/frontend/components.json index cb0d435..8c574b7 100644 --- a/frontend/components.json +++ b/frontend/components.json @@ -6,7 +6,7 @@ "tailwind": { "config": "tailwind.config.ts", "css": "src/app/globals.css", - "baseColor": "gray", + "baseColor": "slate", "cssVariables": true, "prefix": "" }, diff --git a/frontend/package.json b/frontend/package.json index 409d054..f95751f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -9,14 +9,15 @@ "lint": "next lint" }, "dependencies": { + "@radix-ui/react-slot": "^1.1.0", "class-variance-authority": "^0.7.0", - "clsx": "^2.1.0", - "lucide-react": "^0.365.0", + "clsx": "^2.1.1", + "lucide-react": "^0.427.0", "next": "14.1.4", "react": "^18", - "react-dom": "^18", + "react-dom": "^18.3.1", "sharp": "^0.33.4", - "tailwind-merge": "^2.2.2", + "tailwind-merge": "^2.5.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { diff --git a/frontend/public/Group_1/Mockup_97.jpg b/frontend/public/Group_1/Mockup_97.jpg new file mode 100644 index 0000000..4f7092a Binary files /dev/null and b/frontend/public/Group_1/Mockup_97.jpg differ diff --git a/frontend/public/Group_1/design_4-01.png b/frontend/public/Group_1/design_4-01.png new file mode 100644 index 0000000..00ef35d Binary files /dev/null and b/frontend/public/Group_1/design_4-01.png differ diff --git a/frontend/public/Group_1/design_7_update-01.png b/frontend/public/Group_1/design_7_update-01.png new file mode 100644 index 0000000..b55a2a0 Binary files /dev/null and b/frontend/public/Group_1/design_7_update-01.png differ diff --git a/frontend/public/Group_1/design_8_update-01.png b/frontend/public/Group_1/design_8_update-01.png new file mode 100644 index 0000000..d814c11 Binary files /dev/null and b/frontend/public/Group_1/design_8_update-01.png differ diff --git a/frontend/public/Group_1/design_update.png b/frontend/public/Group_1/design_update.png new file mode 100644 index 0000000..a8af868 Binary files /dev/null and b/frontend/public/Group_1/design_update.png differ diff --git a/frontend/public/Group_1/files_list.json b/frontend/public/Group_1/files_list.json new file mode 100644 index 0000000..7fb68c0 --- /dev/null +++ b/frontend/public/Group_1/files_list.json @@ -0,0 +1,92 @@ +[ + { + "id": 1, + "name": "files_list", + "photo": "/files_list.json", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 2, + "name": "design_8_update-01", + "photo": "/design_8_update-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 3, + "name": "Mockup_97", + "photo": "/Mockup_97.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 4, + "name": "json_sorter", + "photo": "/json_sorter.py", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 5, + "name": "design_update", + "photo": "/design_update.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 6, + "name": "design_4-01", + "photo": "/design_4-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 7, + "name": "design_7_update-01", + "photo": "/design_7_update-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 8, + "name": "test_design_never_give_up-01", + "photo": "/test_design_never_give_up-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 9, + "name": "mockup_1", + "photo": "/mockup_1.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + } +] \ No newline at end of file diff --git a/frontend/public/Group_1/mockup_1.jpg b/frontend/public/Group_1/mockup_1.jpg new file mode 100644 index 0000000..c4f346e Binary files /dev/null and b/frontend/public/Group_1/mockup_1.jpg differ diff --git a/frontend/public/Group_1/test_design_never_give_up-01.png b/frontend/public/Group_1/test_design_never_give_up-01.png new file mode 100644 index 0000000..fba9f22 Binary files /dev/null and b/frontend/public/Group_1/test_design_never_give_up-01.png differ diff --git a/frontend/public/batch1/10-01.png b/frontend/public/batch1/10-01.png new file mode 100644 index 0000000..3387d26 Binary files /dev/null and b/frontend/public/batch1/10-01.png differ diff --git a/frontend/public/batch1/13 UPDATE DESIGN.jpg b/frontend/public/batch1/13 UPDATE DESIGN.jpg new file mode 100644 index 0000000..f61f17e Binary files /dev/null and b/frontend/public/batch1/13 UPDATE DESIGN.jpg differ diff --git a/frontend/public/batch1/75-01.png b/frontend/public/batch1/75-01.png new file mode 100644 index 0000000..2f862ff Binary files /dev/null and b/frontend/public/batch1/75-01.png differ diff --git a/frontend/public/batch1/Mockup 106.jpg b/frontend/public/batch1/Mockup 106.jpg new file mode 100644 index 0000000..715db8c Binary files /dev/null and b/frontend/public/batch1/Mockup 106.jpg differ diff --git a/frontend/public/batch1/Mockup 112.jpg b/frontend/public/batch1/Mockup 112.jpg new file mode 100644 index 0000000..17a27ec Binary files /dev/null and b/frontend/public/batch1/Mockup 112.jpg differ diff --git a/frontend/public/batch1/Mockup 113.jpg b/frontend/public/batch1/Mockup 113.jpg new file mode 100644 index 0000000..a4daba6 Binary files /dev/null and b/frontend/public/batch1/Mockup 113.jpg differ diff --git a/frontend/public/batch1/Mockup 119.jpg b/frontend/public/batch1/Mockup 119.jpg new file mode 100644 index 0000000..5899eca Binary files /dev/null and b/frontend/public/batch1/Mockup 119.jpg differ diff --git a/frontend/public/batch1/Mockup 126 new.jpg b/frontend/public/batch1/Mockup 126 new.jpg new file mode 100644 index 0000000..b95bf85 Binary files /dev/null and b/frontend/public/batch1/Mockup 126 new.jpg differ diff --git a/frontend/public/batch1/Mockup 134.jpg b/frontend/public/batch1/Mockup 134.jpg new file mode 100644 index 0000000..c976832 Binary files /dev/null and b/frontend/public/batch1/Mockup 134.jpg differ diff --git a/frontend/public/batch1/Mockup 16 update.jpg b/frontend/public/batch1/Mockup 16 update.jpg new file mode 100644 index 0000000..5d00fc2 Binary files /dev/null and b/frontend/public/batch1/Mockup 16 update.jpg differ diff --git a/frontend/public/batch1/Mockup 18.jpg b/frontend/public/batch1/Mockup 18.jpg new file mode 100644 index 0000000..8fb5b7c Binary files /dev/null and b/frontend/public/batch1/Mockup 18.jpg differ diff --git a/frontend/public/batch1/Mockup 23.jpg b/frontend/public/batch1/Mockup 23.jpg new file mode 100644 index 0000000..33d4338 Binary files /dev/null and b/frontend/public/batch1/Mockup 23.jpg differ diff --git a/frontend/public/batch1/Mockup 37.jpg b/frontend/public/batch1/Mockup 37.jpg new file mode 100644 index 0000000..a4a2ae5 Binary files /dev/null and b/frontend/public/batch1/Mockup 37.jpg differ diff --git a/frontend/public/batch1/Mockup 66.jpg b/frontend/public/batch1/Mockup 66.jpg new file mode 100644 index 0000000..09660d4 Binary files /dev/null and b/frontend/public/batch1/Mockup 66.jpg differ diff --git a/frontend/public/batch1/Mockup 73.jpg b/frontend/public/batch1/Mockup 73.jpg new file mode 100644 index 0000000..1e8b2e4 Binary files /dev/null and b/frontend/public/batch1/Mockup 73.jpg differ diff --git a/frontend/public/batch1/Mockup 97.jpg b/frontend/public/batch1/Mockup 97.jpg new file mode 100644 index 0000000..4f7092a Binary files /dev/null and b/frontend/public/batch1/Mockup 97.jpg differ diff --git a/frontend/public/batch1/design 4-01.png b/frontend/public/batch1/design 4-01.png new file mode 100644 index 0000000..00ef35d Binary files /dev/null and b/frontend/public/batch1/design 4-01.png differ diff --git a/frontend/public/batch1/design 6 update-01.png b/frontend/public/batch1/design 6 update-01.png new file mode 100644 index 0000000..a58d7bb Binary files /dev/null and b/frontend/public/batch1/design 6 update-01.png differ diff --git a/frontend/public/batch1/design 7 update-01.png b/frontend/public/batch1/design 7 update-01.png new file mode 100644 index 0000000..b55a2a0 Binary files /dev/null and b/frontend/public/batch1/design 7 update-01.png differ diff --git a/frontend/public/batch1/design 8 update-01.png b/frontend/public/batch1/design 8 update-01.png new file mode 100644 index 0000000..d814c11 Binary files /dev/null and b/frontend/public/batch1/design 8 update-01.png differ diff --git a/frontend/public/batch1/design update.png b/frontend/public/batch1/design update.png new file mode 100644 index 0000000..a8af868 Binary files /dev/null and b/frontend/public/batch1/design update.png differ diff --git a/frontend/public/batch1/files_list.json b/frontend/public/batch1/files_list.json new file mode 100644 index 0000000..82f9f07 --- /dev/null +++ b/frontend/public/batch1/files_list.json @@ -0,0 +1,212 @@ +[ + { + "id": 1, + "name": "design update", + "photo": "batch1/design update.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 2, + "name": "Mockup 134", + "photo": "batch1/Mockup 134.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 3, + "name": "Mockup 126 new", + "photo": "batch1/Mockup 126 new.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 4, + "name": "Mockup 113", + "photo": "batch1/Mockup 113.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 5, + "name": "design 6 update-01", + "photo": "batch1/design 6 update-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 6, + "name": "Mockup 37", + "photo": "batch1/Mockup 37.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 7, + "name": "Mockup 106", + "photo": "batch1/Mockup 106.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 9, + "name": "design 4-01", + "photo": "batch1/design 4-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 10, + "name": "Mockup 97", + "photo": "batch1/Mockup 97.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 11, + "name": "Mockup 112", + "photo": "batch1/Mockup 112.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 12, + "name": "75-01", + "photo": "batch1/75-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 13, + "name": "Mockup 119", + "photo": "batch1/Mockup 119.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 14, + "name": "Mockup 16 update", + "photo": "batch1/Mockup 16 update.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 15, + "name": "10-01", + "photo": "batch1/10-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 16, + "name": "design 7 update-01", + "photo": "batch1/design 7 update-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 17, + "name": "Mockup 18", + "photo": "batch1/Mockup 18.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 18, + "name": "13 UPDATE DESIGN", + "photo": "batch1/13 UPDATE DESIGN.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 19, + "name": "Mockup 66", + "photo": "batch1/Mockup 66.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 20, + "name": "design 8 update-01", + "photo": "batch1/design 8 update-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 21, + "name": "Mockup 23", + "photo": "batch1/Mockup 23.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 22, + "name": "Mockup 73", + "photo": "batch1/Mockup 73.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + } +] \ No newline at end of file diff --git a/frontend/public/batch1/json_sorter.py b/frontend/public/batch1/json_sorter.py new file mode 100644 index 0000000..89fcf60 --- /dev/null +++ b/frontend/public/batch1/json_sorter.py @@ -0,0 +1,36 @@ +import os +import json + +def list_files_in_directory(directory_path): + # Get a list of all files in the directory with their respective attributes + files_list = [] + file_id = 1 + + for root, dirs, files in os.walk(directory_path): + for file in files: + file_data = { + "id": file_id, + "name": os.path.splitext(file)[0], + "photo": f'{os.path.dirname(directory_path)}/{file}', + "price": 25, # Default price, change as needed + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", # Default size, change as needed + "inStock": "yes", # Default stock status, change as needed + "favorite": "no", # Default favorite status, change as needed + "description": "It's not an option.." # Default description, change as needed + } + files_list.append(file_data) + file_id += 1 + + return files_list + +def write_files_to_json(directory_path, output_json_file): + files_list = list_files_in_directory(directory_path) + + # Write the list to a JSON file + with open(output_json_file, 'w') as json_file: + json.dump(files_list, json_file, indent=4) + +# Example usage +directory_path = '.' +output_json_file = f'files_list.json' +write_files_to_json(directory_path, output_json_file) \ No newline at end of file diff --git a/frontend/public/files_list.json b/frontend/public/files_list.json new file mode 100644 index 0000000..a8c937b --- /dev/null +++ b/frontend/public/files_list.json @@ -0,0 +1,82 @@ +[ + { + "id": 1, + "name": "files_list", + "photo": "./files_list.json", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 2, + "name": "design_8_update-01", + "photo": "./design_8_update-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 3, + "name": "Mockup_97", + "photo": "./Mockup_97.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 4, + "name": "design_update", + "photo": "./design_update.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 5, + "name": "design_4-01", + "photo": "./design_4-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 6, + "name": "design_7_update-01", + "photo": "./design_7_update-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 7, + "name": "test_design_never_give_up-01", + "photo": "./test_design_never_give_up-01.png", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + }, + { + "id": 8, + "name": "mockup_1", + "photo": "./mockup_1.jpg", + "price": 25, + "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL", + "inStock": "yes", + "favorite": "no", + "description": "It's not an option.." + } +] \ No newline at end of file diff --git a/frontend/src/app/_document.tsx b/frontend/src/app/_document.tsx new file mode 100644 index 0000000..626ccdf --- /dev/null +++ b/frontend/src/app/_document.tsx @@ -0,0 +1,17 @@ +//pages/_document.tsx +import { poppins } from "@/components/ClientPortal/ClientPortal"; +import { Html, Head, Main, NextScript } from "next/document"; + + +export default function Document() { + return ( + + + +
+
+ + + + ); +} \ No newline at end of file diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index ca51706..99a7b0c 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -1,76 +1,69 @@ @tailwind base; - @tailwind components; - @tailwind utilities; +@tailwind components; +@tailwind utilities; - @layer base { - :root { - --background: 0 0% 100%; - --foreground: 224 71.4% 4.1%; - - --card: 0 0% 100%; - --card-foreground: 224 71.4% 4.1%; - - --popover: 0 0% 100%; - --popover-foreground: 224 71.4% 4.1%; - - --primary: 220.9 39.3% 11%; - --primary-foreground: 210 20% 98%; - - --secondary: 220 14.3% 95.9%; - --secondary-foreground: 220.9 39.3% 11%; - - --muted: 220 14.3% 95.9%; - --muted-foreground: 220 8.9% 46.1%; - - --accent: 220 14.3% 95.9%; - --accent-foreground: 220.9 39.3% 11%; - - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 20% 98%; - - --border: 220 13% 91%; - --input: 220 13% 91%; - --ring: 224 71.4% 4.1%; - - --radius: 0.5rem; - } - - .dark { - --background: 224 71.4% 4.1%; - --foreground: 210 20% 98%; - - --card: 224 71.4% 4.1%; - --card-foreground: 210 20% 98%; - - --popover: 224 71.4% 4.1%; - --popover-foreground: 210 20% 98%; - - --primary: 210 20% 98%; - --primary-foreground: 220.9 39.3% 11%; - - --secondary: 215 27.9% 16.9%; - --secondary-foreground: 210 20% 98%; - - --muted: 215 27.9% 16.9%; - --muted-foreground: 217.9 10.6% 64.9%; - - --accent: 215 27.9% 16.9%; - --accent-foreground: 210 20% 98%; - - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 20% 98%; - - --border: 215 27.9% 16.9%; - --input: 215 27.9% 16.9%; - --ring: 216 12.2% 83.9%; - } +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + --radius: 0.5rem; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; } - @layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } - } \ No newline at end of file + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} \ No newline at end of file diff --git a/frontend/src/app/index.tsx b/frontend/src/app/index.tsx new file mode 100644 index 0000000..d606418 --- /dev/null +++ b/frontend/src/app/index.tsx @@ -0,0 +1,77 @@ +//pages/index.tsx +import { useState } from "react"; +import styles from "@/styles/Home.module.css"; +import ClientPortal from "../components/ClientPortal/ClientPortal"; +export default function Home() { + const [showPortal, setShowPortal] = useState(false); + const handleModal = () => { + setShowPortal(!showPortal); + }; + + + return ( + <> +
+

Implementation portal in next JS

+ +
+ +
+
+
+

Lorem Ipsum

+ +
+
+

+ Basically, React Portal is a powerful technique to create a + first-class way to render children into a DOM (Document object + modal) Node from outside of their parent component hierarchy. +

+
+

Industry's stand 1960s with the release

+

+ has been the industry's stand 1960s with the release of + Letraset sheets containing Lorem Ipsum passages, and more + recently with desktop publishing software like Aldus PageMaker + including versions of Lorem Ipsum. +

+
+
+

+ Lorem Ipsum is simply dummy text of the printing It has + survived not only five centuries, but also the leap into + electronic typesetting, remaining essentially unchanged. It + was popularised in the 1960s with the release of Letraset + sheets containing Lorem Ipsum passages, and more recently +

+
+
+

+ Lorem Ipsum is simply dummy text of the printing and + typesetting industry. Lorem Ipsum has been the industry's + standard dummy text ever since the 1500s, when an unknown + printer took a galley of type and Lorem Ipsum. +

+
+
+
+
+ + + ); +} \ No newline at end of file diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 1742c05..bf01d37 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -1,9 +1,20 @@ +"use client"; +import * as React from "react"; import Image from "next/image"; import MenuCard from "../components/ui/MenuCard/MenuCard"; -import Product from "./products.json"; -import { cn } from "../lib/utils"; +import Product from "../../public/Group_1/files_list.json"; +import { Button } from "../components/ui/button"; +import Modal from "../components/Modal/Modal"; +import ClientPortal from "@/components/ClientPortal/ClientPortal"; +import styles from "@/styles/Home.module.css"; export default function Home() { + const [isOpen, setIsOpen] = React.useState(false); + const [showPortal, setShowPortal] = React.useState(false); + const handleModal = () => { + setShowPortal(!showPortal); + }; + return (
{/* Title */} @@ -16,12 +27,21 @@ export default function Home() {
+ {/*
+ + setIsOpen(false)}> + Fancy Modal + +
*/} + {/* Footer */}
Email us at - kevosattire@gmail.com to - order! + + kevosattire@gmail.com + + to order!
diff --git a/frontend/src/components/ClientPortal/ClientPortal.tsx b/frontend/src/components/ClientPortal/ClientPortal.tsx new file mode 100644 index 0000000..bfddf40 --- /dev/null +++ b/frontend/src/components/ClientPortal/ClientPortal.tsx @@ -0,0 +1,26 @@ +//components/ClientPortal.tsx + +import { useEffect, useRef } from "react"; +import { Poppins } from "next/font/google"; +import { createPortal } from "react-dom"; +type ClientPortalInterface = { + children: React.ReactNode; + show?: boolean; + onClose?: () => void; + selector: string; +}; + +const ClientPortal = ({ children, selector, show }: ClientPortalInterface) => { + const ref = useRef(null); + useEffect(() => { + ref.current = document.getElementById(selector); + }, [selector]); + return show && ref.current ? createPortal(children, ref.current) : null; +}; + +export default ClientPortal; + +export const poppins = Poppins({ + weight: ["400", "500", "600", "700"], + subsets: ["latin"], +}); \ No newline at end of file diff --git a/frontend/src/components/Modal/Modal.css b/frontend/src/components/Modal/Modal.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/components/Modal/Modal.tsx b/frontend/src/components/Modal/Modal.tsx new file mode 100644 index 0000000..178fa6b --- /dev/null +++ b/frontend/src/components/Modal/Modal.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import "./Modal.css"; +import { Button } from "../ui/button"; +import ReactDom from 'react-dom'; + +// make sure to update index.html with
under
+ +const Modal = ({ open, onClose, children }: any) => { + if (!open) return null; + + return ReactDom.createPortal ( + <> +
+
+ + {children} +
+ , + document.getElementById('portal')! + ); +}; + +export default Modal; diff --git a/frontend/src/components/ui/MenuCard/MenuCard.tsx b/frontend/src/components/ui/MenuCard/MenuCard.tsx index 0b1b8bc..2002526 100644 --- a/frontend/src/components/ui/MenuCard/MenuCard.tsx +++ b/frontend/src/components/ui/MenuCard/MenuCard.tsx @@ -4,6 +4,7 @@ import Image from "next/image"; import localFont from "next/font/local"; import { Inter } from "next/font/google"; import { Card } from "../card"; +import Modal from "../../Modal/Modal"; const interBold = localFont({ src: "./Inter-Bold.woff", @@ -15,10 +16,9 @@ const extraBold = localFont({ }); const inter = Inter({ subsets: ["latin"] }); - const MenuCard = ({ Menu }: any) => { return ( -
+
{Menu.map((menu_item: any) => { return ( , + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/frontend/src/styles/Home.module.css b/frontend/src/styles/Home.module.css new file mode 100644 index 0000000..26089ed --- /dev/null +++ b/frontend/src/styles/Home.module.css @@ -0,0 +1,114 @@ + +.main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 6rem; +} + +.removeButton{ + border: none; + background-color: #ffffff; + cursor: pointer; + padding: 5px 7px; +} +.removeButton:hover{ + background-color: rgba(189, 195, 199, 1.0); + border-radius: 6px; +} + +/* Enable hover only on non-touch devices */ +@media (hover: hover) and (pointer: fine) { + .card:hover { + background: rgba(var(--card-rgb), 0.1); + border: 1px solid rgba(var(--card-border-rgb), 0.15); + } + + .card:hover span { + transform: translateX(4px); + } +} + +@media (prefers-reduced-motion) { + .card:hover span { + transform: none; + } +} + +.modal{ + background: rgba(255, 255, 255,1.0); + width: 60%; + max-height: 500px; + border-radius: 15px; + padding: 20px; + z-index: 100; +} + +.header{ + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid rgba(189, 195, 199,1.0); +} +.header h4{ + color: rgb(17 24 39 0.3); + font-size: 20px; + font-weight: 600; + margin-bottom: 13px; +} + +.body{ + padding-top: 10px; +} +.body p{ + color: rgba(116, 125, 140,1.0); + font-size: 14px; + line-height: 28px; + text-align: left; +} +.overflow{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(0, 0, 0, 0.4); + transition: 1; +} + +.btn { + padding: 8px 18px; + cursor: pointer; + border: 0px solid rgb(14, 158, 62); + border-radius: 3px; + color: rgba(255, 255, 255,1.0); + font-size: 16px; + border-radius: 5px; + background: rgb(14, 158, 62); +} +.btn:hover{ + background: rgb(9, 99, 39); +} + +.groupbtn{ + display: flex; + justify-content: flex-end; +} +.cancleBtn{ + padding: 10px 20px; + margin: 0px 10px; + cursor: pointer; + border: 0px solid rgba(231, 76, 60,1.0); + border-radius: 3px; + color: rgba(255, 255, 255,1.0); + font-size: 16px; + border-radius: 5px; + background: rgba(231, 76, 60,1.0); +} +.reactontent { + margin: 20px 0px; +} \ No newline at end of file diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index 84287e8..7b84804 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -53,6 +53,11 @@ const config = { foreground: "hsl(var(--card-foreground))", }, }, + screens: { + tablet: "1080px", + desktop: "1340px", + qhd: "1660px", + }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index deb52d6..7b28589 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -18,7 +18,7 @@ } ], "paths": { - "@/*": ["./frontend/src/*"] + "@/*": ["./src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],