From 8594e3cf83c489303f1e54a4828b21b4268a9c38 Mon Sep 17 00:00:00 2001 From: Philix27 Date: Fri, 11 Oct 2024 00:09:14 +0100 Subject: [PATCH] feat: add web page app --- web/.eslintignore | 11 + web/.eslintrc.js | 35 + web/.gitignore | 39 + web/.lintstagedrc | 3 + web/.prettierignore | 9 + web/.prettierrc | 12 + web/README.md | 36 + web/app/(core)/_comps/InfoView.tsx | 34 + web/app/(core)/_comps/Search.tsx | 33 + web/app/(core)/_comps/Sidebar.tsx | 90 + web/app/(core)/_comps/index.ts | 3 + web/app/(core)/blogs/[slug]/page.tsx | 42 + web/app/(core)/blogs/md/about.mdx | 11 + web/app/(core)/blogs/md/faq.mdx | 11 + web/app/(core)/blogs/md/help.mdx | 11 + web/app/(core)/blogs/md/index.tsx | 47 + web/app/(core)/blogs/md/pp.mdx | 15 + web/app/(core)/blogs/md/tos.mdx | 31 + web/app/(core)/blogs/page.tsx | 54 + web/app/(core)/layout.tsx | 23 + web/app/(core)/search/data.ts | 44 + web/app/(core)/search/page.tsx | 56 + web/app/(home)/_comps/Nav.tsx | 84 + web/app/(home)/_comps/hero.tsx | 46 + web/app/(home)/_comps/heroC.tsx | 30 + web/app/(home)/_comps/heroWithImg.tsx | 31 + web/app/(home)/_comps/index.ts | 5 + web/app/(home)/_comps/jumbutron.tsx | 28 + web/app/(home)/index.tsx | 66 + web/app/(home)/layout.tsx | 14 + web/app/(home)/page.tsx | 189 + web/app/404.tsx | 5 + web/app/comps/Row.tsx | 60 + web/app/comps/Seperator.tsx | 20 + web/app/comps/Skeleton.tsx | 5 + web/app/comps/card.tsx | 39 + web/app/comps/custom/index.ts | 2 + web/app/comps/custom/textB.tsx | 23 + web/app/comps/custom/textH.tsx | 19 + web/app/comps/datePicker/Calender.tsx | 67 + web/app/comps/datePicker/DatePiker.tsx | 32 + web/app/comps/datePicker/PopOver.tsx | 33 + web/app/comps/forms/Button.tsx | 60 + web/app/comps/forms/Radial.tsx | 9 + web/app/comps/forms/TextInput.tsx | 80 + web/app/comps/forms/index.ts | 3 + web/app/comps/forms/select.tsx | 100 + web/app/comps/index.ts | 11 + web/app/comps/layout/BottomNav.tsx | 83 + web/app/comps/layout/BottomSheet.tsx | 43 + web/app/comps/layout/CoreWrapper.tsx | 48 + web/app/comps/layout/Dashboard.tsx | 28 + web/app/comps/layout/DissableZoom.tsx | 32 + web/app/comps/layout/Drawer/HomeDrawer.tsx | 28 + web/app/comps/layout/Drawer/InApp.tsx | 68 + web/app/comps/layout/Drawer/InfoContent.tsx | 40 + web/app/comps/layout/Drawer/Row.tsx | 17 + web/app/comps/layout/Drawer/index.tsx | 39 + web/app/comps/layout/Tabs.tsx | 27 + web/app/comps/layout/index.ts | 8 + web/app/comps/layout/navbar.tsx | 48 + web/app/comps/modal.tsx | 25 + web/app/comps/spinner.tsx | 39 + web/app/comps/table.tsx | 75 + web/app/comps/theme/index.ts | 3 + web/app/comps/theme/tailwind-indicator.tsx | 14 + web/app/comps/theme/theme-provider.tsx | 9 + web/app/comps/theme/theme-toggle.tsx | 21 + web/app/error.tsx | 20 + web/app/globals.css | 125 + web/app/globals.d.ts | 18 + web/app/index.d.ts | 3 + web/app/layout.tsx | 118 + web/app/lib/app/AppImg.ts | 51 + web/app/lib/app/AppPages.ts | 5 + web/app/lib/app/fonts.ts | 18 + web/app/lib/app/index.ts | 3 + web/app/lib/cn.ts | 6 + web/app/lib/consts/index.ts | 1 + web/app/lib/consts/links.ts | 7 + web/app/lib/contexts/index.ts | 1 + web/app/lib/contexts/providers.tsx | 52 + web/app/lib/helpers/format.ts | 3 + web/app/lib/helpers/index.ts | 6 + web/app/lib/helpers/time.ts | 20 + web/app/lib/hooks/debounce.ts | 19 + web/app/lib/hooks/index.ts | 6 + web/app/lib/hooks/ssr.ts | 11 + web/app/lib/hooks/timeout.ts | 91 + web/app/lib/hooks/useRouter.ts | 31 + web/app/lib/hooks/useTheme.ts | 19 + web/app/lib/hooks/useWindowSize.ts | 25 + web/app/lib/import.tsx | 7 + web/app/lib/index.ts | 8 + web/app/lib/statusBarMeta.tsx | 8 + web/app/lib/zustand/index.ts | 5 + web/app/lib/zustand/settings.ts | 41 + web/app/loading.tsx | 12 + web/app/log.ts | 9 + web/app/not-found.tsx | 17 + web/app/styles/index.css | 3 + web/app/styles/mixins.css | 72 + web/app/styles/normalize.css | 392 ++ web/app/styles/vars.css | 59 + web/app/template.tsx | 15 + web/mdx-components.tsx | 10 + web/next.config.mjs | 73 + web/package.json | 82 + web/postcss.config.js | 6 + web/prettier.config.js | 32 + web/public/favicon.ico | Bin 0 -> 25931 bytes web/public/icons/android-chrome-192x192.png | Bin 0 -> 7257 bytes web/public/icons/android-chrome-384x384.png | Bin 0 -> 15914 bytes web/public/icons/apple-touch-icon.png | Bin 0 -> 24155 bytes web/public/icons/icon-512x512.png | Bin 0 -> 25504 bytes web/public/icons/icon.png | Bin 0 -> 156548 bytes web/public/logo.png | Bin 0 -> 7257 bytes web/public/next.svg | 1 + web/public/support.png | Bin 0 -> 97352 bytes web/public/vercel.svg | 1 + web/tailwind.config.js | 80 + web/tsconfig.json | 48 + web/types/mdx.d.ts | 5 + web/webpack.config.js | 10 + web/yarn.lock | 6063 +++++++++++++++++++ 125 files changed, 10124 insertions(+) create mode 100644 web/.eslintignore create mode 100644 web/.eslintrc.js create mode 100644 web/.gitignore create mode 100644 web/.lintstagedrc create mode 100644 web/.prettierignore create mode 100644 web/.prettierrc create mode 100644 web/README.md create mode 100644 web/app/(core)/_comps/InfoView.tsx create mode 100644 web/app/(core)/_comps/Search.tsx create mode 100644 web/app/(core)/_comps/Sidebar.tsx create mode 100644 web/app/(core)/_comps/index.ts create mode 100644 web/app/(core)/blogs/[slug]/page.tsx create mode 100644 web/app/(core)/blogs/md/about.mdx create mode 100644 web/app/(core)/blogs/md/faq.mdx create mode 100644 web/app/(core)/blogs/md/help.mdx create mode 100644 web/app/(core)/blogs/md/index.tsx create mode 100644 web/app/(core)/blogs/md/pp.mdx create mode 100644 web/app/(core)/blogs/md/tos.mdx create mode 100644 web/app/(core)/blogs/page.tsx create mode 100644 web/app/(core)/layout.tsx create mode 100644 web/app/(core)/search/data.ts create mode 100644 web/app/(core)/search/page.tsx create mode 100644 web/app/(home)/_comps/Nav.tsx create mode 100644 web/app/(home)/_comps/hero.tsx create mode 100644 web/app/(home)/_comps/heroC.tsx create mode 100644 web/app/(home)/_comps/heroWithImg.tsx create mode 100644 web/app/(home)/_comps/index.ts create mode 100644 web/app/(home)/_comps/jumbutron.tsx create mode 100644 web/app/(home)/index.tsx create mode 100644 web/app/(home)/layout.tsx create mode 100644 web/app/(home)/page.tsx create mode 100755 web/app/404.tsx create mode 100644 web/app/comps/Row.tsx create mode 100644 web/app/comps/Seperator.tsx create mode 100644 web/app/comps/Skeleton.tsx create mode 100644 web/app/comps/card.tsx create mode 100755 web/app/comps/custom/index.ts create mode 100755 web/app/comps/custom/textB.tsx create mode 100755 web/app/comps/custom/textH.tsx create mode 100644 web/app/comps/datePicker/Calender.tsx create mode 100644 web/app/comps/datePicker/DatePiker.tsx create mode 100644 web/app/comps/datePicker/PopOver.tsx create mode 100644 web/app/comps/forms/Button.tsx create mode 100644 web/app/comps/forms/Radial.tsx create mode 100755 web/app/comps/forms/TextInput.tsx create mode 100755 web/app/comps/forms/index.ts create mode 100644 web/app/comps/forms/select.tsx create mode 100644 web/app/comps/index.ts create mode 100644 web/app/comps/layout/BottomNav.tsx create mode 100644 web/app/comps/layout/BottomSheet.tsx create mode 100644 web/app/comps/layout/CoreWrapper.tsx create mode 100644 web/app/comps/layout/Dashboard.tsx create mode 100644 web/app/comps/layout/DissableZoom.tsx create mode 100644 web/app/comps/layout/Drawer/HomeDrawer.tsx create mode 100644 web/app/comps/layout/Drawer/InApp.tsx create mode 100644 web/app/comps/layout/Drawer/InfoContent.tsx create mode 100644 web/app/comps/layout/Drawer/Row.tsx create mode 100644 web/app/comps/layout/Drawer/index.tsx create mode 100644 web/app/comps/layout/Tabs.tsx create mode 100644 web/app/comps/layout/index.ts create mode 100644 web/app/comps/layout/navbar.tsx create mode 100644 web/app/comps/modal.tsx create mode 100644 web/app/comps/spinner.tsx create mode 100644 web/app/comps/table.tsx create mode 100755 web/app/comps/theme/index.ts create mode 100755 web/app/comps/theme/tailwind-indicator.tsx create mode 100755 web/app/comps/theme/theme-provider.tsx create mode 100755 web/app/comps/theme/theme-toggle.tsx create mode 100755 web/app/error.tsx create mode 100644 web/app/globals.css create mode 100644 web/app/globals.d.ts create mode 100644 web/app/index.d.ts create mode 100644 web/app/layout.tsx create mode 100644 web/app/lib/app/AppImg.ts create mode 100644 web/app/lib/app/AppPages.ts create mode 100644 web/app/lib/app/fonts.ts create mode 100644 web/app/lib/app/index.ts create mode 100755 web/app/lib/cn.ts create mode 100644 web/app/lib/consts/index.ts create mode 100644 web/app/lib/consts/links.ts create mode 100644 web/app/lib/contexts/index.ts create mode 100644 web/app/lib/contexts/providers.tsx create mode 100644 web/app/lib/helpers/format.ts create mode 100644 web/app/lib/helpers/index.ts create mode 100644 web/app/lib/helpers/time.ts create mode 100644 web/app/lib/hooks/debounce.ts create mode 100644 web/app/lib/hooks/index.ts create mode 100644 web/app/lib/hooks/ssr.ts create mode 100644 web/app/lib/hooks/timeout.ts create mode 100644 web/app/lib/hooks/useRouter.ts create mode 100644 web/app/lib/hooks/useTheme.ts create mode 100644 web/app/lib/hooks/useWindowSize.ts create mode 100644 web/app/lib/import.tsx create mode 100644 web/app/lib/index.ts create mode 100644 web/app/lib/statusBarMeta.tsx create mode 100755 web/app/lib/zustand/index.ts create mode 100755 web/app/lib/zustand/settings.ts create mode 100755 web/app/loading.tsx create mode 100644 web/app/log.ts create mode 100755 web/app/not-found.tsx create mode 100644 web/app/styles/index.css create mode 100644 web/app/styles/mixins.css create mode 100644 web/app/styles/normalize.css create mode 100644 web/app/styles/vars.css create mode 100755 web/app/template.tsx create mode 100644 web/mdx-components.tsx create mode 100644 web/next.config.mjs create mode 100644 web/package.json create mode 100644 web/postcss.config.js create mode 100755 web/prettier.config.js create mode 100755 web/public/favicon.ico create mode 100644 web/public/icons/android-chrome-192x192.png create mode 100644 web/public/icons/android-chrome-384x384.png create mode 100644 web/public/icons/apple-touch-icon.png create mode 100644 web/public/icons/icon-512x512.png create mode 100644 web/public/icons/icon.png create mode 100644 web/public/logo.png create mode 100755 web/public/next.svg create mode 100644 web/public/support.png create mode 100755 web/public/vercel.svg create mode 100755 web/tailwind.config.js create mode 100644 web/tsconfig.json create mode 100644 web/types/mdx.d.ts create mode 100644 web/webpack.config.js create mode 100644 web/yarn.lock diff --git a/web/.eslintignore b/web/.eslintignore new file mode 100644 index 0000000..a693671 --- /dev/null +++ b/web/.eslintignore @@ -0,0 +1,11 @@ +node_modules +src/vendor +dist +.next +webpack.config.js +jest.config.js +tailwind.config.js +postcss.config.js +next.config.mjs +setupTests.ts +scripts \ No newline at end of file diff --git a/web/.eslintrc.js b/web/.eslintrc.js new file mode 100644 index 0000000..c6c592a --- /dev/null +++ b/web/.eslintrc.js @@ -0,0 +1,35 @@ +/** @type {import("eslint").Linter.Config} */ +module.exports = { + root: true, + extends: [ + '@repo/eslint-config/next.js', + 'xmtp-web', + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'next', + 'next/core-web-vitals', + 'prettier', + ], + plugins: ['@typescript-eslint'], + parser: '@typescript-eslint/parser', + parserOptions: { + project: true, + }, + rules: { + 'react/function-component-definition': 'off', + // '@typescript-eslint/ban-ts-comment': ['off'], + // '@typescript-eslint/explicit-module-boundary-types': ['off'], + // '@typescript-eslint/no-explicit-any': ['off'], + // '@typescript-eslint/no-floating-promises': ['error'], + // '@typescript-eslint/no-non-null-assertion': ['off'], + // '@typescript-eslint/no-require-imports': ['warn'], + // '@typescript-eslint/no-unused-vars': ['error'], + // 'import/no-self-import': ['error'], + // 'import/no-duplicates': ['error'], + // 'jsx-a11y/alt-text': ['off'], + // 'no-console': ['warn'], + // 'no-eval': ['error'], + // 'no-ex-assign': ['error'], + // 'no-constant-condition': ['off'], + }, +}; diff --git a/web/.gitignore b/web/.gitignore new file mode 100644 index 0000000..517fd7f --- /dev/null +++ b/web/.gitignore @@ -0,0 +1,39 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +/z +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# env files (can opt-in for commiting if needed) +.env* +(xmtp) +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +# Sentry Config File +.env.sentry-build-plugin diff --git a/web/.lintstagedrc b/web/.lintstagedrc new file mode 100644 index 0000000..5036f53 --- /dev/null +++ b/web/.lintstagedrc @@ -0,0 +1,3 @@ +{ + "**/*.{ts,tsx,json}": ["prettier --write"] +} diff --git a/web/.prettierignore b/web/.prettierignore new file mode 100644 index 0000000..e872e03 --- /dev/null +++ b/web/.prettierignore @@ -0,0 +1,9 @@ +node_modules + +build + +dist + +.turbo + + diff --git a/web/.prettierrc b/web/.prettierrc new file mode 100644 index 0000000..6d73c51 --- /dev/null +++ b/web/.prettierrc @@ -0,0 +1,12 @@ +{ + "singleQuote": true, + "printWidth": 120, + "bracketSpacing": true, + "tabWidth": 2, + "trailingComma": "es5", + "semi": true, + "arrowParens": "always", + "importOrder": ["^../(.*)$", "^./(.*)$"], + "importOrderSeparation": true, + "importOrderSortSpecifiers": true +} diff --git a/web/README.md b/web/README.md new file mode 100644 index 0000000..a98bfa8 --- /dev/null +++ b/web/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/web/app/(core)/_comps/InfoView.tsx b/web/app/(core)/_comps/InfoView.tsx new file mode 100644 index 0000000..a064289 --- /dev/null +++ b/web/app/(core)/_comps/InfoView.tsx @@ -0,0 +1,34 @@ +'use client'; +import { AppStores } from '@/lib'; +import { motion } from 'framer-motion'; +import React from 'react'; +import { TextH, TextP } from '@/comps'; + +export function InfoView() { + const store = AppStores.useSettings(); + + return ( +
+
{ + store.update({ infoTabOpen: false }); + }} + /> + +
+ Heading... + Paragraph... + Paragraph... + Paragraph... +
+ +
+ ); +} diff --git a/web/app/(core)/_comps/Search.tsx b/web/app/(core)/_comps/Search.tsx new file mode 100644 index 0000000..491210d --- /dev/null +++ b/web/app/(core)/_comps/Search.tsx @@ -0,0 +1,33 @@ +import { AppStores, cn } from '@/lib'; +import { BsSearch } from 'react-icons/bs'; + +export function SearchInput(props: { className?: string; onClick?: (e: string) => void }) { + const store = AppStores.useSettings(); + + return ( +
+ { + store.update({ searchValue: e.target.value }); + }} + /> + +
{ + if (props.onClick) { + props.onClick(store.searchValue); + } + }} + > + +
+
+ ); +} diff --git a/web/app/(core)/_comps/Sidebar.tsx b/web/app/(core)/_comps/Sidebar.tsx new file mode 100644 index 0000000..b278aac --- /dev/null +++ b/web/app/(core)/_comps/Sidebar.tsx @@ -0,0 +1,90 @@ +'use client'; +import { TextH, TextP } from '@/comps'; +import { cn } from '@/lib'; +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; +import React from 'react'; +import { IconType } from 'react-icons'; +import { BiHome, BiLink } from 'react-icons/bi'; +import { BsBank, BsTools } from 'react-icons/bs'; +import { FaFileInvoice } from 'react-icons/fa'; +import { GrGroup } from 'react-icons/gr'; + +export function AdminSidebar() { + const pathname = usePathname(); + + const checkActive = (val: string): boolean => { + if (pathname === '/admin') { + return true; + } + + return pathname === val; + }; + + return ( +
+ {/*
+ Gasonomy +
*/} + {data.map((val, i) => { + const { Icon } = val; + return ( + +
+ + {val.title} +
+ + ); + })} +
+ ); +} + +const data: { + title: string; + link: string; + Icon: IconType; +}[] = [ + { + title: 'Home', + link: '/admin', + Icon: BiHome, + }, + { + title: 'All', + link: '/search/airtime', + Icon: GrGroup, + }, + { + title: 'Blockchains', + link: '/search/withdraw', + Icon: BiLink, + }, + { + title: 'RPC', + link: '/search/logs', + Icon: FaFileInvoice, + }, + { + title: 'Tooling', + link: '/search/support', + Icon: BsTools, + }, + { + title: 'Subsystems', + link: '/search/credit_bank', + Icon: BsBank, + }, + { + title: 'Packages', + link: '/search/credit_crypto', + Icon: BiHome, + }, +]; diff --git a/web/app/(core)/_comps/index.ts b/web/app/(core)/_comps/index.ts new file mode 100644 index 0000000..d53bb5c --- /dev/null +++ b/web/app/(core)/_comps/index.ts @@ -0,0 +1,3 @@ +export * from "./Sidebar" +export * from "./InfoView" +export * from "./Search" \ No newline at end of file diff --git a/web/app/(core)/blogs/[slug]/page.tsx b/web/app/(core)/blogs/[slug]/page.tsx new file mode 100644 index 0000000..ee147db --- /dev/null +++ b/web/app/(core)/blogs/[slug]/page.tsx @@ -0,0 +1,42 @@ +'use client'; +import React from 'react'; +import { AppDocs } from '../md'; +import { Navbar, TextP } from '@/comps'; + +export default function DocsPage({ params }: { params: { slug: string } }) { + const doc = AppDocs.filter((v) => v.key === params.slug)[0]; + + if (!doc) { + return ( +
+ +
+ No document found +
+
+ ); + } + return ( + <> + +
+ {doc.MdDoc} +
+ + ); +} diff --git a/web/app/(core)/blogs/md/about.mdx b/web/app/(core)/blogs/md/about.mdx new file mode 100644 index 0000000..1dcc1b8 --- /dev/null +++ b/web/app/(core)/blogs/md/about.mdx @@ -0,0 +1,11 @@ +# About Us + +There were three +camps that dominated the psychology of gender and that vocally opposed the +application of evolutionary theory: social constructionism, cognitive learning +theories, and social role theory. + +### Social constructionists + +This school of thought claim that gender +is perpetrated and main- diff --git a/web/app/(core)/blogs/md/faq.mdx b/web/app/(core)/blogs/md/faq.mdx new file mode 100644 index 0000000..0e028ea --- /dev/null +++ b/web/app/(core)/blogs/md/faq.mdx @@ -0,0 +1,11 @@ +# Frequently Asked Questions + +There were three +camps that dominated the psychology of gender and that vocally opposed the +application of evolutionary theory: social constructionism, cognitive learning +theories, and social role theory. + +### Social constructionists + +This school of thought claim that gender +is perpetrated and main- diff --git a/web/app/(core)/blogs/md/help.mdx b/web/app/(core)/blogs/md/help.mdx new file mode 100644 index 0000000..7c6a64b --- /dev/null +++ b/web/app/(core)/blogs/md/help.mdx @@ -0,0 +1,11 @@ +# Help + +There were three +camps that dominated the psychology of gender and that vocally opposed the +application of evolutionary theory: social constructionism, cognitive learning +theories, and social role theory. + +### Social constructionists + +This school of thought claim that gender +is perpetrated and main- diff --git a/web/app/(core)/blogs/md/index.tsx b/web/app/(core)/blogs/md/index.tsx new file mode 100644 index 0000000..193e282 --- /dev/null +++ b/web/app/(core)/blogs/md/index.tsx @@ -0,0 +1,47 @@ +'use client'; +import PrivacyPolicy from './pp.mdx'; +import TOS from './tos.mdx'; +import About from './about.mdx'; +import Help from './help.mdx'; +import Faq from './faq.mdx'; + +export type IDocs = 'TOS' | 'PP' | 'HELP' | 'ABOUT' | 'FAQ'; +export interface IProps { + title: string; + key: IDocs; + last_edit: string; + MdDoc: JSX.Element; +} + +export const AppDocs: Array = [ + { + title: 'Privacy Policy', + last_edit: '15th November, 2023', + MdDoc: , + key: 'PP', + }, + { + title: 'Terms of service', + last_edit: '15th November, 2023', + MdDoc: , + key: 'TOS', + }, + { + title: 'About Us', + last_edit: '15th November, 2023', + key: 'ABOUT', + MdDoc: , + }, + { + title: 'Help', + last_edit: '15th November, 2023', + key: 'HELP', + MdDoc: , + }, + { + title: 'FAQ', + last_edit: '15th November, 2023', + key: 'FAQ', + MdDoc: , + }, +]; diff --git a/web/app/(core)/blogs/md/pp.mdx b/web/app/(core)/blogs/md/pp.mdx new file mode 100644 index 0000000..de50565 --- /dev/null +++ b/web/app/(core)/blogs/md/pp.mdx @@ -0,0 +1,15 @@ +# Privacy Policy + +Notification systems is the live of modern day a application. Proper implementation +of a notification service will go a long way to determine the success of a business. + +--- + +Fintech applications are + +### Structure + +- API request +- Load Balancer +- A rate limiter: Prevent unncessary request. +- API Gateway diff --git a/web/app/(core)/blogs/md/tos.mdx b/web/app/(core)/blogs/md/tos.mdx new file mode 100644 index 0000000..b6bd767 --- /dev/null +++ b/web/app/(core)/blogs/md/tos.mdx @@ -0,0 +1,31 @@ +# Terms of service + +Why is more important that how. +Why every decision was made. + +Everything is software architecture is a tradeoff. +Look for a less worse alternative. + +Primary Goals for this software. + +## Feedback + +### Reasons for + +- Sustainability +- Maintainability +- Accountability +- Scalability +- Perfomance +- Rapid Change +- Identifying key priority + +There are no best practices + +- What do you want? +- + +Explain architecture in business terms that the customer would understand. + +- managing data +- challenging things - how to handle data esp. for microservices. The database diff --git a/web/app/(core)/blogs/page.tsx b/web/app/(core)/blogs/page.tsx new file mode 100644 index 0000000..2b5e843 --- /dev/null +++ b/web/app/(core)/blogs/page.tsx @@ -0,0 +1,54 @@ +'use client'; +import { Navbar, Row } from '@/comps'; +import { useRouter } from 'next/navigation'; +import React from 'react'; +import { BiGroup, BiLock, BiReceipt } from 'react-icons/bi'; +import { IoHelp } from 'react-icons/io5'; + +export default function HelpDocPage() { + const router = useRouter(); + return ( +
+ +
+ { + // router.push('/docs'); + router.push('/docs/FAQ'); + }} + /> + { + router.push('/docs/ABOUT'); + }} + /> + { + router.push('/docs/PP'); + }} + /> + { + router.push('/docs/TOS'); + }} + /> +
+
+ ); +} diff --git a/web/app/(core)/layout.tsx b/web/app/(core)/layout.tsx new file mode 100644 index 0000000..12479a1 --- /dev/null +++ b/web/app/(core)/layout.tsx @@ -0,0 +1,23 @@ +'use client'; +import { ReactNode } from 'react'; +import { AdminSidebar } from './_comps'; +import { CoreLayoutWrapper, Drawer } from '@/comps'; +import { NavbarMarketing } from '@/(home)/_comps'; +import { AppStores } from '@/lib'; +import { InfoView } from './_comps/InfoView'; + +export default function AdminLayout(props: { children: ReactNode }) { + // return {props.children}; + const store = AppStores.useSettings(); + return ( + + + {store.drawerIsOpen && } +
+ {store.sidebarOpen && } +
{props.children}
+ {store.infoTabOpen && } +
+ + ); +} diff --git a/web/app/(core)/search/data.ts b/web/app/(core)/search/data.ts new file mode 100644 index 0000000..a006764 --- /dev/null +++ b/web/app/(core)/search/data.ts @@ -0,0 +1,44 @@ +export const invoices = [ + { + invoice: 'INV001', + paymentStatus: 'Paid', + totalAmount: '$250.00', + paymentMethod: 'Credit Card', + }, + { + invoice: 'INV002', + paymentStatus: 'Pending', + totalAmount: '$150.00', + paymentMethod: 'PayPal', + }, + { + invoice: 'INV003', + paymentStatus: 'Unpaid', + totalAmount: '$350.00', + paymentMethod: 'Bank Transfer', + }, + { + invoice: 'INV004', + paymentStatus: 'Paid', + totalAmount: '$450.00', + paymentMethod: 'Credit Card', + }, + { + invoice: 'INV005', + paymentStatus: 'Paid', + totalAmount: '$550.00', + paymentMethod: 'PayPal', + }, + { + invoice: 'INV006', + paymentStatus: 'Pending', + totalAmount: '$200.00', + paymentMethod: 'Bank Transfer', + }, + { + invoice: 'INV007', + paymentStatus: 'Unpaid', + totalAmount: '$300.00', + paymentMethod: 'Credit Card', + }, +]; diff --git a/web/app/(core)/search/page.tsx b/web/app/(core)/search/page.tsx new file mode 100644 index 0000000..88a4378 --- /dev/null +++ b/web/app/(core)/search/page.tsx @@ -0,0 +1,56 @@ +'use client'; + +import React from 'react'; +import { TextP } from '@/comps'; +import { AppStores } from '@/lib'; +import { SearchInput } from '../_comps'; +import { chainRegistry } from '@/data'; + +export default function Page() { + const store = AppStores.useSettings(); + + const getList = () => { + if (!store.searchValue.trim()) { + return chainRegistry; + } + + const arr = chainRegistry.filter((val) => + val.name.trim().toLowerCase().includes(store.searchValue.trim().toLowerCase()) + ); + + if (!arr.length) { + return chainRegistry; + } + return arr; + }; + + return ( + <> +
+ {/*
*/} + + {/*
*/} +
+ img + Name + Desc + Layers +
+ {getList().map((val, i) => ( +
{ + store.update({ infoTabOpen: true, drawerIsOpen: false }); + }} + > + + {val.name} + {val.shortIntro} + {val.layers} +
+ ))} +
+ + ); +} diff --git a/web/app/(home)/_comps/Nav.tsx b/web/app/(home)/_comps/Nav.tsx new file mode 100644 index 0000000..e2b3811 --- /dev/null +++ b/web/app/(home)/_comps/Nav.tsx @@ -0,0 +1,84 @@ +'use client'; + +import Link from 'next/link'; + +import { Drawer, TextH } from '@/comps'; +import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai'; +import { useRouter } from 'next/navigation'; +import { AppStores } from '@/lib'; +import { GoSidebarCollapse, GoSidebarExpand } from 'react-icons/go'; +import { BiFilter } from 'react-icons/bi'; +import { LuFilterX } from 'react-icons/lu'; + +export interface MainNavProps { + title: string; +} + +export function NavbarMarketing(props: MainNavProps) { + const router = useRouter(); + const store = AppStores.useSettings(); + + return ( + //
+
+
+
+ + + {props.title} + + +
+ +
+ {store.drawerIsOpen ? ( + { + store.update({ drawerIsOpen: false }); + }} + /> + ) : ( + { + store.update({ drawerIsOpen: true }); + }} + /> + )} + {store.infoTabOpen ? ( + { + store.update({ infoTabOpen: false }); + }} + /> + ) : ( + { + store.update({ infoTabOpen: true }); + }} + /> + )} + + {store.sidebarOpen ? ( + { + store.update({ sidebarOpen: false }); + }} + /> + ) : ( + { + store.update({ sidebarOpen: true }); + }} + /> + )} +
+
+
+ ); +} diff --git a/web/app/(home)/_comps/hero.tsx b/web/app/(home)/_comps/hero.tsx new file mode 100644 index 0000000..03c97b6 --- /dev/null +++ b/web/app/(home)/_comps/hero.tsx @@ -0,0 +1,46 @@ +'use client'; + +import React from 'react'; +import { TextH, TextP } from '@/comps'; + +export function HeroSection(props: { title: string; subtitle: string; img: string; imgFirst?: boolean }) { + return ( +
+
+ {props.imgFirst ? ( + <> +
+ +
+ + + ) : ( + <> + +
+ +
+ + )} +
+
+ ); +} +function TextBlock(props: { title: string; subtitle: string; img: string; imgFirst?: boolean }) { + return ( +
+ {props.title} +
+ + {props.subtitle} + +
+ ); +} diff --git a/web/app/(home)/_comps/heroC.tsx b/web/app/(home)/_comps/heroC.tsx new file mode 100644 index 0000000..41f41d3 --- /dev/null +++ b/web/app/(home)/_comps/heroC.tsx @@ -0,0 +1,30 @@ +'use client'; + +import { TextH, TextP } from '@/comps'; +import { cn } from '@/lib'; +import React, { ReactNode } from 'react'; + +export function HeroCenter(props: { children: ReactNode; className?: string }) { + return ( +
+
+
+ {props.children} +
+
+
+ ); +} diff --git a/web/app/(home)/_comps/heroWithImg.tsx b/web/app/(home)/_comps/heroWithImg.tsx new file mode 100644 index 0000000..5a0b88b --- /dev/null +++ b/web/app/(home)/_comps/heroWithImg.tsx @@ -0,0 +1,31 @@ +'use client'; + +import { cn } from '@/lib'; +import React, { ReactNode } from 'react'; + +export function HeroWithImg(props: { children: ReactNode; img: string; className?: string }) { + return ( +
+
+
+ {props.children} +
+
+ +
+
+
+ ); +} diff --git a/web/app/(home)/_comps/index.ts b/web/app/(home)/_comps/index.ts new file mode 100644 index 0000000..db31551 --- /dev/null +++ b/web/app/(home)/_comps/index.ts @@ -0,0 +1,5 @@ +export * from './heroC'; +export * from './jumbutron'; +export * from './hero'; +export * from './Nav'; +export * from './heroWithImg'; diff --git a/web/app/(home)/_comps/jumbutron.tsx b/web/app/(home)/_comps/jumbutron.tsx new file mode 100644 index 0000000..cbc2629 --- /dev/null +++ b/web/app/(home)/_comps/jumbutron.tsx @@ -0,0 +1,28 @@ +'use client'; + +import React from 'react'; +import { TextH, TextP } from '@/comps'; + +export function JumbutronSection(props: { title: string; subtitle: string }) { + return ( +
+
+
+ + {props.title} + + + {props.subtitle} + +
+
+
+ ); +} diff --git a/web/app/(home)/index.tsx b/web/app/(home)/index.tsx new file mode 100644 index 0000000..40f80a0 --- /dev/null +++ b/web/app/(home)/index.tsx @@ -0,0 +1,66 @@ +'use client'; + +import React from 'react'; +import { TextP } from '@/comps'; +import { cn, useAppRouter } from '@/lib'; +import { BsSearch } from 'react-icons/bs'; +import Link from 'next/link'; + +export function HomeSection() { + const router = useAppRouter(); + + return ( +
+
+
+ + +
+ +
+ +
+
+ {tags.map((val, i) => ( +
+ {val.title} +
+ ))} +
+
+
+ ); +} + +const tags: { + title: string; + bg: string; +}[] = [ + { + title: 'Blockchains', + bg: 'bg-orange-500', + }, + { + title: 'Subsystems', + bg: 'bg-purple-500', + }, + { + title: 'RPC Providers', + bg: 'bg-blue-500', + }, + { + title: 'Auth Providers', + bg: 'bg-blue-500', + }, + { + title: 'Toolings', + bg: 'bg-blue-500', + }, +]; diff --git a/web/app/(home)/layout.tsx b/web/app/(home)/layout.tsx new file mode 100644 index 0000000..6442bde --- /dev/null +++ b/web/app/(home)/layout.tsx @@ -0,0 +1,14 @@ +'use client'; +import React, { ReactNode, useEffect } from 'react'; +import { NavbarMarketing } from './_comps/Nav'; +import { DisableZoom } from '@/comps'; + +export default function Layout(props: { children: ReactNode }) { + return ( +
+ + +
{props.children}
+
+ ); +} diff --git a/web/app/(home)/page.tsx b/web/app/(home)/page.tsx new file mode 100644 index 0000000..452956e --- /dev/null +++ b/web/app/(home)/page.tsx @@ -0,0 +1,189 @@ +'use client'; + +import React from 'react'; +import { TextH, TextP } from '@/comps'; +import { cn, useAppRouter } from '@/lib'; +import { SearchInput } from '@/(core)/_comps'; +import { HeroSection, JumbutronSection } from './_comps'; + +export default function Home() { + const router = useAppRouter(); + + return ( + <> + + + {Hero()} + {Cards()} + {ContentBlock()} + {ContentBlock()} + + {MobileBanner()} + {Footer()} + + ); +} + +const tags: { + title: string; + bg: string; +}[] = [ + { + title: 'Blockchains', + bg: 'bg-orange-500', + }, + { + title: 'Subsystems', + bg: 'bg-purple-500', + }, + { + title: 'RPC Providers', + bg: 'bg-blue-500', + }, + { + title: 'Auth Providers', + bg: 'bg-blue-500', + }, + { + title: 'Toolings', + bg: 'bg-blue-500', + }, +]; +function Goals() { + return ( +
+
+
+

A whole world of crypto, in one simple account.

+
+
+ Best selling +
+
+
+
+ ); +} +function Testimonial() { + return ( +
+
+
+

A whole world of crypto, in one simple account.

+
+
+ Best selling +
+
+
+
+ ); +} +function Jumbutron() { + return ( +
+
+
+

A whole world of crypto, in one simple account.

+
+
+ Best selling +
+
+
+
+ ); +} +function NumbersCount() { + return ( +
+
+
+

A whole world of crypto, in one simple account.

+
+
+ Best selling +
+
+
+
+ ); +} +function MobileBanner() { + return ( +
+
+
+

A whole world of crypto, in one simple account.

+
+
+ Best selling +
+
+
+
+ ); +} + +function ContentBlock() { + return ( +
+
+
+

A whole world of crypto, in one simple account.

+
+
+ Best selling +
+
+
+
+ ); +} + +function Footer() { + return ( +
+
+
+

A whole world of crypto, in one simple account.

+
+
+ Best selling +
+
+
+
+ ); +} + +function Cards() { + return ( +
+
+
+

A whole world of crypto, in one simple account.

+
+
+ Best selling +
+
+
+
+ ); +} + +function Hero() { + return ( +
+
+
+

A whole world of crypto, in one simple account.

+
+
+ Best selling +
+
+
+ ); +} diff --git a/web/app/404.tsx b/web/app/404.tsx new file mode 100755 index 0000000..482c454 --- /dev/null +++ b/web/app/404.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export default function Page404() { + return
404 Page
; +} diff --git a/web/app/comps/Row.tsx b/web/app/comps/Row.tsx new file mode 100644 index 0000000..f2f7b37 --- /dev/null +++ b/web/app/comps/Row.tsx @@ -0,0 +1,60 @@ +'use client'; +import { cn } from '@/lib'; +import { IconType } from 'react-icons'; +import { LuChevronRight } from 'react-icons/lu'; +import { TextH, TextP } from './custom'; + +export type IRow = { + title: string; + subtitle?: string; + Icon?: IconType; + imgPath?: string; + imgComp?: JSX.Element; + color?: string; + trailingText?: string; + trailingComp?: JSX.Element; + onClick?: VoidFunction; + hideArrow?: boolean; + isLast?: boolean; +}; +export function Row(props: IRow) { + const { Icon } = props; + return ( +
+
+ {Icon && } + {props.imgPath && } + {props.imgComp && props.imgComp} + +
+ + {props.title} + + {props.subtitle && {props.subtitle}} +
+
+ {props.trailingText ? ( + {props.trailingText} + ) : ( + props.trailingComp && props.trailingComp + )} + {!props.hideArrow && } +
+ ); +} + +export function SimpleRow(props: { left: string; right: string; color?: string; isLast?: boolean }) { + return ( +
+ {props.left} + {props.right} +
+ ); +} diff --git a/web/app/comps/Seperator.tsx b/web/app/comps/Seperator.tsx new file mode 100644 index 0000000..c085494 --- /dev/null +++ b/web/app/comps/Seperator.tsx @@ -0,0 +1,20 @@ +'use client'; + +import * as React from 'react'; +import * as SeparatorPrimitive from '@radix-ui/react-separator'; + +import { cn } from '@/lib'; + +export const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => ( + +)); +Separator.displayName = SeparatorPrimitive.Root.displayName; diff --git a/web/app/comps/Skeleton.tsx b/web/app/comps/Skeleton.tsx new file mode 100644 index 0000000..0f81911 --- /dev/null +++ b/web/app/comps/Skeleton.tsx @@ -0,0 +1,5 @@ +import { cn } from '@/lib'; + +export function Skeleton({ className, ...props }: React.HTMLAttributes) { + return
; +} diff --git a/web/app/comps/card.tsx b/web/app/comps/card.tsx new file mode 100644 index 0000000..3987f9f --- /dev/null +++ b/web/app/comps/card.tsx @@ -0,0 +1,39 @@ +'use client'; +import { TextH, TextP } from '@/comps'; +import { motion } from 'framer-motion'; +import React from 'react'; + +export function GiftCard(props: { + cardOwner: string; + amount: string; + created: string; + from: string; + onClick?: VoidFunction; +}) { + return ( + +
+ + {props.cardOwner} + + + {props.amount} + +
+
+ + {props.created} + + + From: {props.from} + +
+ + ); +} diff --git a/web/app/comps/custom/index.ts b/web/app/comps/custom/index.ts new file mode 100755 index 0000000..683e721 --- /dev/null +++ b/web/app/comps/custom/index.ts @@ -0,0 +1,2 @@ +export * from './textB'; +export * from './textH'; diff --git a/web/app/comps/custom/textB.tsx b/web/app/comps/custom/textB.tsx new file mode 100755 index 0000000..4be5bee --- /dev/null +++ b/web/app/comps/custom/textB.tsx @@ -0,0 +1,23 @@ +'use client'; + +import React, { ReactNode } from 'react'; +import { cn } from '@/lib'; + +type IVariants = 'p1' | 'p2' | 'p3' | 'p4' | 'p5' | 'p6'; + +const cNames: Record = { + p1: 'text-3xl font-extrabold leading-tight text-muted-foreground', + p2: 'text-2xl font-bold leading-tight text-muted-foreground', + p3: 'text-lg font-bold leading-tight text-muted-foreground', + p4: 'text-md font-medium leading-tight text-muted-foreground', + p5: 'text-sm font-regular leading-tight text-muted-foreground', + p6: 'text-xs font-light leading-tight text-muted-foreground', +}; + +export function TextP(props: { children: ReactNode; v?: IVariants; className?: string; onClick?: VoidFunction }) { + return ( +

+ {props.children} +

+ ); +} diff --git a/web/app/comps/custom/textH.tsx b/web/app/comps/custom/textH.tsx new file mode 100755 index 0000000..77736fc --- /dev/null +++ b/web/app/comps/custom/textH.tsx @@ -0,0 +1,19 @@ +'use client'; + +import React, { ReactNode } from 'react'; +import { cn } from '@/lib'; + +type IVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; + +const cNames: Record = { + h1: 'text-3xl font-extrabold', + h2: 'text-2xl font-bold', + h3: 'text-xl font-bold', + h4: 'text-lg font-bold', + h5: 'text-sm font-bold', + h6: 'text-xs font-medium', +}; + +export function TextH(props: { children: ReactNode; v?: IVariants; className?: string }) { + return

{props.children}

; +} diff --git a/web/app/comps/datePicker/Calender.tsx b/web/app/comps/datePicker/Calender.tsx new file mode 100644 index 0000000..3bcee21 --- /dev/null +++ b/web/app/comps/datePicker/Calender.tsx @@ -0,0 +1,67 @@ +'use client'; + +import * as React from 'react'; +import { DayPicker } from 'react-day-picker'; + +import { cn } from '@/lib'; +import { FaAngleLeft, FaAngleRight } from 'react-icons/fa'; + +export type CalendarProps = React.ComponentProps; + +function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { + function buttonVariants(arg0: { variant: string }): any { + throw new Error('Function not implemented.'); + } + + return ( + .day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md' + : '[&:has([aria-selected])]:rounded-md' + ), + day: cn(buttonVariants({ variant: 'ghost' }), 'h-8 w-8 p-0 font-normal aria-selected:opacity-100'), + day_range_start: 'day-range-start', + day_range_end: 'day-range-end', + day_selected: + 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground', + day_today: 'bg-accent text-accent-foreground', + day_outside: + 'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30', + day_disabled: 'text-muted-foreground opacity-50', + day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground', + day_hidden: 'invisible', + ...classNames, + }} + components={ + { + // IconLeft: ({ ...props }) => , + // IconRight: ({ ...props }) => , + } + } + {...props} + /> + ); +} +Calendar.displayName = 'Calendar'; + +export { Calendar }; diff --git a/web/app/comps/datePicker/DatePiker.tsx b/web/app/comps/datePicker/DatePiker.tsx new file mode 100644 index 0000000..5f0ab58 --- /dev/null +++ b/web/app/comps/datePicker/DatePiker.tsx @@ -0,0 +1,32 @@ +'use client'; + +import * as React from 'react'; +import { format } from 'date-fns'; +import { SlCalender } from 'react-icons/sl'; + +import { cn } from '@/lib'; +import { Calendar } from './Calender'; +import { Popover, PopoverContent, PopoverTrigger } from './PopOver'; +import { AppButton } from '../forms'; + +export function DatePickerDemo() { + const [date, setDate] = React.useState(); + + return ( + + + + + {date ? format(date, 'PPP') : Pick a date} + + + + + {/* */} + + + ); +} diff --git a/web/app/comps/datePicker/PopOver.tsx b/web/app/comps/datePicker/PopOver.tsx new file mode 100644 index 0000000..27c9d96 --- /dev/null +++ b/web/app/comps/datePicker/PopOver.tsx @@ -0,0 +1,33 @@ +'use client'; + +import * as React from 'react'; +import * as PopoverPrimitive from '@radix-ui/react-popover'; + +import { cn } from '@/lib'; + +const Popover = PopoverPrimitive.Root; + +const PopoverTrigger = PopoverPrimitive.Trigger; + +const PopoverAnchor = PopoverPrimitive.Anchor; + +const PopoverContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => ( + + + +)); +PopoverContent.displayName = PopoverPrimitive.Content.displayName; + +export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }; diff --git a/web/app/comps/forms/Button.tsx b/web/app/comps/forms/Button.tsx new file mode 100644 index 0000000..d0ca43e --- /dev/null +++ b/web/app/comps/forms/Button.tsx @@ -0,0 +1,60 @@ +'use client'; + +import * as React from 'react'; +import { Slot } from '@radix-ui/react-slot'; +import { cva, type VariantProps } from 'class-variance-authority'; +import { cn } from '@/lib'; +import { Spinner } from '../spinner'; + +const buttonVariants = cva( + `inline-flex items-center + justify-center rounded-md + text-sm font-medium transition-colors + focus-visible:outline-none + focus-visible:ring-2 focus-visible:ring-ring + focus-visible:ring-offset-2 disabled:opacity-50 + disabled:pointer-events-none ring-offset-background w-full`, + { + variants: { + variant: { + default: 'bg-primary text-primary-foreground hover:bg-primary/60 hover:border-secondary', + destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', + outline: 'border border-input border-primary hover:bg-accent hover:text-accent-foreground', + secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', + ghost: 'hover:bg-accent hover:text-accent-foreground', + link: 'underline-offset-4 hover:underline text-primary', + }, + size: { + default: 'h-10 py-2 px-4', + sm: 'h-9 px-3 rounded-md', + lg: 'h-11 px-8 rounded-md', + icon: 'h-10 w-10', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, + } +); + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean; + isLoading?: boolean; +} + +const AppButton = React.forwardRef( + ({ className, disabled, variant, size, isLoading, children, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : 'button'; + return ( + + {isLoading ? : children} + + ); + } +); +AppButton.displayName = 'Button'; + +export { AppButton, buttonVariants }; diff --git a/web/app/comps/forms/Radial.tsx b/web/app/comps/forms/Radial.tsx new file mode 100644 index 0000000..f45cae5 --- /dev/null +++ b/web/app/comps/forms/Radial.tsx @@ -0,0 +1,9 @@ +import { cn } from '@/lib'; +import { GrRadial, GrRadialSelected } from 'react-icons/gr'; + +export const Radial = (props: { isChecked: boolean; className?: string }) => + props.isChecked ? ( + + ) : ( + + ); diff --git a/web/app/comps/forms/TextInput.tsx b/web/app/comps/forms/TextInput.tsx new file mode 100755 index 0000000..bc7795c --- /dev/null +++ b/web/app/comps/forms/TextInput.tsx @@ -0,0 +1,80 @@ +'use client'; + +import { TextP } from '@/comps'; +import { cn } from '@/lib'; +import { useState } from 'react'; +import { FieldValues, Path } from 'react-hook-form'; +import { CiLock } from 'react-icons/ci'; +import { IoEyeOffOutline, IoEyeOutline } from 'react-icons/io5'; + +export function AppTextInput(props: { + isPassword?: boolean; + control: any; + /** name to be used as label */ + name: Path; + /** placeholder */ + place?: string; + /** Description */ + desc?: string; + label?: string; + type?: 'text' | 'number' | 'date' | 'file'; + errorMessage?: string; + className?: string; +}) { + const [showPassword, setToggle] = useState(false); + + return ( +
+
+ {props.label && ( +
+ {props.label} +
+ )} + +
+ {props.isPassword && } + + + + {props.isPassword && + (showPassword ? ( + { + setToggle(false); + }} + /> + ) : ( + { + setToggle(true); + }} + /> + ))} +
+ {props.errorMessage && {props.errorMessage}} + {props.desc && {props.desc}} +
+
+ ); +} diff --git a/web/app/comps/forms/index.ts b/web/app/comps/forms/index.ts new file mode 100755 index 0000000..92436ac --- /dev/null +++ b/web/app/comps/forms/index.ts @@ -0,0 +1,3 @@ +export * from './select'; +export * from './Button'; +export * from './Radial'; diff --git a/web/app/comps/forms/select.tsx b/web/app/comps/forms/select.tsx new file mode 100644 index 0000000..41fa994 --- /dev/null +++ b/web/app/comps/forms/select.tsx @@ -0,0 +1,100 @@ +'use client'; +import { useTheme } from 'next-themes'; +import { TextP } from '../custom'; +import Select from 'react-select'; + +export const AppSelect = (props: { + label?: string; + errorMessage?: string; + desc?: string; + onChange: (newValue: string) => void; + data: { + label: string; + value: string; + }[]; +}) => { + const theme = useTheme(); + const isDark = theme.theme == 'dark'; + + return ( + <> +
+ {props.label && ( + + )} +
+