diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(configure)/cf/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(configure)/cf/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(configure)/cf/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(configure)/cf/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(deploy)/dp/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(deploy)/dp/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(deploy)/dp/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(deploy)/dp/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(success)/sc/[id]/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(success)/sc/[id]/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(success)/sc/[id]/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(success)/sc/[id]/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(template)/tm/(configure)/cf/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(template)/tm/(configure)/cf/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(template)/tm/(configure)/cf/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(template)/tm/(configure)/cf/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(template)/tm/(deploy)/dp/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(template)/tm/(deploy)/dp/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(template)/tm/(deploy)/dp/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/(create)/cr/(template)/tm/(deploy)/dp/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(deployments)/dep/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(deployments)/dep/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(deployments)/dep/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(deployments)/dep/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(integrations)/int/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(integrations)/int/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(integrations)/int/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(integrations)/int/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(collaborators)/col/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(collaborators)/col/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(collaborators)/col/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(collaborators)/col/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(domains)/dom/(add)/cf/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(domains)/dom/(add)/cf/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(domains)/dom/(add)/cf/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(domains)/dom/(add)/cf/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(domains)/dom/(add)/config/cf/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(domains)/dom/(add)/config/cf/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(domains)/dom/(add)/config/cf/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(domains)/dom/(add)/config/cf/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(environment-variables)/env/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(environment-variables)/env/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(environment-variables)/env/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(environment-variables)/env/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(git)/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(git)/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(git)/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/(settings)/set/(git)/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(projects)/ps/[id]/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(projects)/ps/[id]/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(settings)/set/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(settings)/set/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/[provider]/[orgSlug]/(settings)/set/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/[provider]/[orgSlug]/(settings)/set/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/error.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/error.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/error.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/error.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/loading.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/loading.tsx similarity index 100% rename from apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/pr/loading.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/(projects)/projects/loading.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/_Navigation/TopNavigation.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/_Navigation/TopNavigation.tsx deleted file mode 100644 index 4c030e5..0000000 --- a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/_Navigation/TopNavigation.tsx +++ /dev/null @@ -1,217 +0,0 @@ -// 'use client'; - -// import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'; -// import { LaconicMark } from '@/laconic-assets/laconic-mark'; -// import { Menu, Plus, Shapes, Wallet } from 'lucide-react'; -// import Link from 'next/link'; -// import { useRouter } from 'next/navigation'; -// import { useState } from 'react'; -// import { ProjectSearchBar } from '../search/ProjectSearchBar'; -// import { ColorModeToggle } from './components/ColorModeToggle'; -// import { GitHubSessionButton } from './components/GitHubSessionButton'; -// import { WalletSessionId } from './components/WalletSessionId'; -// import { Button } from '@workspace/ui/components/button'; - -// /** -// * TopNavigation Component -// * -// * Renders the top navigation bar, adapting its layout for desktop and mobile views. -// * It includes the project search bar, navigation links, user authentication via GitHub, -// * color mode toggle, and wallet session information. On mobile, it utilizes a sheet -// * for a responsive and accessible navigation experience. -// */ -// export function TopNavigation() { -// const router = useRouter(); -// const [showOnboarding, setShowOnboarding] = useState(false); - -// // In a real implementation, these would be from context/hooks -// const isGitHubConnected = true; // Example value -// const defaultOrg = { slug: 'demo-org' }; // Example value -// const isReady = true; // Wallet ready status - -// const handleOnboardingClose = () => { -// setShowOnboarding(false); -// // In a real implementation, would refresh organization data after onboarding -// }; - -// // Navigate to create page with organization slug -// const handleCreateNew = () => { -// if (defaultOrg) { -// router.push(`/${defaultOrg.slug}/ps/cr`); -// } else { -// // If no organization is available, show onboarding -// setShowOnboarding(true); -// } -// }; - -// const handleRunOnboarding = () => { -// // Clear existing onboarding progress data -// if (typeof window !== 'undefined') { -// localStorage.removeItem('onboarding_progress'); -// localStorage.removeItem('onboarding_state'); -// // Force starting from connect step -// localStorage.setItem('onboarding_force_connect', 'true'); -// } - -// setShowOnboarding(true); -// }; - -// return ( -//
-// {/* Top Navigation - Desktop */} -// - -// {/* Top Navigation - Mobile */} -// - -//
-// ); -// } diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/buy-prepaid-service/BuyServices.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/buy-prepaid-service/BuyServices.tsx new file mode 100644 index 0000000..70f372b --- /dev/null +++ b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/buy-prepaid-service/BuyServices.tsx @@ -0,0 +1,128 @@ +'use client' + +import PageWrapper from '@/components/foundation/page-wrapper' +import { Button } from '@workspace/ui/components/button' +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle +} from '@workspace/ui/components/card' +/** + * BuyPrepaidService component allows users to buy prepaid services. + * It checks if the user's balance is sufficient and redirects them to the home page if it is. + * + * @returns {JSX.Element} A JSX element that renders the buy prepaid service page. + */ +const BuyPrepaidService = () => { + return ( + +
+
+
+

+ Laconic +

+

+ Webapp Deployment Plans +

+

+ Choose the perfect deployment plan for your needs. Scale your + applications with confidence. +

+
+ +
+ {/* Basic Plan */} + + + Basic + + A simple deployment option for small projects + +
+ $5.00 + /month +
+ + +

+ 1 monthly webapp deployment +

+ + + + + + + {/* Standard Plan */} + +
+ Most popular +
+ + Standard + + Perfect for growing projects and businesses + +
+ $50.00 + /month +
+ + +

+ 10 monthly webapp deployments +

+ + + + + + + {/* Premium Plan */} + + + Premium + + For enterprises with high-volume needs + +
+ $500.00 + /month +
+ + +

+ 100 monthly webapp deployments +

+ + + + + +
+
+
+ + ) +} + +export default BuyPrepaidService diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/buy-prepaid-service/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/buy-prepaid-service/page.tsx index 7c4a8ac..98bdb78 100644 --- a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/buy-prepaid-service/page.tsx +++ b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/buy-prepaid-service/page.tsx @@ -1,4 +1,5 @@ import type { Metadata } from 'next' +import BuyPrepaidService from './BuyServices' export const metadata: Metadata = { title: 'Buy Prepaid Service', @@ -6,13 +7,7 @@ export const metadata: Metadata = { } const Page = () => { - return ( -
-

- Hello from (web3-authenticated)/(dashboard)/(buy-prepaid-service)/bp -

-
- ) + return } export default Page diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/layout.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/layout.tsx index d4d8d2d..65afc8a 100644 --- a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/layout.tsx +++ b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/layout.tsx @@ -1,8 +1,7 @@ 'use client' -import { DashboardLayout } from '@/components/layouts' -import { defaultDashboardConfig } from '@/config/dashboard' -import type React from 'react' +import NavigationWrapper from '@/components/foundation/navigation-wrapper' +import { TopNavigation } from '@/components/foundation/top-navigation/top-navigation' interface LayoutProps { children: React.ReactNode @@ -10,13 +9,10 @@ interface LayoutProps { const Layout: React.FC = ({ children }) => { return ( - //
- //
- + + {children} - - //
- //
+ ) } diff --git a/apps/deploy-fe/src/app/favicon.ico b/apps/deploy-fe/src/app/favicon.ico index 718d6fe..ebae81e 100644 Binary files a/apps/deploy-fe/src/app/favicon.ico and b/apps/deploy-fe/src/app/favicon.ico differ diff --git a/apps/deploy-fe/src/app/layout.tsx b/apps/deploy-fe/src/app/layout.tsx index 5115821..0b4d4c1 100644 --- a/apps/deploy-fe/src/app/layout.tsx +++ b/apps/deploy-fe/src/app/layout.tsx @@ -1,4 +1,4 @@ -import { Providers } from '@/components/providers' +import { Providers } from '@/components/foundation/providers' // import '@workspace/ui/globals.css' import type { Metadata } from 'next' @@ -26,16 +26,8 @@ export default function RootLayout({ }>) { return ( - +
- {children}
diff --git a/apps/deploy-fe/src/app/loading.tsx b/apps/deploy-fe/src/app/loading.tsx new file mode 100644 index 0000000..4170997 --- /dev/null +++ b/apps/deploy-fe/src/app/loading.tsx @@ -0,0 +1,5 @@ +import { LoadingOverlay } from '@/components/foundation/loading/loading-overlay' + +export default function Loading() { + return +} diff --git a/apps/deploy-fe/src/app/not-found.tsx b/apps/deploy-fe/src/app/not-found.tsx index 965cc12..73e0e4a 100644 --- a/apps/deploy-fe/src/app/not-found.tsx +++ b/apps/deploy-fe/src/app/not-found.tsx @@ -2,21 +2,62 @@ import type { Metadata } from 'next' import Link from 'next/link' export const metadata: Metadata = { - title: 'Page Not Found', - description: 'The requested page could not be found' + title: '404', + description: 'Page not found' } export default function NotFound() { return (
-

404 - Page Not Found

-

The page you are looking for does not exist.

- - Return Home - +
+

404

+

Page not found

+

+ Add a brief, empathetic explanation that acknowledges the error while + maintaining brand voice. Keep it light and helpful. +

+ +
+ +
+
Go back to homepage
+
+ Lorem ipsum dolor sit amet, consectetur adipisci. +
+
+ → + + + +
+
Read our documentation
+
+ Lorem ipsum dolor sit amet, consectetur adipisci. +
+
+ → + + + +
+
Explore our blog
+
+ Lorem ipsum dolor sit amet, consectetur adipisci. +
+
+ → + +
+
) } diff --git a/apps/deploy-fe/src/app/page.tsx b/apps/deploy-fe/src/app/page.tsx index 45c225d..928ebe4 100644 --- a/apps/deploy-fe/src/app/page.tsx +++ b/apps/deploy-fe/src/app/page.tsx @@ -1,3 +1,4 @@ +import PageWrapper from '@/components/foundation/page-wrapper' import { Button } from '@workspace/ui/components/button' import type { Metadata } from 'next' @@ -7,5 +8,20 @@ export const metadata: Metadata = { } export default function Page() { - return + return ( + +
+
Hero section
+

+ Headline that solves user's main problem +

+

+ Follow with one or two sentences that expand on your value + proposition. Focus on key benefits and address why users should take + action now. Keep it scannable, short and benefit-driven. +

+ +
+ + ) } diff --git a/apps/deploy-fe/src/components/.gitkeep b/apps/deploy-fe/src/components/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/apps/deploy-fe/src/components/assets/laconic-mark.tsx b/apps/deploy-fe/src/components/assets/laconic-mark.tsx new file mode 100644 index 0000000..faa858e --- /dev/null +++ b/apps/deploy-fe/src/components/assets/laconic-mark.tsx @@ -0,0 +1,43 @@ +/** + * The Laconic logo mark component. + * + * @component + * @example + * // Basic usage + * + * + * // With custom color + * + * + * // With custom size + * + */ +export function LaconicMark({ + /** + * Optional className for styling the SVG + * Use this to customize the size, color, and other SVG properties + */ + className = '' +}: { + className?: string +}) { + return ( + + Laconic logo + + + ) +} diff --git a/apps/deploy-fe/src/components/foundation/loading/loading-overlay.tsx b/apps/deploy-fe/src/components/foundation/loading/loading-overlay.tsx new file mode 100644 index 0000000..c8c2c8a --- /dev/null +++ b/apps/deploy-fe/src/components/foundation/loading/loading-overlay.tsx @@ -0,0 +1,83 @@ +'use client' + +import { LaconicMark } from '@/components/assets/laconic-mark' +import { cn } from '@workspace/ui/lib/utils' +import { Loader2 } from 'lucide-react' + +export interface LoadingOverlayProps { + /** + * Controls the visibility of the overlay. + * When false, the component returns null. + * @default true + */ + isLoading?: boolean + + /** + * Optional className for styling the overlay container. + * This will be merged with the default styles. + */ + className?: string + + /** + * Whether to show the Laconic logo in the overlay. + * @default true + */ + showLogo?: boolean + + /** + * Whether to show the loading spinner below the logo. + * @default true + */ + showSpinner?: boolean + + /** + * The z-index value for the overlay. + * Adjust this if you need the overlay to appear above or below other elements. + * @default 50 + */ + zIndex?: number + + /** + * Whether to use solid black background instead of semi-transparent. + * Useful for initial page load and full-screen loading states. + * @default false + */ + solid?: boolean +} + +export function LoadingOverlay({ + isLoading = true, + className, + showLogo = true, + showSpinner = true, + zIndex = 50, + solid = false +}: LoadingOverlayProps) { + if (!isLoading) return null + + return ( +
+ {showLogo && ( +
+ +
+ )} + {showSpinner && ( +
+ ) +} diff --git a/apps/deploy-fe/src/components/foundation/navigation-wrapper.tsx b/apps/deploy-fe/src/components/foundation/navigation-wrapper.tsx new file mode 100644 index 0000000..d249da9 --- /dev/null +++ b/apps/deploy-fe/src/components/foundation/navigation-wrapper.tsx @@ -0,0 +1,74 @@ +import { cn } from '@workspace/ui/lib/utils' +import type { NavigationWrapperProps } from './types' + +/** + * NavigationWrapper component + * + * Provides a layout wrapper with a top navigation bar. + * This component is intended to be used at the layout level, + * wrapping the entire application or major sections of it. + * + * @example + * ```tsx + * // In app/layout.tsx + * export default function RootLayout({ children }) { + * return ( + * + * + * + * {children} + * + * + * + * ); + * } + * ``` + * + * @param props - The component props + * @returns A layout wrapper with top navigation + */ +export default function NavigationWrapper({ + children, + className +}: NavigationWrapperProps) { + return ( +
+ {/* Top Navigation */} + {/*
+
+
+ + App Logo + +
+ +
+ +
+
+
*/} + + {/* Main Content */} + {children} +
+ ) +} diff --git a/apps/deploy-fe/src/components/foundation/page-header.tsx b/apps/deploy-fe/src/components/foundation/page-header.tsx new file mode 100644 index 0000000..eb78dea --- /dev/null +++ b/apps/deploy-fe/src/components/foundation/page-header.tsx @@ -0,0 +1,104 @@ +'use client' + +import { Button } from '@workspace/ui/components/button' +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger +} from '@workspace/ui/components/dropdown-menu' +import { cn } from '@workspace/ui/lib/utils' +import { MoreVertical } from 'lucide-react' +import Link from 'next/link' +import type { PageAction, PageHeaderProps } from './types' + +export default function PageHeader({ + title, + description, + actions = [], + className +}: PageHeaderProps) { + // Separate primary actions from secondary actions + const primaryActions = actions.filter((action) => action.isPrimary) + const secondaryActions = actions.filter((action) => !action.isPrimary) + + // Render an action (either as button or link) + const renderAction = (action: PageAction, key: string) => { + const variant = action.variant || (action.isPrimary ? 'default' : 'outline') + + if (action.href) { + return ( + + ) + } + + return ( + + ) + } + + return ( +
+
+
+

+ {title} +

+ {description && ( +

+ {description} +

+ )} +
+ + {actions.length > 0 && ( + <> + {/* Desktop buttons */} +
+ {actions.map((action, index) => + renderAction(action, `desktop-${index}`) + )} +
+ + {/* Mobile buttons */} +
+ {primaryActions.map((action, index) => + renderAction(action, `mobile-primary-${index}`) + )} + + {secondaryActions.length > 0 && ( + + + + + + {secondaryActions.map((action) => + action.href ? ( + + {action.label} + + ) : ( + + {action.label} + + ) + )} + + + )} +
+ + )} +
+
+ ) +} diff --git a/apps/deploy-fe/src/components/foundation/page-wrapper.tsx b/apps/deploy-fe/src/components/foundation/page-wrapper.tsx new file mode 100644 index 0000000..1921439 --- /dev/null +++ b/apps/deploy-fe/src/components/foundation/page-wrapper.tsx @@ -0,0 +1,32 @@ +import { cn } from '@workspace/ui/lib/utils' +import PageHeader from './page-header' +import type { PageWrapperProps } from './types' + +export default function PageWrapper({ + header, + children, + layout = 'default', + className, + contentClassName +}: PageWrapperProps) { + return ( +
+ {header && ( +
+ +
+ )} +
+
+ {children} +
+
+
+ ) +} diff --git a/apps/deploy-fe/src/components/foundation/providers.tsx b/apps/deploy-fe/src/components/foundation/providers.tsx new file mode 100644 index 0000000..a00b0a9 --- /dev/null +++ b/apps/deploy-fe/src/components/foundation/providers.tsx @@ -0,0 +1,23 @@ +'use client' +import { ThemeProvider } from 'next-themes' +import type * as React from 'react' +import '@workspace/ui/globals.css' +import { Toaster } from 'sonner' + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + <> + + + {children} + + + ) +} diff --git a/apps/deploy-fe/src/components/foundation/top-navigation/dark-mode-toggle.tsx b/apps/deploy-fe/src/components/foundation/top-navigation/dark-mode-toggle.tsx new file mode 100644 index 0000000..c113acf --- /dev/null +++ b/apps/deploy-fe/src/components/foundation/top-navigation/dark-mode-toggle.tsx @@ -0,0 +1,27 @@ +'use client' + +import { Button } from '@workspace/ui/components/button' +import { Moon, Sun } from 'lucide-react' +import { useTheme } from 'next-themes' + +export function DarkModeToggle() { + const { theme, setTheme } = useTheme() + + return ( + + ) +} diff --git a/apps/deploy-fe/src/components/foundation/top-navigation/navigation-item.tsx b/apps/deploy-fe/src/components/foundation/top-navigation/navigation-item.tsx new file mode 100644 index 0000000..93d5273 --- /dev/null +++ b/apps/deploy-fe/src/components/foundation/top-navigation/navigation-item.tsx @@ -0,0 +1,80 @@ +'use client' + +import { Button } from '@workspace/ui/components/button' +import { cn } from '@workspace/ui/lib/utils' +import type { LucideIcon } from 'lucide-react' +import Link from 'next/link' +import type React from 'react' + +interface NavigationItemProps { + href?: string + onClick?: () => void + className?: string + active?: boolean + icon?: LucideIcon + children: React.ReactNode + variant?: + | 'default' + | 'destructive' + | 'outline' + | 'secondary' + | 'ghost' + | 'link' + isDrawerItem?: boolean +} + +export function NavigationItem({ + href, + onClick, + className, + active = false, + icon: Icon, + children, + variant = 'ghost', + isDrawerItem = false +}: NavigationItemProps) { + // For drawer items, use a simpler styling approach + if (isDrawerItem) { + const content = ( +
+ {children} +
+ ) + + if (href) { + return {content} + } + + return + } + + // For regular navigation items, use the Button component + const content = ( + <> + {Icon && } + {children} + + ) + + const buttonClassName = cn(active && 'font-semibold', className) + + if (href) { + return ( + + ) + } + + return ( + + ) +} diff --git a/apps/deploy-fe/src/components/foundation/top-navigation/top-navigation.tsx b/apps/deploy-fe/src/components/foundation/top-navigation/top-navigation.tsx new file mode 100644 index 0000000..6873bdf --- /dev/null +++ b/apps/deploy-fe/src/components/foundation/top-navigation/top-navigation.tsx @@ -0,0 +1,120 @@ +'use client' + +import { LaconicMark } from '@/components/assets/laconic-mark' +import { Button } from '@workspace/ui/components/button' +import { + Sheet, + SheetClose, + SheetContent, + SheetTrigger +} from '@workspace/ui/components/sheet' +import { Menu } from 'lucide-react' +import Link from 'next/link' +import type React from 'react' +import { DarkModeToggle } from './dark-mode-toggle' +import { NavigationItem } from './navigation-item' +import type { TopNavigationConfig } from './types' +import { WalletSessionBadge } from './wallet-session-badge' + +interface TopNavigationProps { + config?: TopNavigationConfig + children?: React.ReactNode +} + +export function TopNavigation({ + config = { + leftItems: [ + { label: 'Projects', href: '/projects' }, + { label: 'Wallet', href: '/wallets' } + ], + rightItems: [ + { label: 'Support', href: '/support' }, + { label: 'Documentation', href: '/documentation' } + ] + } +}: TopNavigationProps) { + const { leftItems = [], rightItems = [] } = config + + return ( +
+
+ {/* Mobile menu trigger - positioned on the left */} +
+ + + + + +
+ + + + + Close + +
+
+ +
+ + +
+ + + + + +
+ {leftItems.map((item) => ( + + {item.label} + + ))} +
+ +
+ + + + +
+
+
+ ) +} diff --git a/apps/deploy-fe/src/components/foundation/top-navigation/types.ts b/apps/deploy-fe/src/components/foundation/top-navigation/types.ts new file mode 100644 index 0000000..f1a8e5d --- /dev/null +++ b/apps/deploy-fe/src/components/foundation/top-navigation/types.ts @@ -0,0 +1,14 @@ +import type { LucideIcon } from 'lucide-react' + +export interface NavigationItemConfig { + label: string + href?: string + onClick?: () => void + icon?: LucideIcon + active?: boolean +} + +export interface TopNavigationConfig { + leftItems?: NavigationItemConfig[] + rightItems?: NavigationItemConfig[] +} diff --git a/apps/deploy-fe/src/components/foundation/top-navigation/wallet-session-badge.tsx b/apps/deploy-fe/src/components/foundation/top-navigation/wallet-session-badge.tsx new file mode 100644 index 0000000..2a049de --- /dev/null +++ b/apps/deploy-fe/src/components/foundation/top-navigation/wallet-session-badge.tsx @@ -0,0 +1,66 @@ +'use client' + +import { Button } from '@workspace/ui/components/button' +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger +} from '@workspace/ui/components/dropdown-menu' +import { cn } from '@workspace/ui/lib/utils' +import { ChevronDown, LogOut } from 'lucide-react' +import { useState } from 'react' + +interface WalletSessionBadgeProps { + address: string + className?: string +} + +export function WalletSessionBadge({ + address, + className +}: WalletSessionBadgeProps) { + const [isConnected, setIsConnected] = useState(true) + + return ( + + + + + + setIsConnected(false)} + > + + Disconnect + + + + ) +} diff --git a/apps/deploy-fe/src/components/foundation/types.ts b/apps/deploy-fe/src/components/foundation/types.ts new file mode 100644 index 0000000..55b7dfa --- /dev/null +++ b/apps/deploy-fe/src/components/foundation/types.ts @@ -0,0 +1,64 @@ +import type { ReactNode } from 'react' + +/** + * Props for the NavigationWrapper component + */ +export interface NavigationWrapperProps { + /** + * Content to be displayed within the navigation wrapper + * Typically includes PageWrapper components + */ + children: ReactNode + + /** + * Optional CSS class name to apply custom styles to the wrapper container + */ + className?: string +} + +export interface PageAction { + label: string + variant?: + | 'default' + | 'destructive' + | 'outline' + | 'secondary' + | 'ghost' + | 'link' + onClick?: () => void + href?: string + isPrimary?: boolean +} + +export interface PageHeaderProps { + title: string + description?: string + actions?: PageAction[] + className?: string +} + +export type PageWrapperLayout = 'default' | 'bento' + +export interface PageWrapperProps { + /** + * Optional header props for the page + */ + header?: PageHeaderProps + /** + * Content to be displayed below the header + */ + children: ReactNode + /** + * Layout style for the page + * @default "default" + */ + layout?: PageWrapperLayout + /** + * Optional className for additional styling + */ + className?: string + /** + * Optional className for the content container + */ + contentClassName?: string +} diff --git a/apps/deploy-fe/src/components/layouts/dashboard-layout.tsx b/apps/deploy-fe/src/components/layouts/dashboard-layout.tsx deleted file mode 100644 index 5f5c2ac..0000000 --- a/apps/deploy-fe/src/components/layouts/dashboard-layout.tsx +++ /dev/null @@ -1,34 +0,0 @@ -'use client' - -import { Header } from '@/components/page-header/header' -import { PageHeader } from '@/components/page-header/page-header' -import type { DashboardLayoutConfig } from '@/types/dashboard' -import { cn } from '@workspace/ui/lib/utils' -import type React from 'react' - -interface DashboardLayoutProps { - config: DashboardLayoutConfig - children: React.ReactNode - className?: string -} - -export function DashboardLayout({ - config, - children, - className -}: DashboardLayoutProps) { - const { headerConfig, pageHeaderConfig } = config - - return ( -
- {/* Top Navigation */} -
- - {/* Page Header with breadcrumbs */} - - - {/* Content Area */} -
{children}
-
- ) -} diff --git a/apps/deploy-fe/src/components/layouts/index.ts b/apps/deploy-fe/src/components/layouts/index.ts deleted file mode 100644 index a6606ce..0000000 --- a/apps/deploy-fe/src/components/layouts/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { DashboardLayout } from './dashboard-layout' diff --git a/apps/deploy-fe/src/components/navigation/main-nav.tsx b/apps/deploy-fe/src/components/navigation/main-nav.tsx deleted file mode 100644 index 582026b..0000000 --- a/apps/deploy-fe/src/components/navigation/main-nav.tsx +++ /dev/null @@ -1,38 +0,0 @@ -'use client' - -import type { NavItem } from '@/types/dashboard' -import { cn } from '@workspace/ui/lib/utils' -import Link from 'next/link' -import { usePathname } from 'next/navigation' - -interface MainNavProps { - items: NavItem[] - className?: string -} - -export function MainNav({ items, className }: MainNavProps) { - const pathname = usePathname() - - return ( - - ) -} diff --git a/apps/deploy-fe/src/components/navigation/mobile-nav.tsx b/apps/deploy-fe/src/components/navigation/mobile-nav.tsx deleted file mode 100644 index 74fcff9..0000000 --- a/apps/deploy-fe/src/components/navigation/mobile-nav.tsx +++ /dev/null @@ -1,82 +0,0 @@ -'use client' - -import { useNavigation } from '@/navigation' -import type { NavItem } from '@/types/dashboard' -import { Button } from '@workspace/ui/components/button' -import { - Sheet, - SheetContent, - SheetHeader, - SheetTitle, - SheetTrigger -} from '@workspace/ui/components/sheet' -import { cn } from '@workspace/ui/lib/utils' -import { Menu, Package2 } from 'lucide-react' -import Link from 'next/link' -import { usePathname } from 'next/navigation' -import type { ReactNode } from 'react' - -interface MobileNavProps { - items: NavItem[] - logo?: ReactNode - title?: string - className?: string -} - -export function MobileNav({ - items, - logo = , - title = 'Navigation', - className -}: MobileNavProps) { - const pathname = usePathname() - const { mobileMenuOpen, toggleMobileMenu } = useNavigation() - - return ( - - - - - - - - {logo} - {title} - - - - - - ) -} diff --git a/apps/deploy-fe/src/components/navigation/user-nav.tsx b/apps/deploy-fe/src/components/navigation/user-nav.tsx deleted file mode 100644 index 628ba64..0000000 --- a/apps/deploy-fe/src/components/navigation/user-nav.tsx +++ /dev/null @@ -1,67 +0,0 @@ -'use client' - -import type { UserNavConfig } from '@/types/dashboard' -import { Button } from '@workspace/ui/components/button' -import { CircleUser } from 'lucide-react' - -interface UserNavProps extends UserNavConfig { - className?: string -} - -export function UserNav({ - avatarSrc, - username, - email, - showMobile = true, - className -}: UserNavProps) { - return ( -
- {/* Desktop user button */} - - - {/* Mobile user button */} - {showMobile && ( - - )} -
- ) -} - -import { cn } from '@workspace/ui/lib/utils' diff --git a/apps/deploy-fe/src/components/page-header/breadcrumbs.tsx b/apps/deploy-fe/src/components/page-header/breadcrumbs.tsx deleted file mode 100644 index 3625627..0000000 --- a/apps/deploy-fe/src/components/page-header/breadcrumbs.tsx +++ /dev/null @@ -1,71 +0,0 @@ -'use client' - -import type { BreadcrumbsConfig } from '@/types/dashboard' -import { cn } from '@workspace/ui/lib/utils' -import { ChevronRight } from 'lucide-react' -import Link from 'next/link' -import { usePathname } from 'next/navigation' -import React from 'react' - -interface BreadcrumbsProps extends BreadcrumbsConfig { - className?: string -} - -export function Breadcrumbs({ - homeLabel = 'Home', - homeHref = '/', - pathMap = {}, - className -}: BreadcrumbsProps) { - const pathname = usePathname() - - // Generate breadcrumbs from the current path - const breadcrumbs = generateBreadcrumbs(pathname, pathMap) - - return ( -
- - {homeLabel} - - - {breadcrumbs.map((crumb) => ( - - - - {crumb.label} - - - ))} -
- ) -} - -// Helper function to generate breadcrumbs from the current path -function generateBreadcrumbs( - pathname: string, - pathMap: Record = {} -): Array<{ href: string; label: string }> { - const paths = pathname.split('/').filter(Boolean) - - return paths.map((path, index) => { - // Build the URL up to this point - const href = `/${paths.slice(0, index + 1).join('/')}` - - // Use the mapping if available, otherwise capitalize the path - const label = pathMap[path] || path.charAt(0).toUpperCase() + path.slice(1) - - return { href, label } - }) -} diff --git a/apps/deploy-fe/src/components/page-header/header.tsx b/apps/deploy-fe/src/components/page-header/header.tsx deleted file mode 100644 index 9e59007..0000000 --- a/apps/deploy-fe/src/components/page-header/header.tsx +++ /dev/null @@ -1,78 +0,0 @@ -'use client' - -import { MainNav } from '@/components/navigation/main-nav' -import { MobileNav } from '@/components/navigation/mobile-nav' -import { UserNav } from '@/components/navigation/user-nav' -import { SearchCombobox } from '@/components/page-header/search-combobox' -import type { HeaderConfig } from '@/types/dashboard' -import { cn } from '@workspace/ui/lib/utils' -import { Package2 } from 'lucide-react' -import Link from 'next/link' - -interface HeaderProps extends HeaderConfig { - className?: string -} - -export function Header({ - logo = , - logoMobile, - navItems, - searchConfig, - userConfig, - className -}: HeaderProps) { - // Use the mobile logo if provided, otherwise use the desktop logo - const mobileLogoElement = logoMobile || ( -
- - Application Logo - - -
- ) - - return ( -
- {/* Mobile: Left section with menu */} -
- -
- - {/* Desktop: Left section with logo and nav */} -
- {logo} - -
- - {/* Mobile: Center logo */} -
- {mobileLogoElement} -
- - {/* Right section */} -
- - -
-
- ) -} diff --git a/apps/deploy-fe/src/components/page-header/page-header.tsx b/apps/deploy-fe/src/components/page-header/page-header.tsx deleted file mode 100644 index c7a674f..0000000 --- a/apps/deploy-fe/src/components/page-header/page-header.tsx +++ /dev/null @@ -1,30 +0,0 @@ -'use client' - -import type React from 'react' - -import { Breadcrumbs } from '@/components/page-header/breadcrumbs' -import type { PageHeaderConfig } from '@/types/dashboard' -import { cn } from '@workspace/ui/lib/utils' - -interface PageHeaderProps extends PageHeaderConfig { - className?: string - children?: React.ReactNode -} - -export function PageHeader({ - breadcrumbsConfig, - className, - children -}: PageHeaderProps) { - return ( -
-
- {/* Breadcrumb */} - - - {/* Optional content */} - {children} -
-
- ) -} diff --git a/apps/deploy-fe/src/components/page-header/search-combobox.tsx b/apps/deploy-fe/src/components/page-header/search-combobox.tsx deleted file mode 100644 index 99168e9..0000000 --- a/apps/deploy-fe/src/components/page-header/search-combobox.tsx +++ /dev/null @@ -1,236 +0,0 @@ -'use client' - -import type { SearchConfig, SearchResultItem } from '@/types/dashboard' -import { Button } from '@workspace/ui/components/button' -import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList -} from '@workspace/ui/components/command' -import { Input } from '@workspace/ui/components/input' -import { - Popover, - PopoverContent, - PopoverTrigger -} from '@workspace/ui/components/popover' -import { cn } from '@workspace/ui/lib/utils' -import { - FileText, - Laptop, - Package, - SearchIcon, - Settings, - Users -} from 'lucide-react' -import * as React from 'react' - -interface SearchComboboxProps extends SearchConfig { - className?: string -} - -// Default icons for different categories -const categoryIcons = { - projects: , - documents: , - settings: , - users: , - default: -} as const satisfies Record - -export function SearchCombobox({ - placeholder = 'Search...', - onSearch, - showMobile = true, - searchResults = [], - onSelectItem, - categories = [], - className -}: SearchComboboxProps) { - const [open, setOpen] = React.useState(false) - const [query, setQuery] = React.useState('') - const [groupedResults, setGroupedResults] = React.useState< - Record - >({}) - - // Filter results based on query - const filteredResults = query - ? searchResults.filter( - (item) => - item.title.toLowerCase().includes(query.toLowerCase()) || - item.description?.toLowerCase().includes(query.toLowerCase()) - ) - : searchResults - - // Group results by category - React.useEffect(() => { - const grouped: Record = {} - - // Initialize with empty arrays for each category - for (const category in categories) { - if (Object.prototype.hasOwnProperty.call(categories, category)) { - const cat = categories[category] as string - grouped[cat] = [] - } - } - - // Add "Other" category if there are items without a category - grouped.Other = [] - - // Group items by category - for (const idx in filteredResults) { - if (Object.prototype.hasOwnProperty.call(filteredResults, idx)) { - const result = filteredResults[idx] as SearchResultItem - const categoryKey = (result.category ?? 'default') as - | keyof typeof categoryIcons - | 'Other' - - if (Object.keys(categoryIcons).includes(categoryKey)) { - if (!grouped[categoryKey]) { - grouped[categoryKey] = [] - } - grouped[categoryKey].push(result) - } else { - grouped.Other.push(result) - } - } - } - - // Remove empty categories - setGroupedResults( - Object.fromEntries( - Object.entries(grouped).filter(([_, items]) => items.length > 0) - ) - ) - }, [filteredResults, categories]) - - const handleSelect = (item: SearchResultItem) => { - setOpen(false) - if (onSelectItem) { - onSelectItem(item) - } - } - - const handleSearch = (e: React.FormEvent) => { - e.preventDefault() - if (onSearch) { - onSearch(query) - } - } - - return ( -
- {/* Mobile search button */} - {showMobile && ( - - - - - - - - - No results found. - {Object.entries(groupedResults).map(([category, items]) => ( - - {items.map((item) => ( - handleSelect(item)} - className="flex items-center" - > - {item.icon ? ( - - ) : ( - categoryIcons[ - item.category && - Object.keys(categoryIcons).includes(item.category) - ? (item.category as keyof typeof categoryIcons) - : 'default' - ] - )} -
- {item.title} - {item.description && ( - - {item.description} - - )} -
- - ))} - - ))} - - - - - )} - - {/* Desktop search */} -
- - -
- -
- setQuery(e.target.value)} - onFocus={() => setOpen(true)} - /> -
-
- - - - - No results found. - {Object.entries(groupedResults).map(([category, items]) => ( - - {items.map((item) => ( - handleSelect(item)} - className="flex items-center" - > - {item.icon ? ( - - ) : ( - categoryIcons[ - item.category && - Object.keys(categoryIcons).includes(item.category) - ? (item.category as keyof typeof categoryIcons) - : 'default' - ] - )} -
- {item.title} - {item.description && ( - - {item.description} - - )} -
- - ))} - - ))} - - - - -
-
- ) -} diff --git a/apps/deploy-fe/src/components/page-header/search.tsx b/apps/deploy-fe/src/components/page-header/search.tsx deleted file mode 100644 index ac28150..0000000 --- a/apps/deploy-fe/src/components/page-header/search.tsx +++ /dev/null @@ -1,52 +0,0 @@ -'use client' - -import type React from 'react' - -import type { SearchConfig } from '@/types/dashboard' -import { Button } from '@workspace/ui/components/button' -import { Input } from '@workspace/ui/components/input' -import { cn } from '@workspace/ui/lib/utils' -import { SearchIcon } from 'lucide-react' -import { useState } from 'react' - -interface SearchProps extends SearchConfig { - className?: string -} - -export function Search({ - placeholder = 'Search...', - onSearch, - showMobile = true, - className -}: SearchProps) { - const [query, setQuery] = useState('') - - const handleSearch = (e: React.FormEvent) => { - e.preventDefault() - if (onSearch) { - onSearch(query) - } - } - - return ( -
- {/* Mobile search button */} - {showMobile && ( - - )} - - {/* Desktop search */} -
- - setQuery(e.target.value)} - /> - -
- ) -} diff --git a/apps/deploy-fe/src/components/providers.tsx b/apps/deploy-fe/src/components/providers.tsx deleted file mode 100644 index 1d1dec0..0000000 --- a/apps/deploy-fe/src/components/providers.tsx +++ /dev/null @@ -1,31 +0,0 @@ -'use client' - -import { Button } from '@workspace/ui/components/button' -import { ThemeProvider as NextThemesProvider } from 'next-themes' -import type * as React from 'react' -import '@workspace/ui/globals.css' -import { Toaster, toast } from 'sonner' -export function Providers({ children }: { children: React.ReactNode }) { - return ( - - - - {children} - - ) -} diff --git a/apps/deploy-fe/src/config/dashboard.ts b/apps/deploy-fe/src/config/dashboard.ts deleted file mode 100644 index a30995a..0000000 --- a/apps/deploy-fe/src/config/dashboard.ts +++ /dev/null @@ -1,110 +0,0 @@ -import type { - DashboardLayoutConfig, - NavItem, - SearchResultItem -} from '@/types/dashboard' -import { - FileText, - Package2, - Settings, - ShoppingCart, - Users, - Wallet -} from 'lucide-react' - -// Navigation items for the dashboard -export const dashboardNavItems: NavItem[] = [ - { - title: 'Projects', - href: '/projects', - icon: Package2 - }, - { - title: 'Buy Prepaid', - href: '/bp', - icon: ShoppingCart - }, - { - title: 'Wallet', - href: '/wallet', - icon: Wallet - } -] - -// Path mapping for breadcrumbs -export const dashboardPathMap: Record = { - projects: 'Projects', - bp: 'Buy Prepaid', - wallet: 'Wallet' -} - -// Sample search results for the combobox -export const sampleSearchResults: SearchResultItem[] = [ - { - id: '1', - title: 'Project Alpha', - description: 'Main production project', - href: '/projects/alpha', - icon: Package2, - category: 'Projects' - }, - { - id: '2', - title: 'Project Beta', - description: 'Development environment', - href: '/projects/beta', - icon: Package2, - category: 'Projects' - }, - { - id: '3', - title: 'Billing Settings', - description: 'Manage payment methods', - href: '/wallet/settings', - icon: Settings, - category: 'Settings' - }, - { - id: '4', - title: 'Team Members', - description: 'Manage team access', - href: '/team', - icon: Users, - category: 'Users' - }, - { - id: '5', - title: 'API Documentation', - description: 'Developer resources', - href: '/docs/api', - icon: FileText, - category: 'Documents' - } -] - -// Default dashboard layout configuration -export const defaultDashboardConfig: DashboardLayoutConfig = { - headerConfig: { - navItems: dashboardNavItems, - searchConfig: { - placeholder: 'Search projects, docs, settings...', - searchResults: sampleSearchResults, - categories: ['Projects', 'Documents', 'Settings', 'Users'], - onSelectItem: (item) => { - // In a real app, you would use router.push(item.href) - console.log('Selected item:', item) - window.location.href = item.href - } - }, - userConfig: { - showMobile: true - } - }, - pageHeaderConfig: { - breadcrumbsConfig: { - homeLabel: 'Home', - homeHref: '/', - pathMap: dashboardPathMap - } - } -} diff --git a/apps/deploy-fe/src/navigation/README.md b/apps/deploy-fe/src/navigation/README.md deleted file mode 100644 index a1b31ce..0000000 --- a/apps/deploy-fe/src/navigation/README.md +++ /dev/null @@ -1,163 +0,0 @@ -# Navigation Components - -A collection of reusable navigation components for the deploy-fe application. - -## Components - -### MainNav - -The main navigation bar component that displays the logo, menu items, and user profile. - -```tsx -import { MainNav } from "@/navigation"; - -const navItems = [ - { - href: "/dashboard", - label: "Dashboard", - icon: LayoutDashboard, - }, - { - href: "/orders", - label: "Orders", - icon: ShoppingCart, - badge: "2", - }, - // ... -]; - -const user = { - name: "John Doe", - avatarUrl: "/avatar.png", - menuItems: [ - { label: "Profile", href: "/profile" }, - { label: "Settings", href: "/settings" }, - { label: "Logout", href: "/logout" }, - ], -}; - - -``` - -### PageHeader - -The page header component that displays the title, description, breadcrumbs, and action buttons. - -```tsx -import { PageHeader } from "@/navigation"; -import { Button } from "@workspace/ui/components/button"; - -Share, - , - , - , - ]} -/> -``` - -### Breadcrumb - -The breadcrumb component that displays a navigation trail. - -```tsx -import { Breadcrumb } from "@/navigation"; - - -``` - -### NavItem - -The navigation item component that displays a link with an optional icon and badge. - -```tsx -import { NavItem } from "@/navigation"; -import { Home } from "lucide-react"; - - -``` - -### LayoutWrapper - -A wrapper component that combines the MainNav and PageHeader components. - -```tsx -import { LayoutWrapper } from "@/navigation"; -import { Button } from "@workspace/ui/components/button"; - -Share, - , - , - , - ]} -> -
Your content here
- -``` - -## State Management - -### useNavigation - -A Zustand store hook that provides access to the navigation state. This can be used directly from any component without needing a provider. - -```tsx -import { useNavigation } from "@/navigation"; - -function MyComponent() { - const { activePath, mobileMenuOpen, toggleMobileMenu } = useNavigation(); - - return ( -
- -
Active path: {activePath}
-
- ); -} -``` - -### NavigationProvider (Optional) - -The navigation provider component that syncs the active path with the URL. This is optional and only needed if you want to automatically update the active path based on the current URL. - -```tsx -import { NavigationProvider } from "@/navigation"; - - - - -``` - -## Example - -See the `example-usage.tsx` file for a complete example of how to use these components together. diff --git a/apps/deploy-fe/src/navigation/breadcrumb.tsx b/apps/deploy-fe/src/navigation/breadcrumb.tsx deleted file mode 100644 index 9bd3108..0000000 --- a/apps/deploy-fe/src/navigation/breadcrumb.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { cn } from '@workspace/ui/lib/utils' -import { ChevronRight } from 'lucide-react' -import Link from 'next/link' - -import type { BreadcrumbProps } from './types' - -/** - * Breadcrumb component - * Displays a breadcrumb trail for navigation - * - * @param props - Component props - * @returns Breadcrumb component - */ -export function Breadcrumb({ - items, - separator = , - className -}: BreadcrumbProps) { - if (!items || items.length === 0) { - return null - } - - return ( - - ) -} diff --git a/apps/deploy-fe/src/navigation/example-usage.tsx b/apps/deploy-fe/src/navigation/example-usage.tsx deleted file mode 100644 index 2608503..0000000 --- a/apps/deploy-fe/src/navigation/example-usage.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { Button } from '@workspace/ui/components/button' - -import { LayoutWrapper } from './layout-wrapper' - -/** - * ExampleUsage component - * Demonstrates how to use the LayoutWrapper component - * - * @returns ExampleUsage component - */ -export function ExampleUsage() { - return ( - - Share - , - , - , - - ]} - > -
- Slot (swap it with your content) -
- - ) -} diff --git a/apps/deploy-fe/src/navigation/index.ts b/apps/deploy-fe/src/navigation/index.ts deleted file mode 100644 index ebc9d11..0000000 --- a/apps/deploy-fe/src/navigation/index.ts +++ /dev/null @@ -1,22 +0,0 @@ -// Export components -export { Breadcrumb } from './breadcrumb' -export { ExampleUsage } from './example-usage' -export { LayoutWrapper } from './layout-wrapper' -export { MainNav } from './main-nav' -export { NavItem } from './nav-item' -export { PageHeader } from './page-header' - -// Export providers -export { NavigationProvider, useNavigation } from './navigation-provider' - -// Export types -export type { - BreadcrumbItem, - BreadcrumbProps, - MainNavProps, - NavItemProps, - NavItem as NavItemType, - PageHeaderProps, - UserMenuItem, - UserProfile -} from './types' diff --git a/apps/deploy-fe/src/navigation/layout-wrapper.tsx b/apps/deploy-fe/src/navigation/layout-wrapper.tsx deleted file mode 100644 index c44bb81..0000000 --- a/apps/deploy-fe/src/navigation/layout-wrapper.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { - LayoutDashboard, - Package, - Settings, - ShoppingCart, - Users -} from 'lucide-react' -import type { ReactNode } from 'react' - -import { MainNav } from './main-nav' -import { NavigationProvider } from './navigation-provider' -import { PageHeader } from './page-header' -import type { BreadcrumbItem } from './types' - -interface LayoutWrapperProps { - children: ReactNode - title: string - description?: string - breadcrumbs?: BreadcrumbItem[] - actions?: ReactNode[] -} - -/** - * LayoutWrapper component - * Provides a consistent layout with navigation and page header - * - * @param props - Component props - * @returns LayoutWrapper component - */ -export function LayoutWrapper({ - children, - title, - description, - breadcrumbs, - actions -}: LayoutWrapperProps) { - // Example navigation items - const navItems = [ - { - href: '/dashboard', - label: 'Dashboard', - icon: LayoutDashboard - }, - { - href: '/orders', - label: 'Orders', - icon: ShoppingCart, - badge: '2' - }, - { - href: '/products', - label: 'Products', - icon: Package - }, - { - href: '/customers', - label: 'Customers', - icon: Users - }, - { - href: '/settings', - label: 'Settings', - icon: Settings - } - ] - - // Example user profile - const user = { - name: 'John Doe', - avatarUrl: '', - menuItems: [ - { label: 'Profile', href: '/profile' }, - { label: 'Settings', href: '/settings' }, - { label: 'Logout', href: '/logout' } - ] - } - - return ( - -
- - -
- - -
{children}
-
-
- - ) -} - -/** - * Example usage: - * - * ```tsx - * Share, - * , - * , - * , - * ]} - * > - *
- * Slot (swap it with your content) - *
- * - * ``` - */ diff --git a/apps/deploy-fe/src/navigation/main-nav.tsx b/apps/deploy-fe/src/navigation/main-nav.tsx deleted file mode 100644 index 932e050..0000000 --- a/apps/deploy-fe/src/navigation/main-nav.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { Button } from '@workspace/ui/components/button' -import { cn } from '@workspace/ui/lib/utils' -import { Menu } from 'lucide-react' - -import { NavItem } from './nav-item' -import { useNavigation } from './navigation-provider' -import type { MainNavProps } from './types' - -/** - * MainNav component - * Renders the main navigation bar with logo, menu items, and user profile - * - * @param props - Component props - * @returns MainNav component - */ -export function MainNav({ logo, items, user, className }: MainNavProps) { - const { mobileMenuOpen, toggleMobileMenu } = useNavigation() - - return ( -
-
- {/* Logo and mobile menu toggle */} -
- {logo ? ( -
{logo}
- ) : ( -
- Logo -
-
- )} - - -
- - {/* Desktop navigation */} - - - {/* Mobile navigation */} - {mobileMenuOpen && ( -
- -
- )} - - {/* Right side items (user profile, etc.) */} -
- {user && ( -
-
- {user.name} -
-
- -
- )} -
-
-
- ) -} diff --git a/apps/deploy-fe/src/navigation/nav-item.tsx b/apps/deploy-fe/src/navigation/nav-item.tsx deleted file mode 100644 index 55bbb42..0000000 --- a/apps/deploy-fe/src/navigation/nav-item.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { cn } from '@workspace/ui/lib/utils' -import Link from 'next/link' - -import { useNavigation } from './navigation-provider' -import type { NavItemProps } from './types' - -/** - * NavItem component - * Renders a navigation link with optional icon and badge - * - * @param props - Component props - * @returns NavItem component - */ -export function NavItem({ - href, - label, - icon: Icon, - badge, - isActive: forcedActive, - className -}: NavItemProps) { - const { activePath } = useNavigation() - const isActive = - forcedActive !== undefined ? forcedActive : activePath === href - - return ( - - {Icon &&