diff --git a/README.md b/README.md index 1acc160..2d5b34c 100644 --- a/README.md +++ b/README.md @@ -9,11 +9,19 @@ Tech stack - Next.js , tailwind css Next Goal - Break down one huge file into different components to improve readability and reusability. ----> The directories for this has been already created - Commit-2 + Commit-2 & 3 Status - Currently, the UI and resuable components has been seperated to improve performance. Helper functions have been moved to utils to reduce clutter Issues - Make the eye button work(toggle between view/hide) - Next Goal - Add the sub-routes like API Management, Risk Management and Hook Hub. \ No newline at end of file + Next Goal - Add the sub-routes like API Management, Risk Management and Hook Hub. + + + Commit - 4 + + Status - Changed the fonts and UI(bg for slide-in modal). + Also made the eye and on/off button work. + + Next Goal - Add search and filter functionality. \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 58e2491..79cf38b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "hook-nest", "version": "0.1.0", "dependencies": { + "@next/font": "^14.2.15", "@tailwindcss/postcss": "^4.1.14", "framer-motion": "^12.23.22", "lucide-react": "^0.544.0", @@ -772,6 +773,15 @@ "fast-glob": "3.3.1" } }, + "node_modules/@next/font": { + "version": "14.2.15", + "resolved": "https://registry.npmjs.org/@next/font/-/font-14.2.15.tgz", + "integrity": "sha512-QopYhBmCDDrNDynbi+ZD1hDZXmQXVFo7TmAFp4DQgO/kogz1OLbQ92hPigJbj572eZ3GaaVxNIyYVn3/eAsehg==", + "license": "MIT", + "peerDependencies": { + "next": "*" + } + }, "node_modules/@next/swc-darwin-arm64": { "version": "15.5.4", "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.4.tgz", diff --git a/package.json b/package.json index ae6f9c2..ae7b1f3 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "eslint" }, "dependencies": { + "@next/font": "^14.2.15", "@tailwindcss/postcss": "^4.1.14", "framer-motion": "^12.23.22", "lucide-react": "^0.544.0", diff --git a/src/app/globals.css b/src/app/globals.css index f3b9b21..517c33f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,3 +3,6 @@ @theme { } +:root { + font-family: var(--font-be-vietnam-pro), sans-serif; +} diff --git a/src/app/layout.js b/src/app/layout.js index c577afb..25eee67 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,5 +1,7 @@ import "./globals.css"; import { Geist, Geist_Mono } from "next/font/google"; +import { Be_Vietnam_Pro } from 'next/font/google'; + import Header from "../layouts/Header"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -10,16 +12,20 @@ const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); - +const beVietnamPro = Be_Vietnam_Pro({ + subsets: ["latin"], + weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], + variable: "--font-be-vietnam-pro", +}); export const metadata = { - title: "Create Next App", + title: "Hook-Nest", description: "Generated by create next app", }; export default function RootLayout({ children }) { return ( - - + +
diff --git a/src/components/brokers/TableRow.js b/src/components/brokers/TableRow.js index b0cfd7c..1c268fb 100644 --- a/src/components/brokers/TableRow.js +++ b/src/components/brokers/TableRow.js @@ -1,3 +1,68 @@ +// 'use client'; + +// import { Edit2, Trash2, Eye, EyeOff } from 'lucide-react'; +// import BrokerAvatar from './BrokerAvatar'; +// import StatusIndicator from './StatusIndicator'; +// import ToggleSwitch from '@/components/ui/ToggleSwitch'; + +// export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatus, onToggleVisibility, isHidden }) { +// const BrokerData=isHidden?{name:"---",id:'---',dateAdded:'---',balance:"---",}:broker; +// // if (isHidden) broker={name:"---",id:'---',dateAdded:'---'}; + +// return ( +// +// +// {BrokerData.name} +// +// +// {BrokerData.id} +// +// +// +// +// +// {BrokerData.dateAdded} +// +// +// +// +// +// {BrokerData.balance} +// +// +//
+// +// +// +//
+// +// +// onToggleStatus(broker.id)} +// /> +// +// +// ); +// } 'use client'; import { Edit2, Trash2, Eye, EyeOff } from 'lucide-react'; @@ -5,28 +70,30 @@ import BrokerAvatar from './BrokerAvatar'; import StatusIndicator from './StatusIndicator'; import ToggleSwitch from '@/components/ui/ToggleSwitch'; -export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatus, onToggleVisibility, isHidden }) { - if (isHidden) return null; +export default function TableRow({ index, broker, onEdit, onDelete, onToggleStatus, onToggleVisibility, isHidden }) { + const BrokerData = isHidden + ? { name: "---", id: '---', dateAdded: '---', balance: "---" } + : broker; return ( - + - {broker.name} + {BrokerData.name} - {broker.id} + {BrokerData.id} - + - {broker.dateAdded} + {BrokerData.dateAdded} - + - {broker.balance} + {BrokerData.balance}
@@ -41,6 +108,7 @@ export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatu onClick={() => onEdit(broker)} className="p-1.5 hover:bg-gray-100 rounded text-gray-600" title="Edit" + disabled={isHidden} > @@ -48,6 +116,7 @@ export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatu onClick={() => onDelete(broker.id)} className="p-1.5 hover:bg-gray-100 rounded text-gray-600" title="Delete" + disabled={isHidden} > @@ -55,8 +124,9 @@ export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatu onToggleStatus(broker.id)} + isActive={!isHidden && broker.status === 'active'} + onToggle={() => onToggleStatus(broker.id)} + disabled={isHidden} /> diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/ui/SlidePanel.js b/src/components/ui/SlidePanel.js index a10dde3..8cf8fbd 100644 --- a/src/components/ui/SlidePanel.js +++ b/src/components/ui/SlidePanel.js @@ -16,7 +16,7 @@ export default function SlidePanel({ return ( <>
diff --git a/src/components/ui/ToggleSwitch.js b/src/components/ui/ToggleSwitch.js index dc5d85b..ba17233 100644 --- a/src/components/ui/ToggleSwitch.js +++ b/src/components/ui/ToggleSwitch.js @@ -1,12 +1,13 @@ 'use client'; -export default function ToggleSwitch({ isActive, onToggle }) { +export default function ToggleSwitch({ isActive, onToggle, disabled = false }) { return ( ); -} +} \ No newline at end of file