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 index 0a1d5b1..7a2d8dc 100644 --- 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 @@ -21,14 +21,7 @@ const BuyPrepaidService = () => {
@@ -65,8 +58,14 @@ const BuyPrepaidService = () => {

- @@ -92,7 +91,15 @@ const BuyPrepaidService = () => {

- + @@ -114,8 +121,14 @@ const BuyPrepaidService = () => {

- diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/documentation/DocumentationPlaceholder.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/documentation/DocumentationPlaceholder.tsx new file mode 100644 index 0000000..c579a9b --- /dev/null +++ b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/documentation/DocumentationPlaceholder.tsx @@ -0,0 +1,669 @@ +'use client' + +import { Separator } from '@radix-ui/react-dropdown-menu' +import { Button } from '@workspace/ui/components/button' +import { Input } from '@workspace/ui/components/input' +import { + Sheet, + SheetContent, + SheetTrigger +} from '@workspace/ui/components/sheet' +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger +} from '@workspace/ui/components/tabs' +import { + ChevronDown, + Code, + Copy, + Github, + Globe, + Menu, + Moon, + Search, + Sun, + Terminal, + X +} from 'lucide-react' +import Link from 'next/link' +import { useRouter } from 'next/navigation' +import { useState } from 'react' + +// Add this component after the imports +function ComingSoonOverlay({ routerAction }: { routerAction: () => void }) { + return ( +
+
+ +

Coming Soon

+

+ Our documentation is currently under development. Check back soon for + comprehensive guides and tutorials. +

+
+ +
+
+
+ ) +} + +export default function DocumentationPage() { + const [isMobileNavOpen, setIsMobileNavOpen] = useState(false) + const [isDarkMode, setIsDarkMode] = useState(false) + const router = useRouter() + const toggleDarkMode = () => { + setIsDarkMode(!isDarkMode) + document.documentElement.classList.toggle('dark') + } + + return ( +
+ router.back()} /> + {/* Header */} +
+
+
+ + + Laconic Deploy + + +
+
+
+
+ + +
+
+ +
+
+
+ +
+ {/* Sidebar */} + + + {/* Main content */} +
+
+
+
+ Docs +
+ +
Getting Started
+
+
+

+ Getting Started with Laconic Deploy +

+

+ Learn how to deploy your applications with Laconic Deploy in + minutes. +

+
+ + +
+

+ Laconic Deploy is a modern deployment platform that makes it + easy to deploy your applications to the cloud. With Laconic + Deploy, you can deploy your applications with just a few clicks + or commands. +

+ +

Installation

+

+ To get started with Laconic Deploy, you need to install the + Laconic CLI. You can install it using npm: +

+ +
+
+ + Terminal + +
+ 
+                  npm install -g laconic-cli
+
+
+ +

Authentication

+

+ After installing the CLI, you need to authenticate with Laconic + Deploy: +

+ +
+
+ + Terminal + +
+ 
+                  laconic login
+
+
+ +

Creating Your First Project

+

+ To create a new project, use the laconic init{' '} + command: +

+ +
+
+ + Terminal + +
+ 
+                  laconic init my-awesome-project
+
+
+ +

Deploying Your Application

+

+ Once your project is set up, you can deploy it with a single + command: +

+ +
+
+ + Terminal + +
+ 
+                  laconic deploy
+
+
+ +

Configuration

+

+ Laconic Deploy uses a laconic.config.js file to + configure your deployments. Here's an example configuration: +

+ +
+
+ + laconic.config.js + +
+ 
+                  {`module.exports = {
+  name: 'my-awesome-project',
+  region: 'us-west-1',
+  environment: {
+    NODE_ENV: 'production',
+    API_URL: 'https://api.example.com'
+  },
+  resources: {
+    compute: {
+      type: 'container',
+      size: 'small',
+      port: 3000
+    },
+    database: {
+      type: 'postgres',
+      version: '14'
+    }
+  }
+}`}
+
+
+ +

Next Steps

+

+ Now that you've deployed your first application, you might want + to explore: +

+ +
    +
  • Setting up custom domains
    • +
  • Configuring environment variables
    • +
  • Setting up CI/CD pipelines
    • +
  • Monitoring and logging
    • +
  • Scaling your application
    • +
+ +
+ + + CLI + API + Dashboard + + +

+ The Laconic CLI provides a powerful command-line interface + for managing your deployments. See the{' '} + + CLI Reference + {' '} + for more information. +

+ + +

+ The Laconic API allows you to programmatically manage your + deployments. See the{' '} + + API Reference + {' '} + for more information. +

+ + +

+ The Laconic Dashboard provides a web interface for + managing your deployments. Visit the{' '} + + Dashboard + {' '} + to get started. +

+ + +
+
+ +
+ + +
+
+ + {/* Table of contents - desktop only */} + +
+
+ +
+
+

+ © {new Date().getFullYear()} Laconic Deploy. All rights reserved. +

+
+ + Terms + + + Privacy + + + Contact + +
+
+
+
+ ) +} + +function MobileNav({ onNavClose }: { onNavClose: () => void }) { + return ( +
+
+ + + Laconic Deploy + + +
+
+
+ +
+ +
+
+ ) +} + +function DocsSidebar({ + mobile = false, + onNavClose +}: { mobile?: boolean; onNavClose?: () => void }) { + const handleLinkClick = () => { + if (mobile && onNavClose) { + onNavClose() + } + } + + return ( +
+
+

+ Getting Started +

+
+ + Introduction + + + Getting Started + + + Installation + + + CLI Setup + +
+
+
+

+ Core Concepts +

+
+ + Projects + + + Environments + + + Deployments + + + Resources + +
+
+
+

+ Guides +

+
+ + Custom Domains + + + Environment Variables + + + CI/CD Integration + + + Monitoring & Logging + +
+
+
+

+ API Reference +

+
+ + Authentication + + + Projects API + + + Deployments API + + + Resources API + +
+
+
+ ) +} diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/documentation/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/documentation/page.tsx new file mode 100644 index 0000000..2c2055e --- /dev/null +++ b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/documentation/page.tsx @@ -0,0 +1,12 @@ +// Documentation page for the Deploy platform using Pagewrapper component + +import PageWrapper from '@/components/foundation/page-wrapper/PageWrapper' +import DocumentationPlaceholder from './DocumentationPlaceholder' + +export default function DocumentationPage() { + return ( + + + + ) +} diff --git a/apps/deploy-fe/src/app/store/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/store/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/store/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/store/page.tsx diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/support/SupportPlaceholder.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/support/SupportPlaceholder.tsx new file mode 100644 index 0000000..e29e6f7 --- /dev/null +++ b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/support/SupportPlaceholder.tsx @@ -0,0 +1,255 @@ +'use client' + +import type React from 'react' + +import { + Bell, + ChevronRight, + CreditCard, + Globe, + HelpCircle, + Lock, + Shield, + User +} from 'lucide-react' +import Link from 'next/link' +import { useState } from 'react' + +import { ComingSoonOverlay } from '@/components/foundation' +import { Button } from '@workspace/ui/components/button' +import { Separator } from '@workspace/ui/components/separator' +import { useRouter } from 'next/navigation' +/** + * Settings category item component + * Renders a single settings category with an icon and label + */ +interface SettingsCategoryProps { + /** The icon to display for this category */ + icon: React.ReactNode + /** The label text for this category */ + label: string + /** Whether this category is currently active */ + isActive?: boolean +} + +function SettingsCategory({ + icon, + label, + isActive = false +}: SettingsCategoryProps) { + return ( + + {icon} + {label} + {isActive && } + + ) +} + +/** + * Settings page component + * Displays a simple settings interface with categories and placeholder content + */ +export default function SettingsPage() { + const router = useRouter() + const [activeCategory] = useState('profile') + const [formState, setFormState] = useState({ + darkTheme: false, + autoDetectTimezone: true, + allowAnalytics: true + }) + + /** + * Handle checkbox changes + */ + const handleCheckboxChange = (e: React.ChangeEvent) => { + const { id, checked } = e.target + setFormState((prev) => ({ + ...prev, + [id]: checked + })) + } + + return ( +
+ router.back()} + /> + + {/* Header */} +
+
+
+ + + Laconic Deploy + +

Settings

+
+
+
+ +
+
+ {/* Sidebar */} + + + {/* Main content */} +
+
+

+ Profile Settings +

+

+ Manage your account information and preferences. +

+
+ + + +
+
+

Personal Information

+

+ Update your personal details and how we contact you. +

+
+ +
+
+ + +
+ +
+ + +
+
+ +
+ +
+
+ + + +
+
+

Preferences

+

+ Customize your experience with Laconic Deploy. +

+
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+ +
+
+
+
+
+ +
+
+

+ © {new Date().getFullYear()} Laconic Deploy. All rights reserved. +

+
+
+
+ ) +} diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/support/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/support/page.tsx new file mode 100644 index 0000000..bfb0692 --- /dev/null +++ b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/support/page.tsx @@ -0,0 +1,10 @@ +import { PageWrapper } from '@/components/foundation' +import SupportPlaceholder from './SupportPlaceholder' + +export default function SupportPage() { + return ( + + + + ) +} diff --git a/apps/deploy-fe/src/app/wallet/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/wallet/page.tsx similarity index 100% rename from apps/deploy-fe/src/app/wallet/page.tsx rename to apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/wallet/page.tsx diff --git a/apps/deploy-fe/src/components/foundation/coming-soon-overlay/ComingSoonOverlay.tsx b/apps/deploy-fe/src/components/foundation/coming-soon-overlay/ComingSoonOverlay.tsx new file mode 100644 index 0000000..b8545ee --- /dev/null +++ b/apps/deploy-fe/src/components/foundation/coming-soon-overlay/ComingSoonOverlay.tsx @@ -0,0 +1,32 @@ +import { Button } from '@workspace/ui/components/button' +import { Globe } from 'lucide-react' + +/** + * Coming Soon overlay component + * Displays a message indicating a feature is not yet available + * + * @param props.message - Optional custom message to display + * @param props.routerAction - Optional router action to perform when the button is clicked + */ +interface ComingSoonOverlayProps { + message?: string + routerAction?: () => void + buttonText?: string +} + +export function ComingSoonOverlay({ + message = 'This feature will be available in the next release.', + routerAction, + buttonText = 'Get Notified' +}: ComingSoonOverlayProps) { + return ( +
+
+ +

Coming Soon

+

{message}

+ {routerAction && } +
+
+ ) +} diff --git a/apps/deploy-fe/src/components/foundation/coming-soon-overlay/index.ts b/apps/deploy-fe/src/components/foundation/coming-soon-overlay/index.ts new file mode 100644 index 0000000..c6c0302 --- /dev/null +++ b/apps/deploy-fe/src/components/foundation/coming-soon-overlay/index.ts @@ -0,0 +1 @@ +export * from './ComingSoonOverlay' diff --git a/apps/deploy-fe/src/components/foundation/index.ts b/apps/deploy-fe/src/components/foundation/index.ts index 6c43abb..086b985 100644 --- a/apps/deploy-fe/src/components/foundation/index.ts +++ b/apps/deploy-fe/src/components/foundation/index.ts @@ -10,6 +10,7 @@ export * from './page-wrapper' export * from './navigation-wrapper' // Top Navigation +export * from './coming-soon-overlay' export * from './top-navigation/dark-mode-toggle' export * from './top-navigation/main-navigation' export * from './top-navigation/navigation-item' diff --git a/apps/deploy-fe/src/components/foundation/top-navigation/main-navigation/MainNavigation.tsx b/apps/deploy-fe/src/components/foundation/top-navigation/main-navigation/MainNavigation.tsx index 189399e..73d52d0 100644 --- a/apps/deploy-fe/src/components/foundation/top-navigation/main-navigation/MainNavigation.tsx +++ b/apps/deploy-fe/src/components/foundation/top-navigation/main-navigation/MainNavigation.tsx @@ -10,7 +10,7 @@ import { SheetTitle, SheetTrigger } from '@workspace/ui/components/sheet' -import { Menu } from 'lucide-react' +import { CreditCard, Menu, Shapes, WalletIcon } from 'lucide-react' import Link from 'next/link' import type React from 'react' import { DarkModeToggle } from '../dark-mode-toggle' @@ -201,8 +201,9 @@ export interface TopNavigationProps { export default function TopNavigation({ config = { leftItems: [ - { label: 'Projects', href: '/projects' }, - { label: 'Wallet', href: '/wallets' } + { icon: Shapes, label: 'Projects', href: '/projects' }, + { icon: WalletIcon, label: 'Wallet', href: '/wallet' }, + { icon: CreditCard, label: 'Purchase', href: '/purchase' } ], rightItems: [ { label: 'Support', href: '/support' }, diff --git a/apps/deploy-fe/src/components/foundation/top-navigation/navigation-item/NavigationItem.tsx b/apps/deploy-fe/src/components/foundation/top-navigation/navigation-item/NavigationItem.tsx index c982dd8..e464ab6 100644 --- a/apps/deploy-fe/src/components/foundation/top-navigation/navigation-item/NavigationItem.tsx +++ b/apps/deploy-fe/src/components/foundation/top-navigation/navigation-item/NavigationItem.tsx @@ -292,7 +292,7 @@ export function NavigationItem({ // For regular navigation items, use the Button component const content = ( <> - {Icon && } + {Icon && } {children} ) diff --git a/apps/deploy-fe/tsconfig.json b/apps/deploy-fe/tsconfig.json index c7216c8..ee85bff 100644 --- a/apps/deploy-fe/tsconfig.json +++ b/apps/deploy-fe/tsconfig.json @@ -3,12 +3,8 @@ "compilerOptions": { "baseUrl": ".", "paths": { - "@/*": [ - "./src/*" - ], - "@workspace/ui/*": [ - "../../services/ui/src/*" - ] + "@/*": ["./src/*"], + "@workspace/ui/*": ["../../services/ui/src/*"] }, "plugins": [ { @@ -20,15 +16,9 @@ "next-env.d.ts", "next.config.mjs", "src/**/*.ts", - "src/**/*.tsx" + "src/**/*.tsx", // ".next/types/**/*.ts" - , ".next/types/**/*.ts" ], - "exclude": [ - "node_modules", - ".next/*", - ".turbo/*", - ".vscode/*" - ] + "exclude": ["node_modules", ".next/*", ".turbo/*", ".vscode/*"] }