[ { "path": ".eslintrc.json", "content": "{\n \"extends\": \"next/core-web-vitals\",\n \"rules\": {\n // next no-img-element\n \"@next/next/no-img-element\": \"off\"\n }\n}" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n" }, { "path": "README.md", "content": "# DevUI\n\nA complete front end solution for learners\n" }, { "path": "next.config.js", "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n images: { domains: [\"via.placeholder.com\"] },\n};\n\nmodule.exports = nextConfig;\n" }, { "path": "package.json", "content": "{\n \"name\": \"devui\",\n \"description\": \"Common app templates in plain HTML and TailwindCSS\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },\n \"dependencies\": {\n \"@headlessui/react\": \"^1.7.17\",\n \"@heroicons/react\": \"^2.0.18\",\n \"@types/node\": \"20.5.6\",\n \"@types/react\": \"18.2.21\",\n \"@types/react-dom\": \"18.2.7\",\n \"@uiw/codemirror-extensions-langs\": \"^4.21.11\",\n \"@uiw/codemirror-themes-all\": \"^4.21.11\",\n \"@uiw/react-codemirror\": \"^4.21.11\",\n \"autoprefixer\": \"10.4.15\",\n \"eslint\": \"8.47.0\",\n \"eslint-config-next\": \"13.4.19\",\n \"next\": \"13.4.19\",\n \"postcss\": \"8.4.28\",\n \"react\": \"18.2.0\",\n \"react-dom\": \"18.2.0\",\n \"tailwindcss\": \"3.3.3\",\n \"typescript\": \"5.2.2\"\n },\n \"devDependencies\": {\n \"@types/prettier\": \"^3.0.0\",\n \"prettier\": \"^3.0.2\",\n \"prettier-plugin-tailwindcss\": \"^0.5.3\"\n }\n}\n" }, { "path": "postcss.config.js", "content": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n" }, { "path": "prettier.config.js", "content": "module.exports = {\n plugins: [\"prettier-plugin-tailwindcss\"],\n};\n" }, { "path": "src/app/about-us/page.tsx", "content": "import React from \"react\";\n\nconst AboutUs = () => {\n return

AboutUs

;\n};\n\nexport default AboutUs;\n" }, { "path": "src/app/globals.css", "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n.resizing,\n.resizing * {\n @apply !cursor-ew-resize !select-none;\n}\n\n.resizing .iframe-overlay {\n display: block !important;\n}\n\n.no-scrollbar::-webkit-scrollbar {\n display: none;\n}\n\n.CodeMirror__Main__Editor {\n @apply overflow-hidden rounded-md;\n}\n.CodeMirror__Main__Editor .cm-scroller {\n @apply rounded-md px-4 py-2 pb-0;\n}\n" }, { "path": "src/app/layout.tsx", "content": "import MainNavbar from \"@/components/common/MainNavbar\";\nimport type { Metadata } from \"next\";\nimport { Inter } from \"next/font/google\";\nimport \"./globals.css\";\n\nconst inter = Inter({ subsets: [\"latin\"] });\n\nexport const metadata: Metadata = {\n title: \"DevUI | For learners\",\n description: \"Common app templates in plain HTML and TailwindCSS\",\n};\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n \n

{children}

\n \n \n );\n}\n" }, { "path": "src/app/page.tsx", "content": "import Button from \"@/components/common/Button\";\nimport {\n CodeBracketSquareIcon,\n LifebuoyIcon,\n} from \"@heroicons/react/24/outline\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\n\nexport default function Home() {\n return (\n

\n $\"Hero\"$ \n

\n A complete front end solution for learners\n

\n DevUI is a comprehensive and easy-to-use open-source UI templates\n library ( powered by TailwindCSS) designed to\n enhance your productivity as a learner\n

\n \n \n \n \n \n \n

\n );\n}\n" }, { "path": "src/app/templates/[id]/page.tsx", "content": "\"use client\";\nimport Select from \"@/components/common/Select\";\nimport CodePreviewer from \"@/components/lib/CodePreviewer\";\nimport { SelectOptionType } from \"@/types/utils\";\nimport { applications, getComponentByAppPageId } from \"@/utils/screens\";\nimport { useParams } from \"next/navigation\";\nimport { useEffect, useState } from \"react\";\n\nconst TemplateDetails = () => {\n const { id } = useParams();\n\n const [loadingUi, setLoadingUi] = useState(true);\n\n const [selectedPageUI, setSelectedPageUI] = useState(\n null,\n );\n const [app, setApp] = useState<(typeof applications)[0] | null>(null);\n\n useEffect(() => {\n if (!applications) return;\n const _app = applications.find((app) => app.id === id) || applications[0];\n setApp(_app);\n setSelectedPageUI(_app.pages[0]); // set 1st page as default selected page\n setLoadingUi(false);\n }, [applications]);\n\n if (loadingUi) return

Loading screens...

;\n\n return (\n

\n \n

\n \n {getComponentByAppPageId(app?.id || \"\", selectedPageUI?.id || \"\")}\n \n

\n );\n};\n\nexport default TemplateDetails;\n" }, { "path": "src/app/templates/page.tsx", "content": "\"use client\";\n\nimport Button from \"@/components/common/Button\";\nimport { applications } from \"@/utils/screens\";\nimport {\n ChevronDoubleRightIcon,\n RectangleGroupIcon,\n} from \"@heroicons/react/24/outline\";\nimport Link from \"next/link\";\n\nconst Templates = () => {\n return (\n

\n {applications.map((application, i) => {\n return (\n

\n {application.name}\n

\n {application.subtitle}\n

\n \n

\n \n {application.pages?.length || 0} Screens\n

\n \n\n

\n \n \n \n

\n {application.description}\n

\n );\n })}\n

\n );\n};\n\nexport default Templates;\n" }, { "path": "src/components/common/Button.tsx", "content": "import { TailwindIconType } from \"@/types/utils\";\nimport React from \"react\";\n\nconst Button: React.FC<\n React.ButtonHTMLAttributes & {\n StartIcon?: TailwindIconType;\n EndIcon?: TailwindIconType;\n }\n> = ({ StartIcon, EndIcon, children, ...props }) => {\n return (\n \n {StartIcon ? (\n \n ) : null}\n {children}\n {EndIcon ? (\n \n ) : null}\n \n );\n};\n\nexport default Button;\n" }, { "path": "src/components/common/MainNavbar.tsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport { CodeBracketSquareIcon } from \"@heroicons/react/20/solid\";\nimport { Bars3BottomLeftIcon, XMarkIcon } from \"@heroicons/react/24/outline\";\nimport Link from \"next/link\";\nimport React, { useState } from \"react\";\nimport { MobileNavbar } from \"./MobileNavbar\";\n\nconst items = [\n {\n title: \"Home\",\n href: \"/\",\n },\n {\n title: \"Templates\",\n href: \"/templates\",\n },\n\n {\n title: \"About us\",\n href: \"/about-us\",\n },\n];\n\nconst MainNavbar = () => {\n const [showMobileMenu, setShowMobileMenu] = useState(false);\n\n return (\n

\n \n \n \n \n {items?.length ? (\n \n ) : null}\n setShowMobileMenu(!showMobileMenu)}\n >\n {showMobileMenu ? (\n \n ) : (\n \n )}\n \n DevUI\n \n \n {showMobileMenu && items && }\n

\n );\n};\n\nexport default MainNavbar;\n" }, { "path": "src/components/common/MobileNavbar.tsx", "content": "import * as React from \"react\";\nimport Link from \"next/link\";\nimport { CodeBracketSquareIcon } from \"@heroicons/react/20/solid\";\nimport { classNames } from \"@/utils\";\n\ninterface MobileNavProps {\n items: {\n title: string;\n href: string;\n }[];\n}\n\nexport function MobileNavbar({ items }: MobileNavProps) {\n return (\n \n

\n \n \n DevUI\n \n \n

\n \n );\n}\n" }, { "path": "src/components/common/Select.tsx", "content": "\"use client\";\nimport { SelectOptionType } from \"@/types/utils\";\nimport { classNames } from \"@/utils\";\nimport { Combobox } from \"@headlessui/react\";\nimport { CheckIcon, ChevronUpDownIcon } from \"@heroicons/react/20/solid\";\nimport React, { useState } from \"react\";\n\ninterface SelectProps {\n label: string;\n options: SelectOptionType[];\n value: SelectOptionType | null;\n setValue: (val: { id: string; name: string }) => void;\n}\n\nconst Select: React.FC = ({ label, options, value, setValue }) => {\n const [query, setQuery] = useState(\"\");\n\n const filteredOptions =\n query === \"\"\n ? options\n : options.filter((option) => {\n return option.name.toLowerCase().includes(query.toLowerCase());\n });\n\n return (\n \n \n {label}\n \n

\n \n setQuery(event.target.value)}\n displayValue={(option: any) => option?.name}\n />\n \n \n \n \n\n \n {filteredOptions.map((option) => (\n \n classNames(\n \"relative cursor-default select-none py-2 pl-8 pr-4 text-white\",\n active ? \"bg-slate-600\" : \"\",\n )\n }\n >\n {({ active }) => (\n <>\n \n {option.name}\n \n\n {option.id === value?.id && (\n \n \n \n )}\n \n )}\n \n ))}\n \n

\n \n );\n};\n\nexport default Select;\n" }, { "path": "src/components/lib/CodePreviewer.tsx", "content": "import { renderHTMLFromJSX } from \"@/utils\";\nimport { CheckCircleIcon } from \"@heroicons/react/20/solid\";\nimport {\n CodeBracketIcon,\n DocumentDuplicateIcon,\n EyeIcon,\n} from \"@heroicons/react/24/outline\";\nimport React, { useState } from \"react\";\nimport CodeSnippetRenderer from \"./CodeSnippetRenderer\";\nimport PreviewCard from \"./PreviewCard\";\n\ninterface CodePreviewerProps {\n title: string;\n children: React.ReactElement;\n}\n\nconst CodePreviewer: React.FC = ({ children, title }) => {\n const [previewMode, setPreviewMode] = useState(true);\n const [codeCopied, setCodeCopied] = useState(false);\n\n const copyToClipboard = () => {\n const codeToCopy = renderHTMLFromJSX(children);\n navigator.clipboard.writeText(codeToCopy);\n setCodeCopied(true);\n setTimeout(() => {\n setCodeCopied(false);\n }, 4000);\n };\n\n return (\n

{title}

\n {/* Buttons */}\n

\n \n setPreviewMode(true)}\n type=\"button\"\n className=\"relative inline-flex items-center rounded-l-md bg-gray-800 px-2 py-2 ring-1 ring-inset ring-gray-500 hover:bg-gray-700 focus:z-10\"\n >\n UI preview\n \n \n Preview\n \n \n setPreviewMode(false)}\n type=\"button\"\n className=\"relative -ml-px inline-flex items-center rounded-r-md bg-gray-800 px-2 py-2 ring-1 ring-inset ring-gray-500 hover:bg-gray-700 focus:z-10\"\n >\n Code snippet\n \n \n Code\n \n \n \n

\n\n {\n if (codeCopied) return;\n copyToClipboard();\n }}\n className=\"cursor-pointer rounded-md p-2 hover:bg-gray-700 active:bg-gray-600\"\n >\n {codeCopied ? (\n \n ) : (\n \n )}\n \n

\n {previewMode ? (\n {children}\n ) : (\n \n )}\n

\n );\n};\n\nexport default CodePreviewer;\n" }, { "path": "src/components/lib/CodeSnippetRenderer.tsx", "content": "import { langs } from \"@uiw/codemirror-extensions-langs\";\nimport * as themes from \"@uiw/codemirror-themes-all\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport * as parserBabel from \"prettier/parser-babel\";\nimport * as parserHtml from \"prettier/parser-html\";\nimport prettier from \"prettier/standalone\";\nimport React, { useEffect, useState } from \"react\";\n\nconst DEFAULT_BASE_SETUP = {\n foldGutter: false,\n highlightActiveLine: false,\n highlightActiveLineGutter: false,\n indentOnInput: true,\n lineNumbers: false,\n syntaxHighlighting: true,\n tabSize: 4,\n};\n\ninterface CodeSnippetRendererProps {\n codeSnippet: string;\n}\n\nconst CodeSnippetRenderer: React.FC = ({\n codeSnippet,\n}) => {\n const [code, setCode] = useState(\"\");\n\n const formatCode = async () => {\n try {\n const formattedCode = await prettier.format(codeSnippet, {\n parser: \"html\",\n plugins: [parserHtml, parserBabel],\n semi: false,\n printWidth: 200,\n tabWidth: 2,\n bracketSameLine: true,\n singleAttributePerLine: true,\n htmlWhitespaceSensitivity: \"ignore\",\n });\n setCode(formattedCode);\n } catch (error) {\n console.error(\"Error while formatting the code: \\n\", error);\n setCode(codeSnippet);\n }\n };\n\n useEffect(() => {\n formatCode();\n }, [codeSnippet]);\n\n return (\n

\n \n

\n );\n};\n\nexport default CodeSnippetRenderer;\n" }, { "path": "src/components/lib/PreviewCard.tsx", "content": "import { classNames, renderHTMLFromJSX } from \"@/utils\";\nimport { useEffect, useRef, useState } from \"react\";\nimport WidthHandler from \"./WidthHandler\";\n\ninterface PreviewCardProps {\n className?: string;\n children: React.ReactElement;\n}\n\nconst PreviewCard = ({ children, className }: PreviewCardProps) => {\n const editorRef = useRef(null);\n const [containerWidth, setContainerWidth] = useState(\"100%\");\n const [maxWidth, setMaxWidth] = useState(null);\n\n useEffect(() => {\n if (!editorRef.current || maxWidth) return; // once set don't set max width again\n setMaxWidth(editorRef.current?.clientWidth);\n }, [editorRef]);\n\n return (\n \n {\n setContainerWidth(`${width}px`);\n }}\n maxWidth={maxWidth || 1440}\n />\n {/* \n // ! Reason to use iframe instead on any normal div is to avoid interference of devui parent project's styling and classes with the example's styling an classes\n // ! using iframe will isolate the examples from devui's parent application code. \n */}\n \n \n ${renderHTMLFromJSX(children)}`}\n >\n \n );\n};\n\nexport default PreviewCard;\n" }, { "path": "src/components/lib/WidthHandler.tsx", "content": "import React, { RefObject, useEffect, useRef } from \"react\";\n\nexport const DEFAULT_WIDTHS = {\n minWidth: 360,\n};\n\ninterface Props {\n innerRef: RefObject;\n onChange: (width: number) => void;\n maxWidth: number;\n}\n\nconst edgeCase = (\n value: number,\n min: number,\n max: number,\n): [number, boolean] => {\n if (value < min) {\n return [min, false];\n }\n if (value > max) {\n return [max, false];\n }\n return [value, true];\n};\n\nconst WidthHandler: React.FC = ({ innerRef, onChange, maxWidth }) => {\n const { minWidth } = DEFAULT_WIDTHS;\n\n const startX = useRef(null);\n const startWidth = useRef(null);\n\n useEffect(() => {\n const handleMouseMove = (e: MouseEvent) => {\n if (!startX.current || !startWidth.current) return;\n const delta = e.pageX - startX.current; // leftOrRight === 'left' ? startX - e.pageX : (startX - e.pageX) * -1\n const calculated = startWidth.current + delta * window.devicePixelRatio;\n const [newWidth, isChanging] = edgeCase(calculated, minWidth, maxWidth);\n if (isChanging) {\n onChange(newWidth);\n }\n };\n window.addEventListener(\"mousemove\", handleMouseMove);\n return () => window.removeEventListener(\"mousemove\", handleMouseMove);\n }, [innerRef, maxWidth, minWidth, onChange]);\n\n useEffect(() => {\n const handleMouseUp = () => {\n startX.current = null;\n document.body.classList.remove(\"resizing\");\n };\n window.addEventListener(\"mouseup\", handleMouseUp);\n return () => window.removeEventListener(\"mouseup\", handleMouseUp);\n }, []);\n\n return (\n {\n document.body.classList.add(\"resizing\");\n startX.current = e.pageX;\n startWidth.current = innerRef.current\n ? innerRef.current.clientWidth\n : 0;\n }}\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-valuemin={minWidth}\n aria-valuemax={maxWidth}\n className=\"absolute -right-4 top-1/2 z-30 flex h-14 w-2 cursor-ew-resize rounded-md bg-slate-600\"\n >\n );\n};\n\nexport default WidthHandler;\n" }, { "path": "src/components/templates/authentication/forgot-password.jsx", "content": "import React from \"react\";\n\nconst ForgotPassword = () => {\n return (\n

DevUI

\n Forgot password?\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime\n eius, aliquid autem numquam iure sint perspiciatis voluptatum\n soluta fugiat.\n

\n Email\n \n

\n\n \n\n

\n Already registered?{\" \"}\n \n Sign in to your account\n \n

\n \n

\n );\n};\n\nexport default ForgotPassword;\n" }, { "path": "src/components/templates/authentication/index.ts", "content": "import Register from \"./register\";\nimport Login from \"./login\";\nimport ForgotPassword from \"./forgot-password\";\n\nconst Authentication = { Register, Login, ForgotPassword };\n\nexport default Authentication;\n" }, { "path": "src/components/templates/authentication/login.jsx", "content": "import React from \"react\";\n\nconst Login = () => {\n return (\n

DevUI

Log in

\n Before we start, please log into your account\n

\n Username\n \n

\n Password\n \n

\n \n

\n \n Remember me\n \n

\n\n

\n Forgot password?\n

\n\n \n

\n \n \n

\n Don't have an account?{\" \"}\n \n Create an account\n \n

\n \n

\n );\n};\n\nexport default Login;\n" }, { "path": "src/components/templates/authentication/register.jsx", "content": "const Register = () => {\n return (\n

DevUI

\n Register\n

\n Before we start, please create your account\n

\n First name\n \n

\n Last name\n \n

\n Email\n \n

\n Username\n \n

\n Password\n \n

\n\n

\n \n

\n \n You will get emails on new features and releases\n \n

\n\n

\n \n

\n \n I agree to the terms and conditions\n \n

\n \n

\n Already registered?{\" \"}\n \n Sign in to your account\n \n

\n \n

\n );\n};\n\nexport default Register;\n" }, { "path": "src/components/templates/chat/chat-screen.jsx", "content": "import React from \"react\";\nimport { PaperAirplaneIcon, PlusCircleIcon } from \"@heroicons/react/20/solid\";\nimport {\n Bars3BottomLeftIcon,\n BellIcon,\n EllipsisVerticalIcon,\n FaceSmileIcon,\n FunnelIcon,\n MagnifyingGlassIcon,\n PaperClipIcon,\n ShareIcon,\n} from \"@heroicons/react/24/outline\";\nimport { classNames } from \"@/utils\";\n\nconst chatListDummyData = [\n {\n avatar:\n \"https://images.pexels.com/photos/18096595/pexels-photo-18096595/free-photo-of-music-on-street.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n fullName: \"Jane Smith\",\n lastMessage:\n \"Hi there! How have you been? It's been a while since we last caught up. Let's plan to meet up soon.\",\n dateTime: \"2 hours ago\",\n },\n {\n avatar:\n \"https://images.pexels.com/photos/18094275/pexels-photo-18094275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n fullName: \"Alice Smith\",\n lastMessage:\n \"How's it going on your end? I heard you had an exciting trip last week. Tell me all about it!\",\n dateTime: \"4 hours ago\",\n },\n {\n avatar:\n \"https://images.pexels.com/photos/13847652/pexels-photo-13847652.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n fullName: \"Bob Johnson\",\n lastMessage:\n \"What's for dinner tonight? I'm craving some Italian food. Any recommendations?\",\n dateTime: \"Yesterday\",\n },\n {\n avatar:\n \"https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n fullName: \"Emily Davis\",\n lastMessage:\n \"Can you help me with this coding problem? I'm stuck on it for hours now.\",\n dateTime: \"2 days ago\",\n },\n {\n avatar:\n \"https://images.pexels.com/photos/7775636/pexels-photo-7775636.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n fullName: \"Michael Wilson\",\n lastMessage:\n \"See you tomorrow at the park. Don't forget to bring your running shoes!\",\n dateTime: \"2 weeks ago\",\n },\n {\n avatar:\n \"https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n fullName: \"Sophia Anderson\",\n lastMessage:\n \"I miss you so much! It's been ages since we hung out. Let's plan something soon.\",\n dateTime: \"2 weeks ago\",\n },\n {\n avatar:\n \"https://images.pexels.com/photos/7775640/pexels-photo-7775640.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n fullName: \"Liam Brown\",\n lastMessage:\n \"Let's meet up for coffee. I have some exciting news to share with you!\",\n dateTime: \"3 weeks ago\",\n },\n {\n avatar:\n \"https://images.pexels.com/photos/18096595/pexels-photo-18096595/free-photo-of-music-on-street.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n fullName: \"Olivia Lee\",\n lastMessage:\n \"I have some big news! Guess what? I'm getting married next month!\",\n dateTime: \"4 weeks ago\",\n },\n {\n avatar:\n \"https://images.pexels.com/photos/7775636/pexels-photo-7775636.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n fullName: \"Noah White\",\n lastMessage:\n \"How's the weather there? I'm planning a weekend hike and hoping for good weather.\",\n dateTime: \"1 month ago\",\n },\n {\n avatar:\n \"https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n fullName: \"Ava Garcia\",\n lastMessage:\n \"Good morning! Did you catch the sunrise today? It was breathtaking.\",\n dateTime: \"2 months ago\",\n },\n {\n avatar:\n \"https://images.pexels.com/photos/7775640/pexels-photo-7775640.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n fullName: \"Ethan Martinez\",\n lastMessage:\n \"Let's go for a long walk by the beach this evening. The weather is perfect.\",\n dateTime: \"3 months ago\",\n },\n {\n avatar:\n \"https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n fullName: \"Mia Jones\",\n lastMessage:\n \"Happy birthday! I hope you have an amazing day filled with joy and surprises.\",\n dateTime: \"4 months ago\",\n },\n {\n avatar:\n \"https://images.pexels.com/photos/7775640/pexels-photo-7775640.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n fullName: \"James Harris\",\n lastMessage:\n \"What's new with you lately? I've been swamped with work, but I miss our chats.\",\n dateTime: \"5 months ago\",\n },\n];\n\nconst chatMessagesDummyData = [\n {\n fullName: \"Dan Abramov\",\n message:\n \"I'm good too, just catching up on some reading and enjoying the weather outside.\",\n time: \"5 minutes ago\",\n isOwnMessage: true,\n hasAttachments: true,\n avatar:\n \"https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Jane Smith\",\n message: \"That sounds lovely! What book are you currently reading?\",\n time: \"10 minutes ago\",\n isOwnMessage: false,\n avatar:\n \"https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Dan Abramov\",\n message:\n \"I'm reading 'The Great Gatsby' by F. Scott Fitzgerald. It's a classic!\",\n time: \"15 minutes ago\",\n isOwnMessage: true,\n avatar:\n \"https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Jane Smith\",\n message: \"Oh, I've heard great things about that book. Enjoy your reading!\",\n time: \"20 minutes ago\",\n isOwnMessage: false,\n avatar:\n \"https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Dan Abramov\",\n message: \"Thanks! It's such a beautifully written novel.\",\n time: \"25 minutes ago\",\n isOwnMessage: true,\n avatar:\n \"https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n\n {\n fullName: \"Dan Abramov\",\n message:\n \"I can't wait to see what happens next in the series. It's been so captivating!\",\n time: \"45 minutes ago\",\n isOwnMessage: true,\n avatar:\n \"https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Jane Smith\",\n message:\n \"I completely understand. It's always exciting when a series keeps you hooked.\",\n time: \"50 minutes ago\",\n isOwnMessage: false,\n avatar:\n \"https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Dan Abramov\",\n message:\n \"Absolutely! Well, I should get back to work now. Catch up with you later!\",\n time: \"55 minutes ago\",\n isOwnMessage: true,\n avatar:\n \"https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Dan Abramov\",\n message: \"Sounds like a plan! Let's do it!\",\n time: \"18 hours ago\",\n isOwnMessage: true,\n avatar:\n \"https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Jane Smith\",\n message: \"Count me in too!\",\n time: \"19 hours ago\",\n isOwnMessage: false,\n avatar:\n \"https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Dan Abramov\",\n message: \"Great! I'll make a reservation then.\",\n time: \"20 hours ago\",\n isOwnMessage: true,\n avatar:\n \"https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Jane Smith\",\n message: \"Awesome! Looking forward to it.\",\n time: \"21 hours ago\",\n isOwnMessage: false,\n avatar:\n \"https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Dan Abramov\",\n message: \"Catch up with you later!\",\n time: \"22 hours ago\",\n isOwnMessage: true,\n avatar:\n \"https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Jane Smith\",\n message: \"Sure thing! Take care!\",\n time: \"23 hours ago\",\n isOwnMessage: false,\n avatar:\n \"https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n\n {\n fullName: \"Jane Smith\",\n message: \"That's the spirit! Keep up the good work.\",\n time: \"6 days ago\",\n isOwnMessage: false,\n hasAttachments: true,\n\n avatar:\n \"https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n];\n\nconst dummyAttachments = [\n \"https://images.pexels.com/photos/18094275/pexels-photo-18094275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n \"https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n \"https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n];\n\nconst ChatScreen = () => {\n return (\n

Inbox

\n \n \n \n 4\n \n \n

\n \n

\n \n \n \n

\n \n

{item.fullName}

{item.dateTime}

\n {item.lastMessage}\n

\n \n );\n })}\n

\n \n \n

Jane smith

\n \n \n

Jane Smith

\n \n

\n \n \n \n

\n {chatMessagesDummyData.map((message, i) => {\n return (\n \n \n \n

\n {message.fullName}\n \n {message.time}\n \n

\n \n {message.message}\n

\n {message?.hasAttachments ? (\n \n {dummyAttachments.map((img, i) => {\n return (\n \n );\n })}\n

\n ) : null}\n

\n \n );\n })}\n \n

\n \n \n \n \n \n

\n \n \n \n \n );\n};\n\nexport default ChatScreen;\n" }, { "path": "src/components/templates/chat/create-group-chat.jsx", "content": "import {\n BellIcon,\n PlusCircleIcon,\n XMarkIcon,\n} from \"@heroicons/react/24/outline\";\nimport React from \"react\";\n\nconst selectedUsers = [\n {\n name: \"John Smith\",\n avatar:\n \"https://images.pexels.com/photos/18096595/pexels-photo-18096595/free-photo-of-music-on-street.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n name: \"Emily Gardener\",\n avatar:\n \"https://images.pexels.com/photos/18094275/pexels-photo-18094275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n name: \"Olivia Root\",\n avatar:\n \"https://images.pexels.com/photos/13847652/pexels-photo-13847652.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n name: \"John Denny\",\n avatar:\n \"https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n name: \"Emily Rose\",\n avatar:\n \"https://images.pexels.com/photos/7775636/pexels-photo-7775636.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n];\n\nconst CreateGroupChat = () => {\n return (\n

Inbox

\n \n \n \n 4\n \n \n

\n \n

Create a Group

\n \n

\n Group name\n \n

\n \n Select a user\n \n

\n \n \n \n \n \n \n

\n \n Added participants\n \n

\n {selectedUsers.map((user) => {\n return (\n \n \n

{user.name}

\n \n

\n );\n })}\n

\n \n \n

\n \n );\n};\n\nexport default CreateGroupChat;\n" }, { "path": "src/components/templates/chat/create-normal-chat.jsx", "content": "import {\n BellIcon,\n PlusCircleIcon,\n XMarkIcon,\n} from \"@heroicons/react/24/outline\";\nimport React from \"react\";\n\nconst CreateOneOnOneChat = () => {\n return (\n

Inbox

\n \n \n \n 4\n \n \n

\n \n

Create Chat

\n \n

\n \n Select a user\n \n

\n \n \n \n \n \n \n

\n \n \n

\n );\n};\n\nexport default CreateOneOnOneChat;\n" }, { "path": "src/components/templates/chat/empty-chats.jsx", "content": "import React from \"react\";\nimport { PlusCircleIcon } from \"@heroicons/react/20/solid\";\nimport { BellIcon, InboxIcon } from \"@heroicons/react/24/outline\";\n\nconst EmptyChats = () => {\n return (\n

Inbox

\n \n \n \n 4\n \n \n

\n \n

\n No chats found?\n

\n Try to initiate chat with your saved contacts by clicking the button\n below\n

\n\n \n

\n );\n};\n\nexport default EmptyChats;\n" }, { "path": "src/components/templates/chat/group-information.jsx", "content": "import { TrashIcon, UserMinusIcon, XMarkIcon } from \"@heroicons/react/20/solid\";\nimport {\n BellIcon,\n ExclamationTriangleIcon,\n PencilIcon,\n PlusCircleIcon,\n UserGroupIcon,\n} from \"@heroicons/react/24/outline\";\nimport React from \"react\";\n\nconst participants = [\n {\n fullName: \"Eva Brown\",\n email: \"eva.brown@example.com\",\n avatar:\n \"https://images.pexels.com/photos/18096595/pexels-photo-18096595/free-photo-of-music-on-street.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"John Doe\",\n email: \"john.doe@example.com\",\n avatar:\n \"https://images.pexels.com/photos/18094275/pexels-photo-18094275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Jane Smith\",\n email: \"jane.smith@example.com\",\n avatar:\n \"https://images.pexels.com/photos/13847652/pexels-photo-13847652.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Alice Johnson\",\n email: \"alice.johnson@example.com\",\n avatar:\n \"https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Bob Wilson\",\n email: \"bob.wilson@example.com\",\n avatar:\n \"https://images.pexels.com/photos/7775636/pexels-photo-7775636.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"Eva Brown\",\n email: \"eva.brown@example.com\",\n avatar:\n \"https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n {\n fullName: \"David Lee\",\n email: \"david.lee@example.com\",\n avatar:\n \"https://images.pexels.com/photos/7775640/pexels-photo-7775640.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n },\n];\n\nconst GroupChatInfo = () => {\n return (\n

Inbox

\n \n \n \n 4\n \n \n

\n \n

\n About Group\n

\n \n

\n \n \n \n

\n CodeCrafters Alliance\n

\n 7 Participants\n

\n Group participants\n

\n \n

\n {user.fullName}\n {i === 1 ? (\n \n ADMIN\n \n ) : null}\n

\n \n {user.email}\n \n

\n \n \n );\n })}\n

\n \n \n \n

\n );\n};\n\nexport default GroupChatInfo;\n" }, { "path": "src/components/templates/chat/index.ts", "content": "import EmptyChats from \"./empty-chats\";\nimport ChatScreen from \"./chat-screen\";\nimport CreateGroupChat from \"./create-group-chat\";\nimport CreateOneOnOneChat from \"./create-normal-chat\";\nimport GroupInfo from \"./group-information\";\nimport Register from \"./register\";\nimport Login from \"./login\";\n\nconst Chat = {\n EmptyChats,\n ChatScreen,\n CreateGroupChat,\n CreateOneOnOneChat,\n GroupInfo,\n Register,\n Login,\n};\n\nexport default Chat;\n" }, { "path": "src/components/templates/chat/login.jsx", "content": "const SocialLogin = () => {\n return (\n

Login

\n \n

Login

\n Login to access your account\n

\n \n Username or email\n \n \n

\n\n

\n Password\n \n

\n\n

\n \n

\n \n Remember me\n \n

\n \n

\n \n \n

\n Don't have an account?{\" \"}\n \n Create an account\n \n

\n );\n};\n\nexport default SocialLogin;\n" }, { "path": "src/components/templates/chat/register.jsx", "content": "import { PlusIcon } from \"@heroicons/react/24/outline\";\n\nconst SocialRegister = () => {\n return (\n

Register

\n \n

\n Register\n

\n Before we chat, please create your account\n

\n \n \n

\n \n

\n \n \n \n \n

\n\n

\n First name\n \n

\n Last name\n \n

\n\n

\n Username\n \n

\n\n

\n Email\n \n

\n Password\n \n

\n\n

\n \n

\n \n I agree to the terms and conditions\n \n

\n \n

\n Already registered?{\" \"}\n \n Sign in to your account\n \n

\n );\n};\n\nexport default SocialRegister;\n" }, { "path": "src/components/templates/social-media/bookmark-posts.jsx", "content": "import React from \"react\";\nimport {\n BellIcon,\n BookmarkIcon,\n EllipsisVerticalIcon,\n HeartIcon,\n LinkIcon,\n MagnifyingGlassIcon,\n} from \"@heroicons/react/24/outline\";\nimport {\n ChatBubbleOvalLeftEllipsisIcon,\n PlusCircleIcon,\n ShareIcon,\n} from \"@heroicons/react/24/solid\";\n\nconst posts = [\n {\n id: 1,\n authorImage:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Mystical Wanderer\",\n createdOn: \"15 minutes ago\",\n text: \"Uncovering ancient secrets and mystical wonders. The journey is the destination. 🔮🌟 #MythologyQuest\",\n images: [],\n likeCount: 46,\n commentCount: 13,\n bookmarked: true,\n liked: true,\n },\n {\n id: 2,\n authorImage:\n \"https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Aqua Explorer\",\n createdOn: \"1 hour ago\",\n text: \"Swimming with the dolphins today, and it was magical! 🐬🌊 #OceanAdventure\",\n images: [\n \"https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n ],\n likeCount: 102,\n commentCount: 18,\n bookmarked: true,\n liked: false,\n },\n {\n id: 3,\n authorImage:\n \"https://images.pexels.com/photos/7775637/pexels-photo-7775637.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Solar Flare \",\n createdOn: \"59 minutes ago\",\n text: \"Harnessing the power of the sun for a brighter future. ☀️🔋 #SolarEnergy\",\n images: [\n \"https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n \"https://images.pexels.com/photos/18148933/pexels-photo-18148933/free-photo-of-city-road-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n \"https://images.pexels.com/photos/18148937/pexels-photo-18148937/free-photo-of-city-road-traffic-landscape.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n ],\n likeCount: 802,\n commentCount: 99,\n bookmarked: true,\n liked: true,\n },\n {\n id: 4,\n authorImage:\n \"https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Aurora Starlight\",\n createdOn: \"17 hours ago\",\n text: \"Embracing the lunar magic tonight. The full moon is my muse. 🌕🌌 #MoonlightDreams\",\n images: [],\n likeCount: 420,\n commentCount: 20,\n bookmarked: true,\n liked: false,\n link: {\n image:\n \"https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Aurora Starlight\",\n caption: \"Digital artist | Creative mind | Color magician 🎨🖌️🖼️\",\n url: \"https://www.aurorastarry.com/\",\n },\n },\n {\n id: 5,\n authorImage:\n \"https://images.pexels.com/photos/3532553/pexels-photo-3532553.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Nova Sparks\",\n createdOn: \"1 day ago\",\n text: \"💡 Tech Poll: Which emerging technology excites you the most?\",\n images: [],\n likeCount: 207,\n commentCount: 63,\n bookmarked: true,\n liked: false,\n poll: [\n {\n name: \"Artificial Intelligence\",\n },\n {\n name: \"Virtual Reality\",\n },\n {\n name: \"Quantum Computing\",\n },\n {\n name: \"5G Connectivity\",\n },\n ],\n },\n {\n id: 6,\n authorImage:\n \"https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Zen Garden\",\n createdOn: \"7 days ago\",\n text: \"🧘‍♂️ Mindfulness Poll: Which mindfulness practice resonates with you the most?\",\n images: [],\n likeCount: 97,\n commentCount: 13,\n liked: true,\n bookmarked: true,\n poll: [\n {\n name: \"Meditation\",\n votePercentage: 30,\n },\n {\n name: \"Yoga\",\n selected: true,\n votePercentage: 33,\n },\n {\n name: \"Deep Breathing\",\n votePercentage: 27,\n },\n {\n name: \"Tai Chi\",\n votePercentage: 20,\n },\n ],\n },\n {\n id: 7,\n authorImage:\n \"https://images.pexels.com/photos/1739942/pexels-photo-1739942.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Pixel Painter\",\n createdOn: \"1 months ago\",\n text: \"🎨 Art Poll: What's your preferred art medium for creating masterpieces?\",\n images: [],\n likeCount: 99,\n commentCount: 13,\n bookmarked: true,\n liked: false,\n poll: [\n {\n name: \"Acrylic Paint\",\n votePercentage: 20,\n },\n {\n name: \"Watercolor\",\n votePercentage: 19,\n },\n {\n name: \"Digital Art\",\n votePercentage: 18,\n },\n {\n name: \"Charcoal Sketching\",\n votePercentage: 43,\n },\n ],\n },\n];\n\nconst BookmarkPosts = () => {\n return (\n

My Profile

\n \n \n \n \n \n \n \n \n

\n {/* Empty */}\n

\n {/* Profile Card */}\n

\n \n\n

Aurora Starlight

\n Night owl | Moon enthusiast | Wanderlust 🌕🌙🌎\n

\n\n

Short Bio

\n Immersed in the enchanting world of the night, captivated by the\n moon's allure, and constantly seeking new adventures around\n the globe. 🌕🌙🌎\n

Public link

\n \n \n

\n \n 13.5k \n Followers\n \n \n 204 \n Following\n \n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n {/* Post Lists */}\n {posts.map((post) => (\n \n

\n {/* Author Profile */}\n

\n \n

\n {/* Center-Right Content */}\n

\n {/* Post Metadata */}\n

\n {post.authorName}\n

\n \n {post.createdOn}\n \n

\n \n

\n {/* Post Text */}\n

{post.text}

\n {/* Post Images */}\n {post.images.length > 0 && (\n

\n {post.images.map((image, i) => (\n \n ))}\n

\n )}\n {/* Link Preview */}\n {post.link && (\n

\n \n

\n {/* Link Content */}\n

{post.link.title}

{post.link.caption}

\n \n \n {post.link.url}\n \n

\n )}\n {/* Polls */}\n {post.poll &&\n post.poll.map((option) => (\n = 0\n ? \"\"\n : \"hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black\"\n } ${\n option?.selected\n ? \"before:bg-[#ae7aff]\"\n : \"before:bg-gray-400/10\"\n }\n `}\n disabled={Boolean(option?.votePercentage)}\n style={{\n \"--data-vote-percentage\": `${\n option?.votePercentage || 0\n }%`,\n }}\n >\n {option?.name}{\" \"}\n {option?.votePercentage && (\n \n {option.votePercentage}%\n \n )}\n \n ))}\n {/* Post Actions Buttons */}\n

\n {/* Like Button */}\n \n \n \n {/* Comment Button */}\n \n {/* Share and Bookmarked Button */}\n

\n \n \n \n \n

\n ))}\n \n {/* Trending Topics */}\n \n

\n );\n};\n\nexport default BookmarkPosts;\n" }, { "path": "src/components/templates/social-media/change-password.jsx", "content": "import React from \"react\";\nimport { BellIcon, MagnifyingGlassIcon } from \"@heroicons/react/24/outline\";\nimport { PlusCircleIcon } from \"@heroicons/react/24/solid\";\n\nconst ChangePassword = () => {\n return (\n

My Profile

\n \n \n \n \n \n \n \n \n

\n {/* Empty */}\n

\n {/* Profile Card */}\n

\n \n\n

Aurora Starlight

\n Night owl | Moon enthusiast | Wanderlust 🌕🌙🌎\n

\n\n

Short Bio

\n Immersed in the enchanting world of the night, captivated by the\n moon's allure, and constantly seeking new adventures around\n the globe. 🌕🌙🌎\n

Public link

\n \n \n

\n \n 13.5k \n Followers\n \n \n 204 \n Following\n \n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n {/* Change Password Form */}\n

\n Old password\n \n

\n New password\n \n

\n Confirm password\n \n

\n \n

\n {/* Trending Topics */}\n \n

\n );\n};\n\nexport default ChangePassword;\n" }, { "path": "src/components/templates/social-media/edit-profile.jsx", "content": "import React from \"react\";\nimport { BellIcon, MagnifyingGlassIcon } from \"@heroicons/react/24/outline\";\nimport { PlusCircleIcon } from \"@heroicons/react/24/solid\";\nimport { PencilIcon } from \"@heroicons/react/20/solid\";\n\nconst EditProfile = () => {\n return (\n

My Profile

\n \n \n \n \n \n \n \n \n

\n {/* Empty */}\n

\n {/* Profile Card */}\n

\n \n\n

Aurora Starlight

\n Night owl | Moon enthusiast | Wanderlust 🌕🌙🌎\n

\n\n

Short Bio

\n Immersed in the enchanting world of the night, captivated by the\n moon's allure, and constantly seeking new adventures around\n the globe. 🌕🌙🌎\n

Public link

\n \n \n

\n \n 13.5k \n Followers\n \n \n 204 \n Following\n \n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n {/* Edit profile Form */}\n

\n \n \n \n \n \n \n \n

\n First name\n \n

\n Last name\n \n

\n Email\n \n

\n Username\n \n

\n Tagline\n \n

\n Short Bio\n \n

\n Portfolio URL\n \n

\n \n

\n {/* Trending Topics */}\n \n

\n );\n};\n\nexport default EditProfile;\n" }, { "path": "src/components/templates/social-media/index.ts", "content": "import PostListing from \"./post-listing\";\nimport PostDetail from \"./post-detail\";\nimport UserProfile from \"./user-profile\";\nimport MyProfile from \"./my-profile\";\nimport EditProfile from \"./edit-profile\";\nimport ChangePassword from \"./change-password\";\nimport BookmarkedPosts from \"./bookmark-posts\";\nimport Register from \"./register\";\nimport Login from \"./login\";\n\nconst SocialMedia = {\n PostListing,\n PostDetail,\n UserProfile,\n MyProfile,\n EditProfile,\n ChangePassword,\n BookmarkedPosts,\n Register,\n Login,\n};\n\nexport default SocialMedia;\n" }, { "path": "src/components/templates/social-media/login.jsx", "content": "const SocialLogin = () => {\n return (\n

Login

\n \n

Login

\n Login to access your account\n

\n \n Username or email\n \n \n

\n\n

\n Password\n \n

\n\n

\n \n

\n \n Remember me\n \n

\n \n

\n \n \n

\n Don't have an account?{\" \"}\n \n Create an account\n \n

\n );\n};\n\nexport default SocialLogin;\n" }, { "path": "src/components/templates/social-media/my-profile.jsx", "content": "import React from \"react\";\nimport {\n BellIcon,\n BookmarkIcon,\n EllipsisVerticalIcon,\n HeartIcon,\n LinkIcon,\n MagnifyingGlassIcon,\n} from \"@heroicons/react/24/outline\";\nimport {\n ChatBubbleOvalLeftEllipsisIcon,\n PlusCircleIcon,\n ShareIcon,\n} from \"@heroicons/react/24/solid\";\n\nconst posts = [\n {\n id: 1,\n authorImage:\n \"https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Aurora Starlight\",\n createdOn: \"15 minutes ago\",\n text: \"Uncovering ancient secrets and mystical wonders. The journey is the destination. 🔮🌟 #MythologyQuest\",\n images: [],\n likeCount: 46,\n commentCount: 13,\n bookmarked: false,\n liked: true,\n },\n {\n id: 2,\n authorImage:\n \"https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Aurora Starlight\",\n createdOn: \"1 hour ago\",\n text: \"Swimming with the dolphins today, and it was magical! 🐬🌊 #OceanAdventure\",\n images: [\n \"https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n ],\n likeCount: 102,\n commentCount: 18,\n bookmarked: true,\n liked: false,\n },\n {\n id: 3,\n authorImage:\n \"https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Aurora Starlight\",\n createdOn: \"59 minutes ago\",\n text: \"Harnessing the power of the sun for a brighter future. ☀️🔋 #SolarEnergy\",\n images: [\n \"https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n \"https://images.pexels.com/photos/18148933/pexels-photo-18148933/free-photo-of-city-road-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n \"https://images.pexels.com/photos/18148937/pexels-photo-18148937/free-photo-of-city-road-traffic-landscape.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n ],\n likeCount: 802,\n commentCount: 99,\n bookmarked: true,\n liked: true,\n },\n {\n id: 4,\n authorImage:\n \"https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Aurora Starlight\",\n createdOn: \"17 hours ago\",\n text: \"Embracing the lunar magic tonight. The full moon is my muse. 🌕🌌 #MoonlightDreams\",\n images: [],\n likeCount: 420,\n commentCount: 20,\n bookmarked: false,\n liked: false,\n link: {\n image:\n \"https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Aurora Starlight\",\n caption: \"Digital artist | Creative mind | Color magician 🎨🖌️🖼️\",\n url: \"https://www.aurorastarry.com/\",\n },\n },\n {\n id: 5,\n authorImage:\n \"https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Aurora Starlight\",\n createdOn: \"1 day ago\",\n text: \"💡 Tech Poll: Which emerging technology excites you the most?\",\n images: [],\n likeCount: 207,\n commentCount: 63,\n bookmarked: false,\n liked: false,\n poll: [\n {\n name: \"Artificial Intelligence\",\n },\n {\n name: \"Virtual Reality\",\n },\n {\n name: \"Quantum Computing\",\n },\n {\n name: \"5G Connectivity\",\n },\n ],\n },\n {\n id: 6,\n authorImage:\n \"https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Aurora Starlight\",\n createdOn: \"7 days ago\",\n text: \"🧘‍♂️ Mindfulness Poll: Which mindfulness practice resonates with you the most?\",\n images: [],\n likeCount: 97,\n commentCount: 13,\n liked: true,\n bookmarked: false,\n poll: [\n {\n name: \"Meditation\",\n votePercentage: 30,\n },\n {\n name: \"Yoga\",\n selected: true,\n votePercentage: 33,\n },\n {\n name: \"Deep Breathing\",\n votePercentage: 27,\n },\n {\n name: \"Tai Chi\",\n votePercentage: 20,\n },\n ],\n },\n {\n id: 7,\n authorImage:\n \"https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Aurora Starlight\",\n createdOn: \"1 months ago\",\n text: \"🎨 Art Poll: What's your preferred art medium for creating masterpieces?\",\n images: [],\n likeCount: 99,\n commentCount: 13,\n bookmarked: true,\n liked: false,\n poll: [\n {\n name: \"Acrylic Paint\",\n votePercentage: 20,\n },\n {\n name: \"Watercolor\",\n votePercentage: 19,\n },\n {\n name: \"Digital Art\",\n votePercentage: 18,\n },\n {\n name: \"Charcoal Sketching\",\n votePercentage: 43,\n },\n ],\n },\n];\n\nconst Profile = () => {\n return (\n

My Profile

\n \n \n \n \n \n \n \n \n

\n {/* Empty */}\n

\n {/* Profile Card */}\n

\n \n\n

Aurora Starlight

\n Night owl | Moon enthusiast | Wanderlust 🌕🌙🌎\n

\n\n

Short Bio

\n Immersed in the enchanting world of the night, captivated by the\n moon's allure, and constantly seeking new adventures around\n the globe. 🌕🌙🌎\n

Public link

\n \n \n

\n \n 13.5k \n Followers\n \n \n 204 \n Following\n \n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n {/* Post Lists */}\n {posts.map((post) => (\n \n

\n {/* Author Profile */}\n

\n \n

\n {/* Center-Right Content */}\n

\n {/* Post Metadata */}\n

\n {post.authorName}\n

\n \n {post.createdOn}\n \n

\n \n

\n {/* Post Text */}\n

{post.text}

\n {/* Post Images */}\n {post.images.length > 0 && (\n

\n {post.images.map((image, i) => (\n \n ))}\n

\n )}\n {/* Link Preview */}\n {post.link && (\n

\n \n

\n {/* Link Content */}\n

{post.link.title}

{post.link.caption}

\n \n \n {post.link.url}\n \n

\n {/* Like Button */}\n \n \n \n {/* Comment Button */}\n \n {/* Share and Bookmarked Button */}\n

\n \n \n \n \n

\n ))}\n \n {/* Trending Topics */}\n \n

\n \n );\n};\n\nexport default Profile;\n" }, { "path": "src/components/templates/social-media/post-detail.jsx", "content": "import React from \"react\";\nimport {\n BellIcon,\n BookmarkIcon,\n EllipsisVerticalIcon,\n FaceSmileIcon,\n HeartIcon,\n LinkIcon,\n MagnifyingGlassIcon,\n PlusIcon,\n} from \"@heroicons/react/24/outline\";\nimport {\n ChatBubbleOvalLeftEllipsisIcon,\n PaperAirplaneIcon,\n PlusCircleIcon,\n ShareIcon,\n ChatBubbleLeftRightIcon,\n} from \"@heroicons/react/24/solid\";\n\nconst post = {\n id: 1,\n authorImage:\n \"https://images.pexels.com/photos/7775637/pexels-photo-7775637.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Solar Flare \",\n createdOn: \"59 minutes ago\",\n text: \"Harnessing the power of the sun for a brighter future. ☀️🔋 #SolarEnergy\",\n images: [\n \"https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n \"https://images.pexels.com/photos/18148933/pexels-photo-18148933/free-photo-of-city-road-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n \"https://images.pexels.com/photos/18148937/pexels-photo-18148937/free-photo-of-city-road-traffic-landscape.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n ],\n likeCount: 802,\n commentCount: 99,\n liked: true,\n bookmarked: true,\n comments: [\n {\n id: 1,\n authorImage:\n \"https://images.pexels.com/photos/3532554/pexels-photo-3532554.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Isabella Andrews\",\n createdOn: \"58 minutes ago\",\n text: \"Such an important mission! How can individuals contribute to this solar revolution, Solar Flare?\",\n images: [\n \"https://images.pexels.com/photos/18148936/pexels-photo-18148936.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n ],\n likeCount: 420,\n commentCount: 20,\n liked: false,\n bookmarked: true,\n replies: [\n {\n id: 1,\n authorImage:\n \"https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Aurora Starlight\",\n createdOn: \"55 minutes ago\",\n text: \"Embracing the lunar magic tonight. The full moon is my muse. 🌕🌌 #MoonlightDreams\",\n images: [],\n likeCount: 10,\n commentCount: 2,\n liked: true,\n bookmarked: false,\n replies: [],\n },\n ],\n },\n {\n id: 2,\n authorImage:\n \"https://images.pexels.com/photos/1092422/pexels-photo-1092422.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Daniel Greenfield\",\n createdOn: \"45 minutes ago\",\n text: \"Absolutely love your commitment to clean energy, Solar Flare! Keep up the great work! 💚♻️\",\n images: [\n \"https://images.pexels.com/photos/1114619/pexels-photo-1114619.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n ],\n likeCount: 45,\n liked: false,\n bookmarked: false,\n commentCount: 0,\n replies: [],\n },\n {\n id: 3,\n authorImage:\n \"https://images.pexels.com/photos/998716/pexels-photo-998716.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Matthew Advocate\",\n createdOn: \"30 minutes ago\",\n text: \"Your efforts are helping us move towards a sustainable future. Kudos, Solar Flare! 🌞🌱\",\n images: [\n \"https://images.pexels.com/photos/998714/pexels-photo-998714.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n ],\n liked: false,\n bookmarked: false,\n likeCount: 60,\n commentCount: 2,\n replies: [\n {\n id: 1,\n authorImage:\n \"https://images.pexels.com/photos/909489/pexels-photo-909489.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Sophia Innovator\",\n createdOn: \"28 minutes ago\",\n text: \"Every ray of sunshine counts! Have you considered integrating solar in urban spaces, Solar Flare?\",\n images: [],\n likeCount: 2,\n commentCount: 1,\n liked: true,\n bookmarked: true,\n replies: [],\n },\n {\n id: 2,\n authorImage:\n \"https://images.pexels.com/photos/909487/pexels-photo-909487.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Michael Tech\",\n createdOn: \"2 minutes ago\",\n text: \"Your dedication to solar energy is inspiring, Solar Flare! Are there any upcoming projects we can look forward to?\",\n images: [],\n liked: true,\n bookmarked: true,\n likeCount: 1,\n commentCount: 0,\n replies: [],\n },\n ],\n },\n {\n id: 4,\n authorImage:\n \"https://images.pexels.com/photos/909483/pexels-photo-909483.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Samuel Eco\",\n createdOn: \"45 seconds ago\",\n text: \"You're doing incredible work for the environment, Solar Flare. 💪🌿 Let's all go solar!\",\n images: [],\n likeCount: 9,\n commentCount: 1,\n replies: [],\n liked: false,\n bookmarked: false,\n },\n ],\n};\n\nconst PostDetail = () => {\n return (\n

View Post

\n \n \n \n \n \n \n \n \n

\n {/* Profile */}\n \n

\n {/* Post Card */}\n

\n {/* Author Profile */}\n

\n \n

\n {/* Center-Right Content */}\n

\n {/* Post Metadata */}\n

{post.authorName}

\n \n {post.createdOn}\n \n

\n \n

\n {/* Post Text */}\n

{post.text}

\n {/* Post Images */}\n {post.images.length > 0 && (\n

\n {post.images.map((image, i) => (\n \n ))}\n

\n )}\n {/* Link Preview */}\n {post.link && (\n

\n \n

\n {/* Link Content */}\n

{post.link.title}

{post.link.caption}

\n \n \n {post.link.url}\n \n

\n )}\n {/* Post Actions Buttons */}\n

\n {/* Like Button */}\n \n \n \n {/* Comment Button */}\n \n {/* Share and bookmarked Button */}\n

\n \n \n \n \n

\n\n {/* Add Comment Form */}\n

\n \n \n

\n \n \n \n

\n\n {/* Post Comments */}\n {post.comments.map((comment) => (\n \n

\n {/* Author Profile */}\n 0\n ? \"before:bg-white\"\n : \"before:bg-transparent\"\n }`}\n >\n

\n \n

\n {/* Center-Right Content */}\n

\n {/* Post Metadata */}\n

\n {comment.authorName}\n

\n \n {comment.createdOn}\n \n

\n \n

\n {/* Post Text */}\n

{comment.text}

\n {/* Post Images */}\n {comment.images.length > 0 && (\n

\n {comment.images.map((image, i) => (\n \n ))}\n

\n )}\n {/* Post Actions Buttons */}\n

\n {/* Like Button */}\n \n \n \n {/* Comment Button */}\n \n

\n {/* Nested Comments */}\n {comment.replies.map((comment) => (\n

\n {/* Author Profile */}\n

\n \n

\n {/* Center-Right Content */}\n

\n {/* Post Metadata */}\n

\n {comment.authorName}\n

\n \n {comment.createdOn}\n \n

\n \n

\n {/* Post Text */}\n

{comment.text}

\n {/* Post Images */}\n {comment.images.length > 0 && (\n

\n {comment.images.map((image, i) => (\n \n ))}\n

\n )}\n {/* Post Actions Buttons */}\n

\n {/* Like Button */}\n \n \n \n

\n ))}\n

\n ))}\n \n {/* Trending Topics */}\n \n \n \n );\n};\n\nexport default PostDetail;\n" }, { "path": "src/components/templates/social-media/post-listing.jsx", "content": "import React from \"react\";\nimport {\n BellIcon,\n BookmarkIcon,\n EllipsisVerticalIcon,\n FaceSmileIcon,\n HeartIcon,\n LinkIcon,\n MagnifyingGlassIcon,\n PlusIcon,\n} from \"@heroicons/react/24/outline\";\nimport {\n ChatBubbleOvalLeftEllipsisIcon,\n PaperAirplaneIcon,\n PlusCircleIcon,\n ShareIcon,\n} from \"@heroicons/react/24/solid\";\n\nconst posts = [\n {\n id: 1,\n authorImage:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Mystical Wanderer\",\n createdOn: \"15 minutes ago\",\n text: \"Uncovering ancient secrets and mystical wonders. The journey is the destination. 🔮🌟 #MythologyQuest\",\n images: [],\n likeCount: 46,\n commentCount: 13,\n bookmarked: false,\n liked: true,\n },\n {\n id: 2,\n authorImage:\n \"https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Aqua Explorer\",\n createdOn: \"1 hour ago\",\n text: \"Swimming with the dolphins today, and it was magical! 🐬🌊 #OceanAdventure\",\n images: [\n \"https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n ],\n likeCount: 102,\n commentCount: 18,\n bookmarked: true,\n liked: false,\n },\n {\n id: 3,\n authorImage:\n \"https://images.pexels.com/photos/7775637/pexels-photo-7775637.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Solar Flare \",\n createdOn: \"59 minutes ago\",\n text: \"Harnessing the power of the sun for a brighter future. ☀️🔋 #SolarEnergy\",\n images: [\n \"https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n \"https://images.pexels.com/photos/18148933/pexels-photo-18148933/free-photo-of-city-road-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n \"https://images.pexels.com/photos/18148937/pexels-photo-18148937/free-photo-of-city-road-traffic-landscape.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n ],\n likeCount: 802,\n commentCount: 99,\n bookmarked: true,\n liked: true,\n },\n {\n id: 4,\n authorImage:\n \"https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Aurora Starlight\",\n createdOn: \"17 hours ago\",\n text: \"Embracing the lunar magic tonight. The full moon is my muse. 🌕🌌 #MoonlightDreams\",\n images: [],\n likeCount: 420,\n commentCount: 20,\n bookmarked: false,\n liked: false,\n link: {\n image:\n \"https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Aurora Starlight\",\n caption: \"Digital artist | Creative mind | Color magician 🎨🖌️🖼️\",\n url: \"https://www.aurorastarry.com/\",\n },\n },\n {\n id: 5,\n authorImage:\n \"https://images.pexels.com/photos/3532553/pexels-photo-3532553.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Nova Sparks\",\n createdOn: \"1 day ago\",\n text: \"💡 Tech Poll: Which emerging technology excites you the most?\",\n images: [],\n likeCount: 207,\n commentCount: 63,\n bookmarked: false,\n liked: false,\n poll: [\n {\n name: \"Artificial Intelligence\",\n },\n {\n name: \"Virtual Reality\",\n },\n {\n name: \"Quantum Computing\",\n },\n {\n name: \"5G Connectivity\",\n },\n ],\n },\n {\n id: 6,\n authorImage:\n \"https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Zen Garden\",\n createdOn: \"7 days ago\",\n text: \"🧘‍♂️ Mindfulness Poll: Which mindfulness practice resonates with you the most?\",\n images: [],\n likeCount: 97,\n commentCount: 13,\n liked: true,\n bookmarked: false,\n poll: [\n {\n name: \"Meditation\",\n votePercentage: 30,\n },\n {\n name: \"Yoga\",\n selected: true,\n votePercentage: 33,\n },\n {\n name: \"Deep Breathing\",\n votePercentage: 27,\n },\n {\n name: \"Tai Chi\",\n votePercentage: 20,\n },\n ],\n },\n {\n id: 7,\n authorImage:\n \"https://images.pexels.com/photos/1739942/pexels-photo-1739942.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Pixel Painter\",\n createdOn: \"1 months ago\",\n text: \"🎨 Art Poll: What's your preferred art medium for creating masterpieces?\",\n images: [],\n likeCount: 99,\n commentCount: 13,\n bookmarked: true,\n liked: false,\n poll: [\n {\n name: \"Acrylic Paint\",\n votePercentage: 20,\n },\n {\n name: \"Watercolor\",\n votePercentage: 19,\n },\n {\n name: \"Digital Art\",\n votePercentage: 18,\n },\n {\n name: \"Charcoal Sketching\",\n votePercentage: 43,\n },\n ],\n },\n];\n\nconst PostListing = () => {\n return (\n

All Posts

\n \n \n \n \n \n \n \n \n

\n {/* Profile */}\n \n

\n {/* Create Post Form */}\n

\n \n \n

\n \n \n \n

\n {/* Post Lists */}\n {posts.map((post) => (\n \n

\n {/* Author Profile */}\n

\n \n

\n {/* Center-Right Content */}\n

\n {/* Post Metadata */}\n

\n {post.authorName}\n

\n \n {post.createdOn}\n \n

\n \n

\n {/* Post Text */}\n

{post.text}

\n {/* Post Images */}\n {post.images.length > 0 && (\n

\n {post.images.map((image, i) => (\n \n ))}\n

\n )}\n {/* Link Preview */}\n {post.link && (\n

\n \n

\n {/* Link Content */}\n

{post.link.title}

{post.link.caption}

\n \n \n {post.link.url}\n \n

\n {/* Like Button */}\n \n \n \n {/* Comment Button */}\n \n {/* Share and Bookmarked Button */}\n

\n \n \n \n \n

\n ))}\n \n {/* Trending Topics */}\n \n

\n \n );\n};\n\nexport default PostListing;\n" }, { "path": "src/components/templates/social-media/register.jsx", "content": "import { PlusIcon } from \"@heroicons/react/24/outline\";\n\nconst SocialRegister = () => {\n return (\n

Register

\n \n

\n Register\n

\n Before we post, please create your account\n

\n \n \n

\n \n

\n \n \n \n \n

\n\n

\n First name\n \n

\n Last name\n \n

\n Tagline\n \n

\n Username\n \n

\n\n

\n Email\n \n

\n Password\n \n

\n\n

\n \n

\n \n I agree to the terms and conditions\n \n

\n \n

\n Already registered?{\" \"}\n \n Sign in to your account\n \n

\n );\n};\n\nexport default SocialRegister;\n" }, { "path": "src/components/templates/social-media/user-profile.jsx", "content": "import React from \"react\";\nimport {\n BellIcon,\n BookmarkIcon,\n EllipsisVerticalIcon,\n HeartIcon,\n LinkIcon,\n MagnifyingGlassIcon,\n} from \"@heroicons/react/24/outline\";\nimport {\n ChatBubbleOvalLeftEllipsisIcon,\n PlusCircleIcon,\n ShareIcon,\n} from \"@heroicons/react/24/solid\";\n\nconst posts = [\n {\n id: 1,\n authorImage:\n \"https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Zen Garden\",\n createdOn: \"15 minutes ago\",\n text: \"Uncovering ancient secrets and mystical wonders. The journey is the destination. 🔮🌟 #MythologyQuest\",\n images: [],\n likeCount: 46,\n commentCount: 13,\n bookmarked: false,\n liked: true,\n },\n {\n id: 2,\n authorImage:\n \"https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Zen Garden\",\n createdOn: \"1 hour ago\",\n text: \"Swimming with the dolphins today, and it was magical! 🐬🌊 #OceanAdventure\",\n images: [\n \"https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n ],\n likeCount: 102,\n commentCount: 18,\n bookmarked: true,\n liked: false,\n },\n {\n id: 3,\n authorImage:\n \"https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Zen Garden\",\n createdOn: \"59 minutes ago\",\n text: \"Harnessing the power of the sun for a brighter future. ☀️🔋 #SolarEnergy\",\n images: [\n \"https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n \"https://images.pexels.com/photos/18148933/pexels-photo-18148933/free-photo-of-city-road-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n \"https://images.pexels.com/photos/18148937/pexels-photo-18148937/free-photo-of-city-road-traffic-landscape.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n ],\n likeCount: 802,\n commentCount: 99,\n bookmarked: true,\n liked: true,\n },\n {\n id: 4,\n authorImage:\n \"https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Zen Garden\",\n createdOn: \"17 hours ago\",\n text: \"Embracing the lunar magic tonight. The full moon is my muse. 🌕🌌 #MoonlightDreams\",\n images: [],\n likeCount: 420,\n commentCount: 20,\n bookmarked: false,\n liked: false,\n link: {\n image:\n \"https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Zen Garden\",\n caption: \"Digital artist | Creative mind | Color magician 🎨🖌️🖼️\",\n url: \"http://www.zengardenmindfulness.com/\",\n },\n },\n {\n id: 5,\n authorImage:\n \"https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Zen Garden\",\n createdOn: \"1 day ago\",\n text: \"💡 Tech Poll: Which emerging technology excites you the most?\",\n images: [],\n likeCount: 207,\n commentCount: 63,\n bookmarked: false,\n liked: false,\n poll: [\n {\n name: \"Artificial Intelligence\",\n },\n {\n name: \"Virtual Reality\",\n },\n {\n name: \"Quantum Computing\",\n },\n {\n name: \"5G Connectivity\",\n },\n ],\n },\n {\n id: 6,\n authorImage:\n \"https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Zen Garden\",\n createdOn: \"7 days ago\",\n text: \"🧘‍♂️ Mindfulness Poll: Which mindfulness practice resonates with you the most?\",\n images: [],\n likeCount: 97,\n commentCount: 13,\n liked: true,\n bookmarked: false,\n poll: [\n {\n name: \"Meditation\",\n votePercentage: 30,\n },\n {\n name: \"Yoga\",\n selected: true,\n votePercentage: 33,\n },\n {\n name: \"Deep Breathing\",\n votePercentage: 27,\n },\n {\n name: \"Tai Chi\",\n votePercentage: 20,\n },\n ],\n },\n {\n id: 7,\n authorImage:\n \"https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n authorName: \"Zen Garden\",\n createdOn: \"1 months ago\",\n text: \"🎨 Art Poll: What's your preferred art medium for creating masterpieces?\",\n images: [],\n likeCount: 99,\n commentCount: 13,\n bookmarked: true,\n liked: false,\n poll: [\n {\n name: \"Acrylic Paint\",\n votePercentage: 20,\n },\n {\n name: \"Watercolor\",\n votePercentage: 19,\n },\n {\n name: \"Digital Art\",\n votePercentage: 18,\n },\n {\n name: \"Charcoal Sketching\",\n votePercentage: 43,\n },\n ],\n },\n];\n\nconst UserProfile = () => {\n return (\n

Profile

\n \n \n \n \n \n \n \n \n

\n {/* Empty */}\n

\n {/* Profile Card */}\n

\n \n\n

Zen Garden

\n Meditation guru | Nature lover | Zen master 🧘‍♂️🌿🍃\n

\n\n

Short Bio

\n Guiding inner peace through meditation, finding solace in\n nature's embrace, and mastering the art of Zen living.\n 🧘‍♂️🌿🍃\n

Public link

\n \n \n

\n \n 400 \n Followers\n \n \n 70 \n Following\n \n

\n \n

\n\n

\n {/* Post Lists */}\n {posts.map((post) => (\n \n

\n {/* Author Profile */}\n

\n \n

\n {/* Center-Right Content */}\n

\n {/* Post Metadata */}\n

\n {post.authorName}\n

\n \n {post.createdOn}\n \n

\n \n

\n {/* Post Text */}\n

{post.text}

\n {/* Post Images */}\n {post.images.length > 0 && (\n

\n {post.images.map((image, i) => (\n \n ))}\n

\n )}\n {/* Link Preview */}\n {post.link && (\n

\n \n

\n {/* Link Content */}\n

{post.link.title}

{post.link.caption}

\n \n \n {post.link.url}\n \n

\n {/* Like Button */}\n \n \n \n {/* Comment Button */}\n \n {/* Share and Bookmarked Button */}\n

\n \n \n \n \n

\n ))}\n \n {/* Trending Topics */}\n \n

\n \n );\n};\n\nexport default UserProfile;\n" }, { "path": "src/components/templates/todo/empty-todos.jsx", "content": "import React from \"react\";\nimport { PlusCircleIcon } from \"@heroicons/react/20/solid\";\nimport { InboxIcon } from \"@heroicons/react/24/outline\";\n\nconst EmptyTodos = () => {\n return (\n

All todos

\n \n

\n No todos found?\n

\n No todo has been added till now. Click the below button to create a\n new task.\n

\n \n

\n );\n};\n\nexport default EmptyTodos;\n" }, { "path": "src/components/templates/todo/index.ts", "content": "import TodosList from \"./todos\";\nimport EmptyTodos from \"./empty-todos\";\n\nconst Todo = {\n TodosList,\n EmptyTodos,\n};\n\nexport default Todo;\n" }, { "path": "src/components/templates/todo/todos.jsx", "content": "import { PlusCircleIcon } from \"@heroicons/react/20/solid\";\nimport { PencilIcon, TrashIcon } from \"@heroicons/react/24/outline\";\n\nconst todos = [\n {\n task: \"Complete coding challenge\",\n date: \"10 Aug 2023\",\n },\n {\n task: \"Read programming article\",\n date: \"15 Aug 2023\",\n },\n {\n task: \"Debug the issue in the backend\",\n date: \"20 Aug 2023\",\n },\n {\n task: \"Review pull requests\",\n date: \"25 Aug 2023\",\n },\n {\n task: \"Prepare presentation on algorithms\",\n date: \"05 Sept 2023\",\n },\n {\n task: \"Attend programming meetup\",\n date: \"18 Sept 2023\",\n },\n {\n task: \"Optimize database queries\",\n date: \"10 Oct 2023\",\n },\n {\n task: \"Participate in hackathon\",\n date: \"05 Nov 2023\",\n },\n {\n task: \"Contribute to open source project\",\n date: \"15 Nov 2023\",\n },\n];\n\nconst TodosList = () => {\n return (\n

All todos

\n \n

\n \n \n \n

\n \n \n

\n \n

\n \n {task}\n

\n {date}\n

\n \n \n \n );\n })}\n

\n );\n};\n\nexport default TodosList;\n" }, { "path": "src/components/templates/youtube/change-password.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport { MagnifyingGlassIcon, XCircleIcon } from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo } from \"./data\";\n\nconst ChangePassword = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n

\n\n

React Patterns

@reactpatterns

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n

\n\n

Password

\n Please enter your current password to change your password.\n

\n \n Current password\n \n \n

\n \n New password\n \n \n

\n Your new password must be more than 8 characters.\n

\n \n Confirm password\n \n \n

\n \n \n

\n );\n};\n\nexport default ChangePassword;\n" }, { "path": "src/components/templates/youtube/channel-empty-playlist.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n MagnifyingGlassIcon,\n UserPlusIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo, icons } from \"./data\";\n\nconst ChannelEmptyPlaylist = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n \n \n {icons.collections}\n \n \n

No playlist created

There are no playlist created on this channel.

\n );\n};\n\nexport default ChannelEmptyPlaylist;\n" }, { "path": "src/components/templates/youtube/channel-empty-subscribed.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n MagnifyingGlassIcon,\n UserPlusIcon,\n UsersIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo } from \"./data\";\n\nconst ChannelEmptySubscribed = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n \n \n \n \n \n

No people subscribers

\n This channel has yet to subscribe a new\n channel.\n

\n );\n};\n\nexport default ChannelEmptySubscribed;\n" }, { "path": "src/components/templates/youtube/channel-empty-tweet.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n MagnifyingGlassIcon,\n UserPlusIcon,\n UsersIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo } from \"./data\";\n\nconst ChannelEmptyTweet = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n \n \n \n \n \n

No Tweets

\n This channel has yet to make a Tweet.\n

\n );\n};\n\nexport default ChannelEmptyTweet;\n" }, { "path": "src/components/templates/youtube/channel-empty-video.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n MagnifyingGlassIcon,\n PlayIcon,\n UserPlusIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo } from \"./data\";\n\nconst ChannelEmptyVideo = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n \n \n \n

No videos uploaded

\n This page has yet to upload a video. Search another page in\n order to find more videos.\n

\n );\n};\n\nexport default ChannelEmptyVideo;\n" }, { "path": "src/components/templates/youtube/channel-playlist-videos.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport { MagnifyingGlassIcon, XCircleIcon } from \"@heroicons/react/24/outline\";\nimport React from \"react\";\nimport { bottomTotalItems, navItems, logo, playlistList } from \"./data\";\n\nconst ChannelPlaylistVideos = () => {\n const playlist = playlistList[0];\n playlist.videos = playlist.videos.filter((video) => video.isPublished);\n\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n \n

\n Playlist\n \n {playlist.videos.length}\n videos\n \n

\n {playlist.views} Views · \n {playlist.createdAt}\n

{playlist.name}

\n {playlist.description}\n

\n \n

{playlist.owner.fullName}

\n {playlist.owner.subscribers} Subscribers\n

\n {playlist.videos.map(\n (video) =>\n video.isPublished && (\n

\n \n

\n \n {video.duration}\n \n

\n \n

\n {video.title}\n

\n {video.views} Views · {video.time}\n

\n \n

\n {video.owner.fullName}\n

\n ),\n )}\n

\n );\n};\n\nexport default ChannelPlaylistVideos;\n" }, { "path": "src/components/templates/youtube/channel-playlist.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n MagnifyingGlassIcon,\n UserPlusIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo, playlistList } from \"./data\";\n\nconst ChannelPlaylist = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n {playlistList.map(\n (playlist) =>\n playlist.videos.filter((video) => video.isPublished).length >\n 0 && (\n

\n video.isPublished)\n .thumbnail\n }\n alt={playlist.name}\n className=\"h-full w-full\"\n />\n

\n Playlist\n \n {\n playlist.videos.filter(\n (video) => video.isPublished,\n ).length\n }\n videos\n \n

\n {playlist.views} Views · \n {playlist.createdAt}\n

{playlist.name}

\n {playlist.description}\n

\n ),\n )}\n

\n );\n};\n\nexport default ChannelPlaylist;\n" }, { "path": "src/components/templates/youtube/channel-subscribed.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n MagnifyingGlassIcon,\n UserPlusIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo, channels } from \"./data\";\n\nconst ChannelSubscribed = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n \n \n \n \n

\n\n {channels.map((channel, i) => (\n \n

\n \n

{channel.fullName}

\n {channel.subscribers} Subscribers\n

\n \n \n {channel.isSubscribed ? \"Subscribed\" : \"Subscribe\"}\n \n \n {!channel.isSubscribed ? \"Subscribed\" : \"Subscribe\"}\n \n \n

\n ))}\n

\n \n

\n \n );\n};\n\nexport default ChannelSubscribed;\n" }, { "path": "src/components/templates/youtube/channel-tweets.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n HandThumbDownIcon,\n HandThumbUpIcon,\n MagnifyingGlassIcon,\n UserPlusIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo, tweets } from \"./data\";\n\nconst ChannelTweets = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n {tweets.map((tweet) => (\n \n

\n \n

\n \n {tweet.owner.fullName}\n \n \n \n {tweet.createdAt}\n \n

{tweet.content}

\n \n \n \n \n \n \n

\n ))}\n

\n \n

\n \n );\n};\n\nexport default ChannelTweets;\n" }, { "path": "src/components/templates/youtube/channel-video-list.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n MagnifyingGlassIcon,\n UserPlusIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo, videos } from \"./data\";\n\nconst ChannelVideoList = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n {videos\n .filter((video) => video.isPublished)\n .map((video) => (\n

\n \n

\n \n {video.duration}\n \n

{video.title}

\n {video.views} Views · {video.time}\n

\n ))}\n

\n );\n};\n\nexport default ChannelVideoList;\n" }, { "path": "src/components/templates/youtube/dashboard.jsx", "content": "\"use client\";\nimport {\n EyeIcon,\n HeartIcon,\n MagnifyingGlassIcon,\n PencilIcon,\n PlusIcon,\n TrashIcon,\n UserIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport React from \"react\";\nimport { navItems, logo, videos } from \"./data\";\nimport { classNames } from \"@/utils\";\n\nconst Dashboard = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n

\n Welcome Back, React Patterns\n

\n Seamless Video Management, Elevated Results.\n

\n \n

\n {[\n { Icon: EyeIcon, title: \"Total views\", count: \"221,234\" },\n { Icon: UserIcon, title: \"Total subscribers\", count: \"4,053\" },\n { Icon: HeartIcon, title: \"Total likes\", count: \"63,021\" },\n ].map(({ title, Icon, count }) => (\n

\n \n \n \n

{title}

{count}

\n ))}\n

\n \n \n \n \n \n \n \n \n \n \n \n \n {videos.map((video) => (\n \n \n \n \n \n \n \n \n ))}\n \n

Status	Status	Uploaded	Rating	\n Date uploaded\n
\n \n \n \n \n \n \n	\n \n \n {video.isPublished ? \"Published\" : \"Unpublished\"}\n \n \n	\n \n \n {video.title} \n \n	\n \n \n {video.likeCount} likes\n \n \n {video.dislikeCount} dislikes\n \n \n	\n {new Date(video.createdAt).toLocaleDateString()}\n	\n \n \n \n \n

\n );\n};\n\nexport default Dashboard;\n" }, { "path": "src/components/templates/youtube/data.jsx", "content": "export const logo = (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport const icons = {\n home: (\n \n \n \n ),\n like: (\n \n \n \n ),\n history: (\n \n \n \n ),\n myContent: (\n \n \n \n \n ),\n collections: (\n \n \n \n ),\n subscribers: (\n \n \n \n ),\n support: (\n \n \n \n ),\n settings: (\n \n \n \n \n ),\n};\n\nexport const navItems = [\n {\n name: \"Home\",\n mobileView: true,\n icon: icons.home,\n },\n {\n name: \"Liked Videos\",\n mobileView: false,\n icon: icons.like,\n },\n {\n name: \"History\",\n mobileView: true,\n icon: icons.history,\n },\n {\n name: \"My Content\",\n mobileView: false,\n icon: icons.myContent,\n },\n {\n name: \"Collections\",\n mobileView: true,\n icon: icons.collections,\n },\n {\n name: \"Subscribers\",\n mobileView: true,\n icon: icons.subscribers,\n },\n {\n name: \"Support\",\n mobileView: false,\n icon: icons.support,\n },\n {\n name: \"Settings\",\n mobileView: false,\n icon: icons.settings,\n },\n];\n\nexport const siteNavItems = [\"Home\", \"Products\", \"Resources\", \"Pricing\"];\n\nexport const bottomTotalItems = 2;\n\nexport const videos = [\n {\n id: \"1\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/3561339/pexels-photo-3561339.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"JavaScript Fundamentals: Variables and Data Types\",\n description:\n \"Learn the basics of JavaScript, including variables, data types, and how to use them in your programs.\",\n duration: \"20:45\",\n views: \"10.3k\",\n isPublished: true,\n time: \"44 minutes ago\",\n createdAt: \"2023-09-22T09:54:42.381Z\",\n owner: {\n id: \"1\",\n username: \"codemaster\",\n fullName: \"Code Master\",\n avatar:\n \"https://images.pexels.com/photos/3532545/pexels-photo-3532545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 921,\n dislikeCount: 49,\n },\n {\n id: \"2\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/3532553/pexels-photo-3532553.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"React Hooks Explained: useState and useEffect\",\n description:\n \"Dive into the world of React hooks and understand how to use useState and useEffect in your components.\",\n duration: \"15:32\",\n views: \"8.7k\",\n isPublished: false,\n time: \"1 hour ago\",\n createdAt: \"2023-09-21T09:54:42.381Z\",\n owner: {\n id: \"2\",\n username: \"reactninja\",\n fullName: \"React Ninja\",\n avatar:\n \"https://images.pexels.com/photos/3532552/pexels-photo-3532552.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 2520,\n dislikeCount: 279,\n },\n {\n id: \"3\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/3532555/pexels-photo-3532555.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Mastering Async Await in JavaScript\",\n description:\n \"Learn how to work with asynchronous JavaScript using the async/await syntax for cleaner and more readable code.\",\n duration: \"25:10\",\n views: \"12.5k\",\n isPublished: false,\n time: \"2 hours ago\",\n createdAt: \"2023-09-20T09:54:42.381Z\",\n owner: {\n id: \"3\",\n username: \"asyncmasters\",\n fullName: \"Async Masters\",\n avatar:\n \"https://images.pexels.com/photos/3532549/pexels-photo-3532549.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 943,\n dislikeCount: 244,\n },\n {\n id: \"4\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/3532550/pexels-photo-3532550.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Building a ToDo App with React and Context API\",\n description:\n \"Create a simple ToDo application using React and manage state with the Context API for global data.\",\n duration: \"30:22\",\n views: \"15.4k\",\n isPublished: false,\n time: \"3 hours ago\",\n createdAt: \"2023-09-19T09:54:42.381Z\",\n owner: {\n id: \"4\",\n username: \"codecrafters\",\n fullName: \"Code Crafters\",\n avatar:\n \"https://images.pexels.com/photos/2522659/pexels-photo-2522659.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 760,\n dislikeCount: 302,\n },\n {\n id: \"5\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/2522660/pexels-photo-2522660.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Responsive Web Design with Tailwind CSS\",\n description:\n \"Explore the power of Tailwind CSS and build a responsive website from scratch.\",\n duration: \"18:56\",\n views: \"9.8k\",\n isPublished: false,\n time: \"4 hours ago\",\n createdAt: \"2023-09-18T09:54:42.381Z\",\n owner: {\n id: \"5\",\n username: \"tailwindpro\",\n fullName: \"Tailwind Pro\",\n avatar:\n \"https://images.pexels.com/photos/2519823/pexels-photo-2519823.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 2630,\n dislikeCount: 317,\n },\n {\n id: \"6\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/2519817/pexels-photo-2519817.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Getting Started with Express.js\",\n description:\n \"Learn the basics of building web applications with Node.js and Express.js framework.\",\n duration: \"22:18\",\n views: \"11.k\",\n isPublished: true,\n time: \"5 hours ago\",\n createdAt: \"2023-09-17T09:54:42.381Z\",\n owner: {\n id: \"6\",\n username: \"expresslearner\",\n fullName: \"Express Learner\",\n avatar:\n \"https://images.pexels.com/photos/2519812/pexels-photo-2519812.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 137,\n dislikeCount: 107,\n },\n {\n id: \"7\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/7775641/pexels-photo-7775641.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"State Management with Redux\",\n description:\n \"Learn how to manage global state in your React applications using Redux.\",\n duration: \"27:50\",\n views: \"13.8k\",\n isPublished: false,\n time: \"6 hours ago\",\n createdAt: \"2023-09-16T09:54:42.381Z\",\n owner: {\n id: \"7\",\n username: \"reduxmaster\",\n fullName: \"Redux Master\",\n avatar:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 1250,\n dislikeCount: 386,\n },\n {\n id: \"8\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1739849/pexels-photo-1739849.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Building a RESTful API with Node.js and Express\",\n description:\n \"Learn how to create a RESTful API using Node.js and the Express framework for building web applications.\",\n duration: \"24:33\",\n views: \"14.5k\",\n isPublished: true,\n time: \"7 hours ago\",\n createdAt: \"2023-09-15T09:54:42.381Z\",\n owner: {\n id: \"8\",\n username: \"apibuilder\",\n fullName: \"API Builder\",\n avatar:\n \"https://images.pexels.com/photos/1739942/pexels-photo-1739942.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 2773,\n dislikeCount: 50,\n },\n {\n id: \"9\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1739854/pexels-photo-1739854.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Introduction to React Native\",\n description:\n \"Discover how to build mobile applications using React Native for both Android and iOS platforms.\",\n duration: \"19:58\",\n views: \"10.9k\",\n isPublished: true,\n time: \"8 hours ago\",\n createdAt: \"2023-09-14T09:54:42.381Z\",\n owner: {\n id: \"9\",\n username: \"reactnativedev\",\n fullName: \"React Native Dev\",\n avatar:\n \"https://images.pexels.com/photos/1739856/pexels-photo-1739856.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 1346,\n dislikeCount: 353,\n },\n {\n id: \"10\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1144256/pexels-photo-1144256.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Creating Custom Hooks in React\",\n description:\n \"Learn how to create and use custom hooks to share logic across multiple React components.\",\n duration: \"16:37\",\n views: \"9.3k\",\n isPublished: true,\n time: \"9 hours ago\",\n createdAt: \"2023-09-13T09:54:42.381Z\",\n owner: {\n id: \"10\",\n username: \"hookmaster\",\n fullName: \"Hook Master\",\n avatar:\n \"https://images.pexels.com/photos/1144257/pexels-photo-1144257.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 1578,\n dislikeCount: 294,\n },\n {\n id: \"11\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1144259/pexels-photo-1144259.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Advanced CSS: Flexbox and Grid Layouts\",\n description:\n \"Dive deep into CSS layout techniques with Flexbox and Grid for modern and responsive web design.\",\n duration: \"28:15\",\n views: \"16.7k\",\n isPublished: false,\n time: \"10 hours ago\",\n createdAt: \"2023-09-12T09:54:42.381Z\",\n owner: {\n id: \"11\",\n username: \"csswizard\",\n fullName: \"CSS Wizard\",\n avatar:\n \"https://images.pexels.com/photos/1144261/pexels-photo-1144261.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 2506,\n dislikeCount: 87,\n },\n {\n id: \"12\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1144265/pexels-photo-1144265.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Introduction to Python Programming\",\n description:\n \"Get started with Python, a versatile and powerful programming language for beginners and professionals.\",\n duration: \"26:50\",\n views: \"17.8k\",\n isPublished: false,\n time: \"11 hours ago\",\n createdAt: \"2023-09-11T09:54:42.381Z\",\n owner: {\n id: \"12\",\n username: \"pythonista\",\n fullName: \"Pythonista\",\n avatar:\n \"https://images.pexels.com/photos/1144268/pexels-photo-1144268.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 1312,\n dislikeCount: 399,\n },\n {\n id: \"13\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1144260/pexels-photo-1144260.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Building Scalable Web Applications with Django\",\n description:\n \"Learn how to build robust and scalable web applications using the Django framework for Python.\",\n duration: \"32:18\",\n views: \"18.9M\",\n isPublished: true,\n time: \"12 hours ago\",\n createdAt: \"2023-09-10T09:54:42.381Z\",\n owner: {\n id: \"13\",\n username: \"djangomaster\",\n fullName: \"Django Master\",\n avatar:\n \"https://images.pexels.com/photos/1144269/pexels-photo-1144269.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 553,\n dislikeCount: 219,\n },\n {\n id: \"14\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1144263/pexels-photo-1144263.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Deep Dive into Machine Learning Algorithms\",\n description:\n \"Explore the inner workings of popular machine learning algorithms and their applications.\",\n duration: \"34:22\",\n views: \"19K\",\n isPublished: false,\n time: \"13 hours ago\",\n createdAt: \"2023-09-09T09:54:42.381Z\",\n owner: {\n id: \"14\",\n username: \"mlgeek\",\n fullName: \"ML Geek\",\n avatar:\n \"https://images.pexels.com/photos/1144275/pexels-photo-1144275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 2061,\n dislikeCount: 359,\n },\n {\n id: \"15\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1144276/pexels-photo-1144276.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Creating Interactive UIs with React and D3\",\n description:\n \"Learn how to build dynamic and interactive user interfaces with React and the D3.js data visualization library.\",\n duration: \"29:30\",\n views: \"20.1k\",\n isPublished: true,\n time: \"14 hours ago\",\n createdAt: \"2023-09-08T09:54:42.381Z\",\n owner: {\n id: \"15\",\n username: \"reactd3\",\n fullName: \"ReactD3\",\n avatar:\n \"https://images.pexels.com/photos/1144277/pexels-photo-1144277.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 1165,\n dislikeCount: 10,\n },\n {\n id: \"16\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1144274/pexels-photo-1144274.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Node.js Authentication with Passport.js\",\n description:\n \"Learn how to implement user authentication in Node.js applications using the Passport.js middleware.\",\n duration: \"26:58\",\n views: \"21.2k\",\n isPublished: true,\n time: \"15 hours ago\",\n createdAt: \"2023-09-07T09:54:42.381Z\",\n owner: {\n id: \"16\",\n username: \"passportpro\",\n fullName: \"Passport Pro\",\n avatar:\n \"https://images.pexels.com/photos/1144270/pexels-photo-1144270.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 1812,\n dislikeCount: 347,\n },\n {\n id: \"17\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1144280/pexels-photo-1144280.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Creating RESTful APIs with Django Rest Framework\",\n description:\n \"Learn how to build RESTful APIs with Django Rest Framework for building web applications.\",\n duration: \"30:42\",\n views: \"22.3k\",\n isPublished: false,\n time: \"16 hours ago\",\n createdAt: \"2023-09-06T09:54:42.381Z\",\n owner: {\n id: \"17\",\n username: \"djangorestapi\",\n fullName: \"Django Rest API\",\n avatar:\n \"https://images.pexels.com/photos/1144235/pexels-photo-1144235.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 1698,\n dislikeCount: 159,\n },\n {\n id: \"18\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1144282/pexels-photo-1144282.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Advanced JavaScript: Closures and Prototypes\",\n description:\n \"Dive deep into JavaScript concepts like closures and prototypes for more advanced programming.\",\n duration: \"35:28\",\n views: \"23.4k\",\n isPublished: false,\n time: \"17 hours ago\",\n createdAt: \"2023-09-05T09:54:42.381Z\",\n owner: {\n id: \"18\",\n username: \"jsninja\",\n fullName: \"JS Ninja\",\n avatar:\n \"https://images.pexels.com/photos/1144232/pexels-photo-1144232.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 2393,\n dislikeCount: 146,\n },\n {\n id: \"19\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1144231/pexels-photo-1144231.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Data Visualization with Tableau\",\n description:\n \"Learn how to create stunning visualizations and dashboards using Tableau for data analysis.\",\n duration: \"32:14\",\n views: \"24.5k\",\n isPublished: true,\n time: \"18 hours ago\",\n createdAt: \"2023-09-04T09:54:42.381Z\",\n owner: {\n id: \"19\",\n username: \"tableaumaster\",\n fullName: \"Tableau Master\",\n avatar:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 2137,\n dislikeCount: 280,\n },\n {\n id: \"20\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1144250/pexels-photo-1144250.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Building Real-Time Applications with Socket.IO\",\n description:\n \"Learn how to create real-time applications using Socket.IO for seamless communication between clients and servers.\",\n duration: \"27:37\",\n views: \"25.6k\",\n isPublished: true,\n time: \"19 hours ago\",\n createdAt: \"2023-09-03T09:54:42.381Z\",\n owner: {\n id: \"20\",\n username: \"socketioexpert\",\n fullName: \"Socket.IO Expert\",\n avatar:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 2991,\n dislikeCount: 155,\n },\n {\n id: \"21\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1144251/pexels-photo-1144251.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"GraphQL: Building APIs with Query Language\",\n description:\n \"Learn how to build efficient APIs using GraphQL and leverage the power of query language for data retrieval.\",\n duration: \"29:48\",\n views: \"26.7k\",\n isPublished: false,\n time: \"20 hours ago\",\n createdAt: \"2023-09-02T09:54:42.381Z\",\n owner: {\n id: \"21\",\n username: \"graphqlpro\",\n fullName: \"GraphQL Pro\",\n avatar:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 1095,\n dislikeCount: 359,\n },\n {\n id: \"22\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1115890/pexels-photo-1115890.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Full-Stack Development with MERN\",\n description:\n \"Master full-stack development with the MERN (MongoDB, Express, React, Node.js) stack.\",\n duration: \"33:15\",\n views: \"27.8k\",\n isPublished: false,\n time: \"21 hours ago\",\n createdAt: \"2023-09-01T09:54:42.381Z\",\n owner: {\n id: \"22\",\n username: \"mernstack\",\n fullName: \"MERN Stack\",\n avatar:\n \"https://images.pexels.com/photos/1115822/pexels-photo-1115822.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 2375,\n dislikeCount: 152,\n },\n {\n id: \"23\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1115824/pexels-photo-1115824.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Advanced CSS: Animations and Transitions\",\n description:\n \"Learn how to create captivating animations and transitions using CSS for dynamic web experiences.\",\n duration: \"31:55\",\n views: \"28.9k\",\n isPublished: true,\n time: \"22 hours ago\",\n createdAt: \"2023-08-31T09:54:42.381Z\",\n owner: {\n id: \"23\",\n username: \"cssanimations\",\n fullName: \"CSS Animations\",\n avatar:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 904,\n dislikeCount: 324,\n },\n {\n id: \"24\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1115821/pexels-photo-1115821.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Machine Learning for Image Recognition\",\n description:\n \"Dive into the world of image recognition using machine learning models for object detection.\",\n duration: \"36:40\",\n views: \"29M\",\n isPublished: false,\n time: \"23 hours ago\",\n createdAt: \"2023-08-30T09:54:42.381Z\",\n owner: {\n id: \"24\",\n username: \"mlimage\",\n fullName: \"ML Image\",\n avatar:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 912,\n dislikeCount: 97,\n },\n {\n id: \"25\",\n videoFile: \"\",\n thumbnail:\n \"https://images.pexels.com/photos/1115808/pexels-photo-1115808.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Advanced React Patterns\",\n description:\n \"Explore advanced patterns and techniques for building scalable and maintainable React applications.\",\n duration: \"30:25\",\n views: \"30.1k\",\n isPublished: true,\n time: \"1 day ago\",\n createdAt: \"2023-08-29T09:54:42.381Z\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n likeCount: 1391,\n dislikeCount: 319,\n },\n];\n\nexport const videoDetails = {\n id: \"1\",\n videoFile:\n \"https://res.cloudinary.com/dfw5nnic5/video/upload/v1695117968/Sample_1280x720_mp4_b4db0s.mp4\",\n videoType: \"video/mp4\",\n thumbnail:\n \"https://images.pexels.com/photos/1115808/pexels-photo-1115808.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n title: \"Advanced React Patterns\",\n description:\n '🚀 Dive into the world of React with our latest tutorial series: \"Advanced React Patterns\"! 🛠️ Whether you\\'re a seasoned developer or just starting out, this series is designed to elevate your React skills to the next level.',\n duration: \"30:25\",\n views: \"30,164\",\n likeCount: 3050,\n dislikeCount: 20,\n commentCount: 573,\n isPublished: true,\n createdAt: \"18 hours ago\",\n updatedAt: new Date(),\n liked: false,\n disliked: false,\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n comments: [\n {\n id: \"1\",\n video: \"1\",\n content:\n \"This series is exactly what I've been looking for! Excited to dive into these advanced React patterns. Thanks for putting this together!\",\n createdAt: \"17 hour ago\",\n owner: {\n id: \"25\",\n username: \"sarahjv\",\n fullName: \"Sarah Johnson\",\n avatar:\n \"https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-woman-reading-book-on-a-bench.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n },\n {\n id: \"2\",\n video: \"1\",\n content:\n \"Render props have always been a bit tricky for me. Can't wait to see how this series breaks it down. Thanks for sharing!\",\n createdAt: \"5 minutes ago\",\n owner: {\n id: \"25\",\n username: \"mikerod\",\n fullName: \"Michael Rodriguez\",\n avatar:\n \"https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n },\n {\n id: \"3\",\n video: \"1\",\n content:\n \"Higher-order components have been a mystery to me for far too long. Looking forward to demystifying them with this series. Thanks!\",\n createdAt: \"1 hour ago\",\n owner: {\n id: \"25\",\n username: \"emilyt\",\n fullName: \"Emily Turner\",\n avatar:\n \"https://images.pexels.com/photos/18096595/pexels-photo-18096595/free-photo-of-music-on-street.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n },\n {\n id: \"4\",\n video: \"1\",\n content:\n \"Compound components are a game-changer for UI development. Can't wait to learn more about them. Great work on this series!\",\n createdAt: \"3 hour ago\",\n owner: {\n id: \"25\",\n username: \"davidc\",\n fullName: \"David Chen\",\n avatar:\n \"https://images.pexels.com/photos/18094275/pexels-photo-18094275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n },\n {\n id: \"5\",\n video: \"1\",\n content:\n \"Controlled vs. uncontrolled components - finally! This topic has always confused me. Thanks for breaking it down!\",\n createdAt: \"12 hour ago\",\n owner: {\n id: \"25\",\n username: \"alex_p\",\n fullName: \"Alex Parker\",\n avatar:\n \"https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n },\n {\n id: \"6\",\n video: \"1\",\n content:\n \"This series is a goldmine for React developers! Compound components are something I've been eager to master. Thanks for this!\",\n createdAt: \"5 hour ago\",\n owner: {\n id: \"25\",\n username: \"jessicalee\",\n fullName: \"Jessica Lee\",\n avatar:\n \"https://images.pexels.com/photos/7775637/pexels-photo-7775637.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n },\n {\n id: \"7\",\n video: \"1\",\n content:\n \"This is exactly what I needed to take my React skills to the next level. Looking forward to diving into the render props section!\",\n createdAt: \"Just now\",\n owner: {\n id: \"25\",\n username: \"ryanjax\",\n fullName: \"Ryan Jackson\",\n avatar:\n \"https://images.pexels.com/photos/3532545/pexels-photo-3532545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n },\n {\n id: \"8\",\n video: \"1\",\n content:\n \"This series looks amazing! I'm especially excited to learn more about controlled vs. uncontrolled components. Thanks for sharing!\",\n createdAt: \"1 minutes ago\",\n owner: {\n id: \"25\",\n username: \"lauraw\",\n fullName: \"Laura Williams\",\n avatar:\n \"https://images.pexels.com/photos/3532552/pexels-photo-3532552.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n },\n },\n ],\n};\n\nexport const playlistList = [\n {\n id: \"1\",\n videos: videos,\n name: \"React Mastery\",\n views: \"100K\",\n description:\n \"Master the art of building dynamic user interfaces with React.\",\n createdAt: \"2 hours ago\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n },\n {\n id: \"2\",\n videos: [videos[3], videos[4], videos[5]],\n name: \"JavaScript Fundamentals\",\n views: \"120K\",\n description:\n \"Learn the core concepts and fundamentals of JavaScript programming language.\",\n createdAt: \"3 hours ago\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n },\n {\n id: \"3\",\n videos: [videos[6], videos[7], videos[8]],\n name: \"TypeScript Essentials\",\n views: \"90K\",\n description:\n \"Dive into TypeScript for enhanced type safety and scalable JavaScript applications.\",\n createdAt: \"4 hours ago\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n },\n {\n id: \"4\",\n videos: [videos[9], videos[10], videos[11]],\n name: \"React State Management\",\n views: \"80K\",\n description:\n \"Explore various state management techniques in React applications.\",\n createdAt: \"5 hours ago\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n },\n {\n id: \"5\",\n videos: [videos[12], videos[13], videos[14]],\n name: \"Advanced JavaScript Techniques\",\n views: \"110K\",\n description:\n \"Delve into advanced JavaScript concepts and techniques for professional-level programming.\",\n createdAt: \"6 hours ago\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n },\n];\n\nexport const tweets = [\n {\n id: \"1\",\n likeCount: 425,\n dislikeCount: 87,\n liked: true,\n disliked: false,\n content:\n \"Exploring the latest features in JavaScript ES11! The language keeps evolving. 💡 #JavaScript #ES11\",\n createdAt: \"5 hours ago\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n },\n {\n id: \"2\",\n likeCount: 425,\n dislikeCount: 87,\n liked: false,\n disliked: false,\n content:\n \"Embracing the benefits of TypeScript for stronger, more reliable code. 🚀 #TypeScript #Programming\",\n createdAt: \"6 hours ago\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n },\n {\n id: \"3\",\n likeCount: 425,\n dislikeCount: 87,\n liked: false,\n disliked: false,\n content:\n \"Styling made easy with Tailwind CSS! Rapidly build beautiful, responsive interfaces. 🎨 #TailwindCSS #WebDev\",\n createdAt: \"7 hours ago\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n },\n {\n id: \"4\",\n likeCount: 425,\n dislikeCount: 87,\n liked: true,\n disliked: false,\n content:\n \"Building dynamic user interfaces with React! The go-to library for modern web development. 🚀 #React #WebDev\",\n createdAt: \"8 hours ago\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n },\n {\n id: \"5\",\n likeCount: 425,\n dislikeCount: 87,\n liked: false,\n disliked: true,\n content:\n \"Next.js makes server-side rendering a breeze! Boost your React app's performance with ease. 🚀 #Nextjs #React\",\n createdAt: \"9 hours ago\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n },\n {\n id: \"6\",\n likeCount: 425,\n dislikeCount: 87,\n liked: true,\n disliked: false,\n content:\n \"Dive into advanced JavaScript concepts like closures and prototypes. Level up your coding skills! 🔍 #AdvancedJS #CodingTips\",\n createdAt: \"10 hours ago\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n },\n {\n id: \"7\",\n likeCount: 425,\n dislikeCount: 87,\n liked: true,\n disliked: false,\n content:\n \"Mastering TypeScript: From basics to advanced concepts. Boost your development workflow with strong typing! 🚀 #TypeScript #Development\",\n createdAt: \"11 hours ago\",\n owner: {\n id: \"26\",\n username: \"tscripter\",\n fullName: \"TS Scripter\",\n avatar:\n \"https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"420K\",\n },\n },\n {\n id: \"8\",\n likeCount: 425,\n dislikeCount: 87,\n liked: true,\n disliked: false,\n content:\n \"Simplify your CSS workflow with Tailwind CSS. Effortless styling for modern web development! 🎨 #TailwindCSS #WebDev\",\n createdAt: \"12 hours ago\",\n owner: {\n id: \"27\",\n username: \"tailwiz\",\n fullName: \"Tailwind Wizard\",\n avatar:\n \"https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"600K\",\n },\n },\n {\n id: \"9\",\n likeCount: 425,\n dislikeCount: 87,\n liked: true,\n disliked: false,\n content:\n \"Building dynamic UIs with React - A comprehensive guide for developers. Get started with React today! 🚀 #React #WebDevelopment\",\n createdAt: \"13 hours ago\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n },\n {\n id: \"10\",\n likeCount: 425,\n dislikeCount: 87,\n liked: true,\n disliked: false,\n content:\n \"Optimize server-side rendering with Next.js. Improve performance and SEO for your React applications! 🚀 #Nextjs #React\",\n createdAt: \"14 hours ago\",\n owner: {\n id: \"25\",\n username: \"reactpatterns\",\n fullName: \"React Patterns\",\n avatar:\n \"https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\n subscribers: \"757K\",\n },\n },\n];\n\nexport const channels = videos.map((video, i) => ({\n ...video.owner,\n subscribers: 20 * (i + 1) + \"K\",\n isSubscribed: i % 2 == 0,\n}));\n" }, { "path": "src/components/templates/youtube/delete-video.jsx", "content": "\"use client\";\nimport {\n EyeIcon,\n HeartIcon,\n MagnifyingGlassIcon,\n PencilIcon,\n PlusIcon,\n TrashIcon,\n UserIcon,\n XCircleIcon,\n XMarkIcon,\n} from \"@heroicons/react/24/outline\";\nimport React from \"react\";\nimport { navItems, logo, videos } from \"./data\";\nimport { classNames } from \"@/utils\";\n\nconst DeleteVideo = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n

\n Welcome Back, React Patterns\n

\n Seamless Video Management, Elevated Results.\n

\n \n

\n \n \n \n

{title}

{count}

\n ))}\n

\n \n \n \n \n \n \n \n \n \n \n \n \n {videos.map((video) => (\n \n \n \n \n \n \n \n \n ))}\n \n

Status	Status	Uploaded	Rating	\n Date uploaded\n
\n \n \n \n \n \n \n	\n \n \n {video.isPublished ? \"Published\" : \"Unpublished\"}\n \n \n	\n \n \n {video.title} \n \n	\n \n \n {video.likeCount} likes\n \n \n {video.dislikeCount} dislikes\n \n \n	\n {new Date(video.createdAt).toLocaleDateString()}\n	\n \n \n \n \n

\n {/* Modal Popup */}\n

\n \n \n \n

\n Delete Video\n \n Are you sure you want to delete this video? Once its deleted,\n you will not be able to recover it.\n \n

\n \n

\n\n

\n \n \n

\n );\n};\n\nexport default DeleteVideo;\n" }, { "path": "src/components/templates/youtube/edit-channel-info.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n ClockIcon,\n ListBulletIcon,\n MagnifyingGlassIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo } from \"./data\";\n\nconst EditChannelInfo = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n

\n\n

React Patterns

@reactpatterns

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n

\n\n

Channel Info

\n Update your Channel details here.\n

\n \n Username\n \n

\n vidplay.com/\n

\n \n

\n \n Description\n \n \n

\n 275 characters left\n

\n \n \n \n \n \n \n \n

\n \n \n \n \n \n

\n \n Timezone\n \n

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n

\n );\n};\n\nexport default EditChannelInfo;\n" }, { "path": "src/components/templates/youtube/edit-personal-info.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n CloudArrowUpIcon,\n EnvelopeIcon,\n MagnifyingGlassIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo } from \"./data\";\n\nconst EditPersonalInfo = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n

\n \n \n \n \n

\n \n

\n \n \n \n \n

\n\n

React Patterns

@reactpatterns

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n

\n\n

Personal Info

\n Update your photo and personal details.\n

\n \n First name\n \n \n

\n \n Last name\n \n \n

\n \n Email address\n \n

\n \n

\n \n \n

\n );\n};\n\nexport default EditPersonalInfo;\n" }, { "path": "src/components/templates/youtube/edit-video.jsx", "content": "\"use client\";\nimport {\n EyeIcon,\n HeartIcon,\n MagnifyingGlassIcon,\n PencilIcon,\n PlusIcon,\n TrashIcon,\n UserIcon,\n XCircleIcon,\n XMarkIcon,\n} from \"@heroicons/react/24/outline\";\nimport React from \"react\";\nimport { navItems, logo, videos } from \"./data\";\nimport { classNames } from \"@/utils\";\n\nconst EditVideo = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n

\n Welcome Back, React Patterns\n

\n Seamless Video Management, Elevated Results.\n

\n \n

\n \n \n \n

{title}

{count}

\n ))}\n

\n \n \n \n \n \n \n \n \n \n \n \n \n {videos.map((video) => (\n \n \n \n \n \n \n \n \n ))}\n \n

Status	Status	Uploaded	Rating	\n Date uploaded\n
\n \n \n \n \n \n \n	\n \n \n {video.isPublished ? \"Published\" : \"Unpublished\"}\n \n \n	\n \n \n {video.title} \n \n	\n \n \n {video.likeCount} likes\n \n \n {video.dislikeCount} dislikes\n \n \n	\n {new Date(video.createdAt).toLocaleDateString()}\n	\n \n \n \n \n

\n {/* Modal Popup */}\n

\n Edit Video\n \n Share where you've worked on your profile.\n \n

\n \n

\n\n \n Thumbnail^*\n \n \n \n \n \n\n

\n \n Title^*\n \n \n

\n \n Description^*\n \n \n

\n \n \n

\n );\n};\n\nexport default EditVideo;\n" }, { "path": "src/components/templates/youtube/empty-videos.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport {\n MagnifyingGlassIcon,\n PlayIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport React from \"react\";\nimport { bottomTotalItems, navItems, logo } from \"./data\";\n\nconst EmptyVideos = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n \n

\n \n \n \n

No videos available

\n There are no videos here available. Please try to search some\n thing else.\n

\n );\n};\n\nexport default EmptyVideos;\n" }, { "path": "src/components/templates/youtube/index.ts", "content": "import EmptyVideos from \"./empty-videos\";\nimport VideoCards from \"./video-cards\";\nimport VideoList from \"./video-list\";\nimport VideoDetail from \"./video-detail\";\nimport ChannelEmptyVideo from \"./channel-empty-video\";\nimport ChannelVideoList from \"./channel-video-list\";\nimport ChannelEmptyPlaylist from \"./channel-empty-playlist\";\nimport ChannelPlaylist from \"./channel-playlist\";\nimport ChannelPlaylistVideos from \"./channel-playlist-videos\";\nimport ChannelEmptyTweet from \"./channel-empty-tweet\";\nimport ChannelTweets from \"./channel-tweets\";\nimport ChannelEmptySubscribed from \"./channel-empty-subscribed\";\nimport ChannelSubscribed from \"./channel-subscribed\";\nimport MyChannelEmptyVideo from \"./mychannel-empty-video\";\nimport MyChannelEmptyTweet from \"./mychannel-empty-tweet\";\nimport MyChannelTweets from \"./mychannel-tweets\";\nimport EditPersonalInfo from \"./edit-personal-info\";\nimport EditChannelInfo from \"./edit-channel-info\";\nimport ChangePassword from \"./change-password\";\nimport Dashboard from \"./dashboard\";\nimport Register from \"./register\";\nimport Login from \"./login\";\nimport UploadVideo from \"./upload-video\";\nimport PrivacyPolicy from \"./privacy-policy\";\nimport TermsAndConditions from \"./terms-and-conditions\";\nimport UploadingVideo from \"./uploading-video\";\nimport UploadedVideo from \"./uploaded-video\";\nimport EditVideo from \"./edit-video\";\nimport DeleteVideo from \"./delete-video\";\n\nconst Youtube = {\n EmptyVideos,\n VideoCards,\n VideoList,\n VideoDetail,\n ChannelEmptyPlaylist,\n ChannelEmptySubscribed,\n ChannelEmptyTweet,\n ChannelEmptyVideo,\n ChannelPlaylistVideos,\n ChannelSubscribed,\n ChannelTweets,\n ChannelVideoList,\n ChannelPlaylist,\n MyChannelEmptyTweet,\n MyChannelEmptyVideo,\n MyChannelTweets,\n EditPersonalInfo,\n EditChannelInfo,\n ChangePassword,\n Dashboard,\n Register,\n Login,\n UploadVideo,\n PrivacyPolicy,\n TermsAndConditions,\n UploadingVideo,\n UploadedVideo,\n EditVideo,\n DeleteVideo,\n};\n\nexport default Youtube;\n" }, { "path": "src/components/templates/youtube/login.jsx", "content": "import React from \"react\";\nimport { logo } from \"./data\";\n\nconst Login = () => {\n return (\n

{logo}

\n Play\n

\n\n \n Email*\n \n \n \n

\n );\n};\n\nexport default Login;\n" }, { "path": "src/components/templates/youtube/mychannel-empty-tweet.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n EllipsisHorizontalIcon,\n FaceSmileIcon,\n MagnifyingGlassIcon,\n PencilIcon,\n UsersIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo } from \"./data\";\n\nconst MyChannelEmptyTweet = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n \n

\n \n \n \n

\n \n \n \n \n \n

No Tweets

\n This channel has yet to make a Tweet.\n

\n );\n};\n\nexport default MyChannelEmptyTweet;\n" }, { "path": "src/components/templates/youtube/mychannel-empty-video.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n MagnifyingGlassIcon,\n PencilIcon,\n PlayIcon,\n PlusIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo } from \"./data\";\n\nconst MyChannelEmptyVideo = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n \n \n \n

No videos uploaded

\n This page has yet to upload a video. Search another page in\n order to find more videos.\n

\n \n

\n );\n};\n\nexport default MyChannelEmptyVideo;\n" }, { "path": "src/components/templates/youtube/mychannel-tweets.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n EllipsisHorizontalIcon,\n FaceSmileIcon,\n HandThumbDownIcon,\n HandThumbUpIcon,\n MagnifyingGlassIcon,\n PencilIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo, tweets } from \"./data\";\n\nconst MyChannelTweets = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n \n

\n \n \n \n

\n {tweets.map((tweet) => (\n \n

\n \n

\n \n {tweet.owner.fullName}\n \n \n \n {tweet.createdAt}\n \n

{tweet.content}

\n \n \n \n \n \n \n

\n ))}\n

\n \n

\n \n );\n};\n\nexport default MyChannelTweets;\n" }, { "path": "src/components/templates/youtube/privacy-policy.jsx", "content": "import React from \"react\";\nimport { XCircleIcon } from \"@heroicons/react/24/outline\";\nimport { siteNavItems, logo } from \"./data\";\n\nconst PrivacyPolicy = () => {\n return (\n

{logo}

\n\n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

Privacy Policy

\n We care about your privacy\n

\n Your privacy is important to us at videoTube. We repect your privacy\n regarding any information we may collect from you across out\n website.\n

\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate\n facilis officia magni quidem labore obcaecati sequi repellat sit\n iusto modi doloribus excepturi consectetur, numquam quis. Lorem\n ipsum dolor sit amet, consectetur adipisicing elit. Nemo voluptatum\n provident eveniet neque impedit ipsa molestias, animi reiciendis\n dolorum vitae cumque, itaque quae. Repudiandae obcaecati eaque\n perferendis fuga amet at?\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad\n excepturi optio consequuntur quas deleniti sequi laboriosam rem,\n necessitatibus voluptates modi commodi exercitationem eos expedita\n repellendus? Quisquam reiciendis illo deleniti, eligendi architecto\n velit veniam. Odit repudiandae rem, recusandae placeat suscipit non\n incidunt similique optio facilis quae architecto minus iusto modi\n natus quod quidem laboriosam unde error explicabo ullam! Enim unde\n iste, beatae, corrupti, velit animi perferendis nisi maxime dolore\n qui aliquam.\n

\n What information do we collect?\n

\n Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit\n tenetur aperiam excepturi deleniti, tempora quidem magni obcaecati\n quas. Quo perspiciatis, deserunt velit porro ipsum, quod sit ratione\n cupiditate cumque aperiam dolorem adipisci architecto dolor id\n quisquam aliquid aspernatur. Repellat, consectetur? At harum\n necessitatibus nisi rem ullam sapiente laborum eaque? Harum?\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro at\n iusto laboriosam possimus in! Repellendus ea accusantium omnis\n impedit incidunt facere fuga consectetur quidem sint dolorem\n necessitatibus corporis itaque sed qui voluptates amet, sunt fugit?\n Deleniti explicabo et veniam alias eligendi similique, molestiae\n ipsa vitae rerum non repudiandae accusamus error temporibus\n pariatur. Sit totam, odit facilis adipisci ut vitae neque deserunt\n obcaecati. Laborum labore possimus ipsa quo placeat, tempora\n voluptatibus commodi itaque quia cupiditate nihil at, porro deleniti\n totam quaerat!\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum\n fuga asperiores voluptatibus quidem dolores, quos officiis nostrum\n veritatis. A praesentium dicta temporibus vitae, excepturi sequi\n itaque? Pariatur veniam praesentium error qui necessitatibus. Et\n autem dolorum consectetur officia, provident quasi soluta?\n

\n How do we use your information\n

\n Do we use cookies and other tracking technologies?\n

\n How long do we keep tour information?\n

\n How do we keep your information safe?\n

\n What are your privacy rights\n

\n How can you contact us about this policy?\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error,\n voluptas.\n
Lorem ipsum dolor sit amet consectetur adipisicing.
\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus\n voluptatem optio autem eveniet ab natus!\n

\n \n

\n );\n};\n\nexport default PrivacyPolicy;\n" }, { "path": "src/components/templates/youtube/register.jsx", "content": "import React from \"react\";\nimport { logo } from \"./data\";\n\nconst Register = () => {\n return (\n

{logo}

\n Play\n

\n\n \n Email*\n \n \n \n

\n );\n};\n\nexport default Register;\n" }, { "path": "src/components/templates/youtube/terms-and-conditions.jsx", "content": "import React from \"react\";\nimport { XCircleIcon } from \"@heroicons/react/24/outline\";\nimport { siteNavItems, logo } from \"./data\";\n\nconst TermsAndConditions = () => {\n return (\n

{logo}

\n\n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n Current as of 20 Jan 2022\n

Terms and conditions

\n By accessing our website, you are agreeing to be bound by these\n terms of service, and agree that you are responsible for compliance\n with any applicable local laws.\n

\n What information do we collect?\n

\n How do we use your information\n

\n Do we use cookies and other tracking technologies?\n

\n How long do we keep tour information?\n

\n How do we keep your information safe?\n

\n What are your privacy rights\n

\n How can you contact us about this policy?\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error,\n voluptas.\n
Lorem ipsum dolor sit amet consectetur adipisicing.
\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus\n voluptatem optio autem eveniet ab natus!\n

\n \n

\n );\n};\n\nexport default TermsAndConditions;\n" }, { "path": "src/components/templates/youtube/upload-video.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n ArrowUpTrayIcon,\n MagnifyingGlassIcon,\n PencilIcon,\n PlayIcon,\n PlusIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo } from \"./data\";\n\nconst UploadVideo = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n \n \n \n

No videos uploaded

\n This page has yet to upload a video. Search another page in\n order to find more videos.\n

\n \n

\n {/* Modal Popup */}\n

Upload Videos

\n \n

\n \n \n \n

\n Drag and drop video files to upload\n

\n Your videos will be private untill you publish them.\n

\n \n \n Select Files\n \n

\n \n Thumbnail^*\n \n \n

\n \n Title^*\n \n \n

\n \n Description^*\n \n \n

\n );\n};\n\nexport default UploadVideo;\n" }, { "path": "src/components/templates/youtube/uploaded-video.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n FilmIcon,\n MagnifyingGlassIcon,\n PencilIcon,\n PlayIcon,\n PlusIcon,\n XCircleIcon,\n XMarkIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo } from \"./data\";\nimport { CheckCircleIcon } from \"@heroicons/react/20/solid\";\n\nconst UploadedVideo = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n \n \n \n

No videos uploaded

\n This page has yet to upload a video. Search another page in\n order to find more videos.\n

\n \n

\n {/* Modal Popup */}\n

\n Uploaded Video\n \n Track your video uploading process.\n \n

\n \n

\n \n \n \n

Dashboard prototype recording.mp4

16 MB

\n \n \n \n Uploaded Successfully\n

\n \n \n

\n );\n};\n\nexport default UploadedVideo;\n" }, { "path": "src/components/templates/youtube/uploading-video.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n FilmIcon,\n MagnifyingGlassIcon,\n PencilIcon,\n PlayIcon,\n PlusIcon,\n XCircleIcon,\n XMarkIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo } from \"./data\";\n\nconst UploadingVideo = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n

\n \n \n \n\n

React Patterns

@reactpatterns

\n 600k Subscribers · 220 Subscribed\n

\n\n

\n \n

\n\n

\n \n
\n \n
\n \n
\n \n

\n \n \n \n

No videos uploaded

\n This page has yet to upload a video. Search another page in\n order to find more videos.\n

\n \n

\n {/* Modal Popup */}\n

\n Uploading Video...\n \n Track your video uploading process.\n \n

\n \n

\n \n \n \n

Dashboard prototype recording.mp4

16 MB

\n \n \n \n \n Uploading...\n

\n \n \n Finish\n \n

\n );\n};\n\nexport default UploadingVideo;\n" }, { "path": "src/components/templates/youtube/video-cards.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport { MagnifyingGlassIcon, XCircleIcon } from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo, videos } from \"./data\";\n\nconst VideoCards = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n \n

\n {videos\n .filter((video) => video.isPublished)\n .map((video) => (\n

\n \n

\n \n {video.duration}\n \n

\n \n

{video.title}

\n {video.views} Views · {video.time}\n

\n {video.owner.fullName}\n

\n ))}\n

\n );\n};\n\nexport default VideoCards;\n" }, { "path": "src/components/templates/youtube/video-detail.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport {\n CheckIcon,\n FolderPlusIcon,\n HandThumbDownIcon,\n HandThumbUpIcon,\n MagnifyingGlassIcon,\n UserPlusIcon,\n XCircleIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo, videos, videoDetails } from \"./data\";\n\nconst VideoList = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n \n

{videoDetails.title}

\n {videoDetails.views} Views ·\n {videoDetails.createdAt}\n

\n \n \n \n \n \n \n \n \n \n \n

\n \n \n

\n \n

\n {videoDetails.owner.fullName}\n

\n {videoDetails.owner.subscribers} Subscribers\n

\n \n

{videoDetails.description}

\n \n

\n {videoDetails.commentCount} Comments\n

\n \n

\n {videoDetails.comments.map((comment) => (\n

\n \n

\n {comment.owner.fullName} · \n {comment.createdAt}\n

\n @{comment.owner.username}\n

{comment.content}

\n\n

\n ))}\n

\n {videos\n .filter((video) => video.isPublished)\n .map((video) => (\n \n

\n \n

\n \n {video.duration}\n \n

\n \n

\n {video.title}\n

\n {video.owner.fullName}\n

\n {video.views} Views · {video.time}\n

\n ))}\n

\n \n \n \n );\n};\n\nexport default VideoList;\n" }, { "path": "src/components/templates/youtube/video-list.jsx", "content": "\"use client\";\nimport { classNames } from \"@/utils\";\nimport React from \"react\";\nimport { MagnifyingGlassIcon, XCircleIcon } from \"@heroicons/react/24/outline\";\nimport { bottomTotalItems, navItems, logo, videos } from \"./data\";\n\nconst VideoList = () => {\n return (\n

{logo}

\n \n \n \n

\n {logo}\n \n

\n \n

\n\n

\n \n \n

\n \n

\n {videos\n .filter((video) => video.isPublished)\n .map((video) => (\n \n

\n \n

\n \n {video.duration}\n \n

\n \n

\n {video.title}\n

\n {video.views} Views · {video.time}\n

\n \n

\n {video.owner.fullName}\n

\n \n

\n ))}\n

\n \n

\n \n );\n};\n\nexport default VideoList;\n" }, { "path": "src/types/utils.ts", "content": "export type TailwindIconType = React.ForwardRefExoticComponent<\n Omit, \"ref\"> & {\n title?: string | undefined;\n titleId?: string | undefined;\n } & React.RefAttributes\n>;\n\nexport type SelectOptionType = {\n id: string;\n name: string;\n};\n" }, { "path": "src/utils/index.ts", "content": "import { ReactElement } from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\nexport const classNames = (...classes: string[]) => {\n return classes.filter(Boolean).join(\" \");\n};\n\nexport const renderHTMLFromJSX = (jsx: ReactElement): string => {\n return renderToStaticMarkup(jsx).replaceAll(\"&\", \"&\");\n};\n" }, { "path": "src/utils/screens.tsx", "content": "import Authentication from \"@/components/templates/authentication\";\nimport Chat from \"@/components/templates/chat\";\nimport SocialMedia from \"@/components/templates/social-media\";\nimport Todo from \"@/components/templates/todo\";\nimport Youtube from \"@/components/templates/youtube\";\n\nexport const applications = [\n {\n name: \"Authentication app\",\n id: \"authentication\",\n subtitle: \"User Authentication\",\n cover: \"/auth.png\",\n description:\n \"Explore authentication screens for a seamless and secure login and registration UI designs. Access the HTML templates by clicking below.\",\n pages: [\n {\n id: \"register\",\n name: \"Register Page\",\n component: ,\n },\n {\n id: \"login\",\n name: \"Login Page\",\n component: ,\n },\n {\n id: \"forgot-password\",\n name: \"Forgot Password Page\",\n component: ,\n },\n ],\n },\n\n {\n name: \"Chat app\",\n id: \"chat\",\n subtitle: \"Real-time Chat\",\n cover: \"/chat.png\",\n description:\n \"Discover HTML templates for our chat application screens. Explore sleek, intuitive and responsive designs for seamless communication experiences.\",\n pages: [\n {\n id: \"empty-chats\",\n name: \"Empty Chats\",\n component: ,\n },\n {\n id: \"chat-screen\",\n name: \"Chat Screen\",\n component: ,\n },\n {\n id: \"create-normal-chat\",\n name: \"Create Personal Chat\",\n component: ,\n },\n {\n id: \"create-group-chat\",\n name: \"Create Group Chat\",\n component: ,\n },\n {\n id: \"group-chat-info\",\n name: \"About Group Chat\",\n component: ,\n },\n {\n id: \"chat-register\",\n name: \"Chat Register\",\n component: ,\n },\n {\n id: \"chat-login\",\n name: \"Chat Login\",\n component: ,\n },\n ],\n },\n {\n name: \"Social Media App\",\n id: \"social-media\",\n subtitle: \"Social Media\",\n cover: \"/social-media.png\",\n description:\n \"Discover HTML templates for social media application screens. Dive into our UI designs to create engaging, responsive and user-friendly social platforms.\",\n pages: [\n {\n id: \"post-listing\",\n name: \"Post Listing\",\n component: ,\n },\n {\n id: \"post-detail\",\n name: \"Post Detail\",\n component: ,\n },\n {\n id: \"user-profile\",\n name: \"User Profile\",\n component: ,\n },\n {\n id: \"my-profile\",\n name: \"My Profile\",\n component: ,\n },\n {\n id: \"edit-profile\",\n name: \"Edit Profile\",\n component: ,\n },\n {\n id: \"change-password\",\n name: \"Change Password\",\n component: ,\n },\n {\n id: \"bookmarked-posts\",\n name: \"Bookmarked Posts\",\n component: ,\n },\n {\n id: \"social-register\",\n name: \"Social Register\",\n component: ,\n },\n {\n id: \"social-login\",\n name: \"Social Login\",\n component: ,\n },\n ],\n },\n {\n name: \"Todo app\",\n id: \"todo\",\n subtitle: \"Task Management\",\n cover: \"/todo.png\",\n description:\n \"Explore UI designs for Todo app, a user-friendly task management application. Streamline your productivity by accessing the HTML templates.\",\n pages: [\n {\n id: \"empty-todos\",\n name: \"Empty Todos Page\",\n component: ,\n },\n {\n id: \"todos\",\n name: \"Todos Page\",\n component: ,\n },\n ],\n },\n {\n name: \"Youtube App\",\n id: \"youtube\",\n subtitle: \"Video Sharing Platform\",\n cover: \"/youtube.png\",\n description:\n \"Explore UI designs for a Youtube clone, a user-friendly video sharing platform. Enhance your viewing experience with these accessible HTML templates.\",\n pages: [\n {\n id: \"empty-videos\",\n name: \"Empty Video Page\",\n component: ,\n },\n {\n id: \"video-card\",\n name: \"Video Listing Page (Card View)\",\n component: ,\n },\n {\n id: \"video-list\",\n name: \"Video Listing Page (List View)\",\n component: ,\n },\n {\n id: \"video-detail\",\n name: \"Video Detail Page\",\n component: ,\n },\n {\n id: \"channel-empty-video\",\n name: \"Channel Empty Video Page\",\n component: ,\n },\n {\n id: \"channel-video-list\",\n name: \"Channel Video List Page\",\n component: ,\n },\n {\n id: \"channel-empty-playlist\",\n name: \"Channel Empty Playlist Page\",\n component: ,\n },\n {\n id: \"channel-playlist\",\n name: \"Channel Playlist Page\",\n component: ,\n },\n {\n id: \"channel-paylist-videos\",\n name: \"Channel Playlist Videos Page\",\n component: ,\n },\n {\n id: \"channel-empty-tweet\",\n name: \"Channel Empty Tweet Page\",\n component: ,\n },\n {\n id: \"channel-tweets\",\n name: \"Channel Tweets Page\",\n component: ,\n },\n {\n id: \"channel-empty-subscribed\",\n name: \"Channel Empty Subscribed Page\",\n component: ,\n },\n {\n id: \"channel-subscribed\",\n name: \"Channel Subscribed Page\",\n component: ,\n },\n {\n id: \"login\",\n name: \"Login Page\",\n component: ,\n },\n {\n id: \"register\",\n name: \"Register Page\",\n component: ,\n },\n {\n id: \"mychannel-empty-video\",\n name: \"My Channel Empty Video Page\",\n component: ,\n },\n {\n id: \"upload-video\",\n name: \"Upload Video Modal Popup\",\n component: ,\n },\n {\n id: \"uploading-video\",\n name: \"Uploading Video Modal Popup\",\n component: ,\n },\n {\n id: \"uploaded-video\",\n name: \"Uploaded Video Successfully Modal Popup\",\n component: ,\n },\n {\n id: \"mychannel-empty-tweet\",\n name: \"My Channel Empty Tweet Page\",\n component: ,\n },\n {\n id: \"mychannel-tweets\",\n name: \"My Channel Tweets Page\",\n component: ,\n },\n {\n id: \"edit-personal-info\",\n name: \"Edit Personal Info Page\",\n component: ,\n },\n {\n id: \"edit-channel-info\",\n name: \"Edit Channel Info Page\",\n component: ,\n },\n {\n id: \"change-password\",\n name: \"Change Password Page\",\n component: ,\n },\n {\n id: \"dashboard\",\n name: \"Admin Dashboard Page\",\n component: ,\n },\n {\n id: \"edit-video\",\n name: \"Edit Video Modal Popup\",\n component: ,\n },\n {\n id: \"delete-video\",\n name: \"Delete Video Modal Popup\",\n component: ,\n },\n {\n id: \"privacy-policy\",\n name: \"Privacy Policy Page\",\n component: ,\n },\n {\n id: \"terms-and-conditions\",\n name: \"Terms and Conditions Page\",\n component: ,\n },\n ],\n },\n];\n\nexport const getComponentByAppPageId = (appId: string, pageId: string) => {\n const application = applications.find((app) => app.id === appId);\n\n if (!application) return

Application id in invalid

;\n\n const page = application.pages.find((page) => page.id === pageId);\n\n if (!page) return

Page id in invalid

;\n\n return page.component;\n};\n" }, { "path": "tailwind.config.ts", "content": "import type { Config } from \"tailwindcss\";\n\nconst config: Config = {\n content: [\n \"./src/pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/utils/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n extend: {\n colors: {\n dark: \"#020617\",\n },\n },\n },\n plugins: [],\n};\nexport default config;\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"bundler\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\",\n \"allowSyntheticDefaultImports\": true,\n \"incremental\": true,\n \"plugins\": [\n {\n \"name\": \"next\"\n }\n ],\n \"paths\": {\n \"@/*\": [\n \"./src/*\"\n ]\n }\n },\n \"include\": [\n \"next-env.d.ts\",\n \"**/*.ts\",\n \"**/*.tsx\",\n \".next/types/**/*.ts\"\n ],\n \"exclude\": [\n \"node_modules\"\n ]\n}" } ]