diff --git a/frontend/nextjs/package-lock.json b/frontend/nextjs/package-lock.json index 00f6d4a..937305f 100644 --- a/frontend/nextjs/package-lock.json +++ b/frontend/nextjs/package-lock.json @@ -11,6 +11,7 @@ "@auth/firebase-adapter": "^1.0.6", "@hookform/resolvers": "^3.3.2", "@mantine/hooks": "^7.2.2", + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", @@ -2365,6 +2366,37 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-accordion": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz", + "integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collapsible": "1.0.3", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-arrow": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz", @@ -2388,6 +2420,36 @@ } } }, + "node_modules/@radix-ui/react-collapsible": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz", + "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", diff --git a/frontend/nextjs/package.json b/frontend/nextjs/package.json index 243633e..12d11ff 100644 --- a/frontend/nextjs/package.json +++ b/frontend/nextjs/package.json @@ -13,6 +13,7 @@ "@auth/firebase-adapter": "^1.0.6", "@hookform/resolvers": "^3.3.2", "@mantine/hooks": "^7.2.2", + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", diff --git a/frontend/nextjs/src/app/(resources)/faq/page.tsx b/frontend/nextjs/src/app/(resources)/faq/page.tsx deleted file mode 100644 index c636330..0000000 --- a/frontend/nextjs/src/app/(resources)/faq/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const FAQPage = () => { - return ( -
FAQPage
- ) -} - -export default FAQPage \ No newline at end of file diff --git a/frontend/nextjs/src/app/(resources)/help/page.tsx b/frontend/nextjs/src/app/(resources)/help/page.tsx deleted file mode 100644 index 80e1924..0000000 --- a/frontend/nextjs/src/app/(resources)/help/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const HelpPage = () => { - return ( -
HelpPage
- ) -} - -export default HelpPage \ No newline at end of file diff --git a/frontend/nextjs/src/app/(resources)/privacy-policy/page.tsx b/frontend/nextjs/src/app/(resources)/privacy-policy/page.tsx deleted file mode 100644 index c7927f4..0000000 --- a/frontend/nextjs/src/app/(resources)/privacy-policy/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const PrivacyPolicyPage = () => { - return ( -
PrivacyPolicyPage
- ) -} - -export default PrivacyPolicyPage \ No newline at end of file diff --git a/frontend/nextjs/src/app/(with wallet)/_components/page-links.ts b/frontend/nextjs/src/app/(with wallet)/_components/page-links.ts index 4fed50e..d2e478b 100644 --- a/frontend/nextjs/src/app/(with wallet)/_components/page-links.ts +++ b/frontend/nextjs/src/app/(with wallet)/_components/page-links.ts @@ -10,10 +10,10 @@ export const PROFILE_PAGE = (uid:string) => `/dapp/profile/${uid}` export const NOTIFICATIONS_PAGE = "/dapp/notifications" export const CREATE_A_POST_PAGE = "/dapp/p/create" -export const WELCOME_PAGE = "/welcome" -export const FAQ_PAGE = "/faq" -export const HELP_PAGE = "/help" -export const PRIVACY_POLICY_PAGE = "/privacy-policy" +export const WELCOME_PAGE = "/" +export const FAQ_PAGE = "/dapp/faq" +export const HELP_PAGE = "/dapp/help" +export const PRIVACY_POLICY_PAGE = "/dapp/privacy-policy" export const ONBOARDING_PAGE = (stage?: | 2 | 3 | 4) => "/onboarding" + (stage ? `/${stage}` : "") export const primaryNavigationLinks = [ diff --git a/frontend/nextjs/src/app/(with wallet)/_components/sidebar.tsx b/frontend/nextjs/src/app/(with wallet)/_components/sidebar.tsx index c4ac960..8f9cca4 100644 --- a/frontend/nextjs/src/app/(with wallet)/_components/sidebar.tsx +++ b/frontend/nextjs/src/app/(with wallet)/_components/sidebar.tsx @@ -72,8 +72,8 @@ export function Sidebar({ className }: SidebarProps) {
{resourcesLinks.map((link, key) => ( - diff --git a/frontend/nextjs/src/app/(resources)/_welcome/page.tsx b/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/_welcome/page.tsx similarity index 100% rename from frontend/nextjs/src/app/(resources)/_welcome/page.tsx rename to frontend/nextjs/src/app/(with wallet)/dapp/(resources)/_welcome/page.tsx diff --git a/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/faq/layout.tsx b/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/faq/layout.tsx new file mode 100644 index 0000000..9491c2c --- /dev/null +++ b/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/faq/layout.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { ScrollArea } from '@/components/ui/scroll-area' + +type Props = { + children: React.ReactNode +} + +const Layout = ({children}: Props) => { + return ( +
+
+ + {children} + +
+
+ ) +} + +export default Layout \ No newline at end of file diff --git a/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/faq/page.tsx b/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/faq/page.tsx new file mode 100644 index 0000000..848daa8 --- /dev/null +++ b/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/faq/page.tsx @@ -0,0 +1,60 @@ +"use client"; +import { Button } from "@/components/ui/button"; +import { Search } from "@/components/ui/forms/search"; +import React from "react"; +import { HiMiniAdjustmentsVertical } from "react-icons/hi2"; +import { ExpertTicket, ExptListing, UserProfile } from "@/lib/types"; +import ExpertHubCard from "@/components/ui/expert-hub-card"; +import useBackend from "@/lib/hooks/useBackend"; +import InfiniteScroll from "@/components/ui/infinite-scroller"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion" + +const FaqPage = () => { + const { fetchExptListings } = useBackend(); + const [filters, setFilters] = React.useState>({}); + + const dummyFaqs = [ + { + question: 'What is MEMM?', + answer: 'MEMM! is a blockchain-powered mentorship platform designed to connect mentors and learners across various industries. It leverages decentralized technology to foster a secure, transparent, and rewarding mentorship experience.' + }, + { + question: 'How does the reputation system work?', + answer: 'MEMM! is a blockchain-powered mentorship platform designed to connect mentors and learners across various industries. It leverages decentralized technology to foster a secure, transparent, and rewarding mentorship experience.' + }, + { + question: 'What are EXPT Tokens?', + answer: 'MEMM! is a blockchain-powered mentorship platform designed to connect mentors and learners across various industries. It leverages decentralized technology to foster a secure, transparent, and rewarding mentorship experience.' + }, + { + question: 'How can I earn EXPT Tokens?', + answer: 'MEMM! is a blockchain-powered mentorship platform designed to connect mentors and learners across various industries. It leverages decentralized technology to foster a secure, transparent, and rewarding mentorship experience.' + }, + { + question: 'How do I become a expert on MEMM?', + answer: 'MEMM! is a blockchain-powered mentorship platform designed to connect mentors and learners across various industries. It leverages decentralized technology to foster a secure, transparent, and rewarding mentorship experience.' + }, + ] + + return ( +
+

Frequently Asked Questions

+ + { + dummyFaqs.map((faq, key) => + {faq.question} + {faq.answer} + ) + } + + +
+ ); +}; + +export default FaqPage; diff --git a/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/help/layout.tsx b/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/help/layout.tsx new file mode 100644 index 0000000..9491c2c --- /dev/null +++ b/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/help/layout.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { ScrollArea } from '@/components/ui/scroll-area' + +type Props = { + children: React.ReactNode +} + +const Layout = ({children}: Props) => { + return ( +
+
+ + {children} + +
+
+ ) +} + +export default Layout \ No newline at end of file diff --git a/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/help/page.tsx b/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/help/page.tsx new file mode 100644 index 0000000..a0f1e7e --- /dev/null +++ b/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/help/page.tsx @@ -0,0 +1,22 @@ +"use client"; +import { Button } from "@/components/ui/button"; +import { Search } from "@/components/ui/forms/search"; +import React from "react"; +import { HiMiniAdjustmentsVertical } from "react-icons/hi2"; +import { ExpertTicket, ExptListing, UserProfile } from "@/lib/types"; +import ExpertHubCard from "@/components/ui/expert-hub-card"; +import useBackend from "@/lib/hooks/useBackend"; +import InfiniteScroll from "@/components/ui/infinite-scroller"; + +const HelpPage = () => { + const { fetchExptListings } = useBackend(); + const [filters, setFilters] = React.useState>({}); + + return ( +
+ faqs... +
+ ); +}; + +export default HelpPage; diff --git a/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/privacy-policy/layout.tsx b/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/privacy-policy/layout.tsx new file mode 100644 index 0000000..9491c2c --- /dev/null +++ b/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/privacy-policy/layout.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { ScrollArea } from '@/components/ui/scroll-area' + +type Props = { + children: React.ReactNode +} + +const Layout = ({children}: Props) => { + return ( +
+
+ + {children} + +
+
+ ) +} + +export default Layout \ No newline at end of file diff --git a/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/privacy-policy/page.tsx b/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/privacy-policy/page.tsx new file mode 100644 index 0000000..5d640b1 --- /dev/null +++ b/frontend/nextjs/src/app/(with wallet)/dapp/(resources)/privacy-policy/page.tsx @@ -0,0 +1,22 @@ +"use client"; +import { Button } from "@/components/ui/button"; +import { Search } from "@/components/ui/forms/search"; +import React from "react"; +import { HiMiniAdjustmentsVertical } from "react-icons/hi2"; +import { ExpertTicket, ExptListing, UserProfile } from "@/lib/types"; +import ExpertHubCard from "@/components/ui/expert-hub-card"; +import useBackend from "@/lib/hooks/useBackend"; +import InfiniteScroll from "@/components/ui/infinite-scroller"; + +const PrivacyPolicyPage = () => { + const { fetchExptListings } = useBackend(); + const [filters, setFilters] = React.useState>({}); + + return ( +
+ faqs... +
+ ); +}; + +export default PrivacyPolicyPage; diff --git a/frontend/nextjs/src/components/ui/accordion.tsx b/frontend/nextjs/src/components/ui/accordion.tsx new file mode 100644 index 0000000..5f51ba3 --- /dev/null +++ b/frontend/nextjs/src/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }