diff --git a/web/app/(todo-migrate-pages-to-app-router)/v2/page.tsx b/web/app/(todo-migrate-pages-to-app-router)/v2/page.tsx new file mode 100644 index 0000000..5b94244 --- /dev/null +++ b/web/app/(todo-migrate-pages-to-app-router)/v2/page.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +export default function page() { + return ( +
+ v2 +
+ ) +} diff --git a/web/app/customer-support/page.tsx b/web/app/customer-support/page.tsx new file mode 100644 index 0000000..452fb07 --- /dev/null +++ b/web/app/customer-support/page.tsx @@ -0,0 +1,25 @@ +import Link from 'next/link' +import React from 'react' + +export default function CustomerSupportPage() { + return ( +
+
+ {`<-- Go Back Home`} +
+ +
+ ) +} diff --git a/web/app/layout.tsx b/web/app/layout.tsx new file mode 100644 index 0000000..6a38fe9 --- /dev/null +++ b/web/app/layout.tsx @@ -0,0 +1,12 @@ +import { PropsWithChildren } from 'react' +import '@/styles/main.css' + +export default async function RootLayout({ children }: PropsWithChildren) { + return ( + + +
{children}
+ + + ) +} diff --git a/web/components.json b/web/components.json new file mode 100644 index 0000000..34d1db9 --- /dev/null +++ b/web/components.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "styles/main.css", + "baseColor": "gray", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + } +} \ No newline at end of file diff --git a/web/components/dashboard/APIKeyAndDevices.tsx b/web/components/dashboard/APIKeyAndDevices.tsx index 6f19d90..f89bf91 100644 --- a/web/components/dashboard/APIKeyAndDevices.tsx +++ b/web/components/dashboard/APIKeyAndDevices.tsx @@ -9,18 +9,18 @@ import GenerateApiKey from './GenerateApiKey' export default function APIKeyAndDevices() { return ( - - - - + + + + - + diff --git a/web/components/dashboard/GenerateApiKey.tsx b/web/components/dashboard/GenerateApiKey.tsx index c2a1060..a004739 100644 --- a/web/components/dashboard/GenerateApiKey.tsx +++ b/web/components/dashboard/GenerateApiKey.tsx @@ -119,7 +119,7 @@ export default function GenerateApiKey() { <> @@ -155,6 +155,10 @@ export default function GenerateApiKey() { {generatingApiKey ? 'loading... ' : 'Get Started'} {' '} + + Start sending SMS by clicking "Get Started" and scan the QR code or + paste the API Key in the TextBee Mobile App + {generatedApiKey && ( <> diff --git a/web/components/dashboard/UserStatsCard.tsx b/web/components/dashboard/UserStatsCard.tsx index 174fc70..16a0e08 100644 --- a/web/components/dashboard/UserStatsCard.tsx +++ b/web/components/dashboard/UserStatsCard.tsx @@ -14,7 +14,7 @@ export default function UserStatsCard({ ...props }) { py={'3'} shadow={'xl'} border={'1px solid'} - borderColor={useColorModeValue('gray.800', 'gray.500')} + borderColor={useColorModeValue('gray.300', 'gray.700')} rounded={'lg'} style={{ height: '90px', diff --git a/web/lib/utils.ts b/web/lib/utils.ts new file mode 100644 index 0000000..bd0c391 --- /dev/null +++ b/web/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/web/next-env.d.ts b/web/next-env.d.ts index 4f11a03..fd36f94 100644 --- a/web/next-env.d.ts +++ b/web/next-env.d.ts @@ -1,5 +1,6 @@ /// /// +/// // NOTE: This file should not be edited // see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/web/package.json b/web/package.json index d8a3aa2..6cc4d42 100644 --- a/web/package.json +++ b/web/package.json @@ -13,16 +13,22 @@ "@chakra-ui/react": "^2.8.2", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", + "@radix-ui/react-icons": "^1.3.0", "@react-oauth/google": "^0.12.1", "@reduxjs/toolkit": "^2.0.1", "axios": "^1.6.5", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.1", "framer-motion": "^10.18.0", + "lucide-react": "^0.453.0", "next": "14.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-qr-code": "^2.0.12", "react-redux": "^9.1.0", - "react-syntax-highlighter": "^15.5.0" + "react-syntax-highlighter": "^15.5.0", + "tailwind-merge": "^2.5.4", + "tailwindcss-animate": "^1.0.7" }, "engines": { "node": ">=18.17.0" @@ -33,8 +39,11 @@ "@types/react-dom": "18.2.18", "@typescript-eslint/eslint-plugin": "^6.19.0", "@typescript-eslint/parser": "^6.19.0", + "autoprefixer": "^10.4.20", "eslint": "8.56.0", "eslint-config-next": "14.1.0", + "postcss": "^8.4.47", + "tailwindcss": "^3.4.14", "typescript": "5.3.3" } } diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx index 41b04af..c5c967b 100644 --- a/web/pages/_app.tsx +++ b/web/pages/_app.tsx @@ -1,7 +1,7 @@ import type { AppProps } from 'next/app' import { Provider } from 'react-redux' import { store } from '../store/store' -import { Box, ChakraProvider } from '@chakra-ui/react' +import { Box, Button, ChakraProvider } from '@chakra-ui/react' import Meta from '../components/meta/Meta' import { GoogleOAuthProvider } from '@react-oauth/google' import ErrorBoundary from '../components/ErrorBoundary' @@ -29,6 +29,25 @@ function MyApp({ Component, pageProps }: AppProps) { + +
+ + + +