[ { "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.*\n.yarn/*\n!.yarn/patches\n!.yarn/plugins\n!.yarn/releases\n!.yarn/versions\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.pnpm-debug.log*\n\n# env files (can opt-in for committing if needed)\n.env*\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n\n_pagefind/" }, { "path": ".source/index.ts", "content": "// @ts-nocheck -- skip type checking\nimport * as docs_10 from \"../content/docs/extensions/quicksnip.mdx?collection=docs&hash=1765841507830\"\nimport * as docs_9 from \"../content/docs/extensions/quicksnip-vscode.mdx?collection=docs&hash=1765841507830\"\nimport * as docs_8 from \"../content/docs/extensions/quicksnip-raycast.mdx?collection=docs&hash=1765841507830\"\nimport * as docs_7 from \"../content/docs/extensions/quicksnip-cli.mdx?collection=docs&hash=1765841507830\"\nimport * as docs_6 from \"../content/docs/contributing/third-party-apps.mdx?collection=docs&hash=1765841507830\"\nimport * as docs_5 from \"../content/docs/contributing/modifying-snippets.mdx?collection=docs&hash=1765841507830\"\nimport * as docs_4 from \"../content/docs/contributing/how-to-contribute.mdx?collection=docs&hash=1765841507830\"\nimport * as docs_3 from \"../content/docs/contributing/adding-snippets.mdx?collection=docs&hash=1765841507830\"\nimport * as docs_2 from \"../content/docs/installation.mdx?collection=docs&hash=1765841507830\"\nimport * as docs_1 from \"../content/docs/index.mdx?collection=docs&hash=1765841507830\"\nimport * as docs_0 from \"../content/docs/comparison.mdx?collection=docs&hash=1765841507830\"\nimport { _runtime } from \"fumadocs-mdx/runtime/next\"\nimport * as _source from \"../source.config\"\nexport const docs = _runtime.docs([{ info: {\"path\":\"comparison.mdx\",\"fullPath\":\"content/docs/comparison.mdx\"}, data: docs_0 }, { info: {\"path\":\"index.mdx\",\"fullPath\":\"content/docs/index.mdx\"}, data: docs_1 }, { info: {\"path\":\"installation.mdx\",\"fullPath\":\"content/docs/installation.mdx\"}, data: docs_2 }, { info: {\"path\":\"contributing/adding-snippets.mdx\",\"fullPath\":\"content/docs/contributing/adding-snippets.mdx\"}, data: docs_3 }, { info: {\"path\":\"contributing/how-to-contribute.mdx\",\"fullPath\":\"content/docs/contributing/how-to-contribute.mdx\"}, data: docs_4 }, { info: {\"path\":\"contributing/modifying-snippets.mdx\",\"fullPath\":\"content/docs/contributing/modifying-snippets.mdx\"}, data: docs_5 }, { info: {\"path\":\"contributing/third-party-apps.mdx\",\"fullPath\":\"content/docs/contributing/third-party-apps.mdx\"}, data: docs_6 }, { info: {\"path\":\"extensions/quicksnip-cli.mdx\",\"fullPath\":\"content/docs/extensions/quicksnip-cli.mdx\"}, data: docs_7 }, { info: {\"path\":\"extensions/quicksnip-raycast.mdx\",\"fullPath\":\"content/docs/extensions/quicksnip-raycast.mdx\"}, data: docs_8 }, { info: {\"path\":\"extensions/quicksnip-vscode.mdx\",\"fullPath\":\"content/docs/extensions/quicksnip-vscode.mdx\"}, data: docs_9 }, { info: {\"path\":\"extensions/quicksnip.mdx\",\"fullPath\":\"content/docs/extensions/quicksnip.mdx\"}, data: docs_10 }], [{\"info\":{\"path\":\"meta.json\",\"fullPath\":\"content/docs/meta.json\"},\"data\":{\"title\":\"Docs\",\"pages\":[\"---Introduction---\",\"index.mdx\",\"installation.mdx\",\"comparison.mdx\",\"---Extensions---\",\"...extensions\",\"---Contributing---\",\"...contributing\"],\"root\":true}}, {\"info\":{\"path\":\"contributing/meta.json\",\"fullPath\":\"content/docs/contributing/meta.json\"},\"data\":{\"title\":\"Contributing\",\"pages\":[\"how-to-contribute\",\"adding-snippets\",\"modifying-snippets\",\"third-party-apps\"]}}, {\"info\":{\"path\":\"extensions/meta.json\",\"fullPath\":\"content/docs/extensions/meta.json\"},\"data\":{\"title\":\"Extensions\",\"pages\":[\"quicksnip\",\"quicksnip-cli\",\"quicksnip-vscode\",\"quicksnip-raycast\"]}}])" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to QuickSnip\n\n> THIS FILE NEEDS TO BE REWORKED. IT'S IMPORTED FROM PREVIOUS VERSION FOR TESTING.\n\nHey there! 👋 First off, thanks for taking the time to contribute! ❤️\n\nYou can contribute in two main ways:\n\n- **Improving the code** (like fixing bugs or adding cool new features)\n- **Adding new code snippets** (or improving the existing ones!)\n\n---\n\n## Improving the code\n\n### How to report bugs\n\nIf you spot a bug in the codebase or issues with the documentation, please open up a [GitHub issue](https://github.com/technoph1le/quicksnip/issues) detailing the problem before creating a PR. Once confirmed with maintainers, you can then create a PR.\n\n### How to propose new features\n\nIf you are interested in proposing new features, please open up a new [GitHub discussion](https://github.com/technoph1le/quicksnip/discussions) with details for the proposed feature.\n\nPlease do not create a PR for a new feature without first discussing it with the maintainers. If you create a PR for a new feature without discussing it first, then your PR will be closed.\n\n---\n\n## Snippets Guidelines\n\n### Snippet Tags\n\n- Tags must describe the snippet with simple word.\n\nHere's an example:\n\n```md\n---\ntitle: Convert Number to Currency\ndescription: Converts a number to a currency format with a specific locale.\nauthor: axorax\ntags: number,currency\n---\n```\n\n**Do not use generic keywords or the language itself as a tag `utility` or `javascript`!**\n\n### Snippet Format\n\n**All** snippets should follow the following structure:\n\n- A `code` segment, containing a function with the actual snippet functionnality\n- An `example` segement, containing one or more examples of use\n\nExample in javascript:\n\n```js\nfunction example(x) {\n return x * 2;\n}\n\n// Usage:\nexample(5); // Returns: 10\n```\n\nIf your function doesn't return anything just show how to use it. If the result of your function is too complicated to be expressed in a single comment, your snippet is probably too complex to begin with.\n\n### Snippet boundaries\n\nTo ensure your snippet isn’t refused, consider these questions:\n\n- **Does the standard library of my language provide an easy way of doing this ?**\n- **Does that snippet not have a real, and practical use case ?**\n- **Could it be split into separate parts to be better understood ?**\n\nIf any answer is yes, then your snippet will most likely get rejected.\n\n---\n\n## Adding Snippets\n\n### Adding a New Snippet\n\n1. **Ensure your snippet match [guidelines](#snippets-guidelines)**\n\n2. **Navigate to the relevant folder:**\n\n - Go to the `/snippets` folder in the root directory.\n - Locate the folder for the programming language of your snippet, such as `javascript` or `python`.\n\n3. **Choose the correct category:**\n\n - Within the language folder, find the relevant category folder for your snippet.\n - If no suitable category exists, refer to [Adding a New Category](#adding-a-new-category).\n\n4. **Create a markdown file:**\n\n - Create a new file with a `.md` extension.\n - Name the file appropriately, keeping it descriptive and concise.\n\n5. **Add your snippet:**\n\n - Use the following format to structure your snippet:\n\n````md\n---\ntitle: Name of the snippet\ndescription: A short explanation of what the snippet does\ntags: tag1, tag2, tag3\nauthor: your-github-username\n---\n\n```lang\n// Your code here\n```\n````\n\nHere’s an example for JavaScript:\n\n````md\n---\ntitle: Format Date\ndescription: Formats a date in 'YYYY-MM-DD' format.\nauthor: technoph1le\ntags: date,format\n---\n\n```js\nconst formatDate = (date) => date.toISOString().split(\"T\")[0];\n\n// Usage:\nconsole.log(formatDate(new Date())); // Output: '2024-12-10'\n```\n````\n\n6. **Use syntax highlighting:**\n\n - Enclose your code with triple backticks (```).\n - Specify the language after the first set of backticks for syntax highlighting.\n\n7. **Test your snippet:**\n\n - Ensure your code runs as expected. \\\n To test that your snippets are formatted correctly use the `snippets:check` script:\n\n ```\n $ npm run snippets:check\n ```\n\n It will return nothing if they are well formatted, otherwise it will tell you what the error is.\n\n ***\n\n To preview the snippets, start the vite server using:\n\n ```\n $ npm run dev\n ```\n\n It will use HMR to update the snippets in the `/public` folder, making them available to the frontend.\n\nExpected file structure:\n\n```md\n/snippets\n|- language\n|- category-name\n|- your-snippet-here.md\n```\n\n> Please do **NOT** add or edit anything in `/public` folder. It will be used for consolidating snippets.\n\n### Editing a Existing Snippet\n\nIf you’d like to refine or improve an existing snippet:\n\n1. **Add a `contributors` field:**\n\n - Include your GitHub username under the `contributors` field in the metadata section.\n\n````md\n---\ntitle: Name of the snippet\ndescription: A short explanation of what the snippet does\ntags: tag1, tag2, tag3\nauthor: original-author\ncontributors: your-github-username\n---\n\n```\nUpdated code here\n```\n````\n\n2. **Credit all contributors:**\n\n - If contributors already exist, add your username separated by a comma\n\n```md\ncontributors: contributor1, contributor2, your-github-username\n```\n\n3. **Document changes:**\n\n - Clearly indicate what you updated and why in your pull request description.\n\n> We want to make sure that original author and contributor(s) are credited for their work.\n\n### Adding a New Category\n\nIf your snippet doesn’t fit into any existing category, you can create a new one! Just make sure it’s unique and doesn’t overlap with others (e.g., don’t create separate categories for “Date” and “Time” when “Date and Time” works).\n\n1. **Create a new category folder:**\n\n - In the relevant language directory, add a new folder.\n - Use a lowercase name with hyphens for separation (e.g., `file-handling`).\n\n2. **Add snippets:**\n\n - Follow the [Adding a New Snippet](#adding-a-new-snippet) instructions.\n\nExample structure:\n\n```md\n/snippets\n|- python\n|- file-handling\n|- list-manipulation\n|- ....\n```\n\n### Adding a New Language\n\nIf you want to introduce a new programming language, here's how to do it:\n\n1. **Create a language folder:**\n\n - Add a new folder under the `snippets` directory.\n - Name it after the language in lowercase (e.g., `go`, `ruby`).\n\n2. **Add categories and snippets:**\n\n - Follow the [Adding a New Snippet](#adding-a-new-snippet) and [Adding a New Category](#adding-a-new-category) guidelines.\n\n3. **Include an icon:**\n\n - Add an `icon.svg` file (50x50px) in the same language folder.\n - Use tools like [Resize SVG](https://www.iloveimg.com/resize-image/resize-svg) to ensure the correct size.\n\n4. **Double-check your work:**\n\n - Verify that everything is structured correctly and displays as intended.\n\n---\n\n## Testing Snippets\n\nTo test that your snippets are formatted correctly use the following script:\n\n```\n$ npm run snippets:check\n```\n\nIt will return nothing if they are well formatted, otherwise it will tell you what the error is.\n\n---\n\nTo preview the snippets, you need to consolidate them, use the following script:\n\n```\n$ npm run snippets:consolidate\n```\n\nIt will update the snippets in the `/public` folder, making them available to the frontend.\n\n## Final Notes\n\nWhether you’re fixing a tiny typo, writing a new snippet, or dreaming up big features, every bit counts! 🛠️\n\nIf you have any questions or need help, feel free to open a new [GitHub discussion](https://github.com/technoph1le/quicksnip/discussions).\n\nHappy coding! 💻✨\n" }, { "path": "README.md", "content": "# QuickSnip\n\nQuickSnip is an open-source tool designed for developers who want to organize, search, and share code snippets across various programming languages. It provides a centralized platform for managing handy snippets. Built with love and powered by an awesome community. 🚀\n\n
\n\n \"Watch\n\n
\n\n
\n\n![Website preview](/preview.png)\n\n## How to Contribute\n\nWant to help make QuickSnip even better? You can contribute by:\n\n- **Improving the Code**: Fix bugs, suggest new features, or optimize the project.\n- **Adding New Snippets**: Share your favorite snippets to grow the database.\n\nCheck out the [CONTRIBUTING.md](/CONTRIBUTING.md) file for detailed contribution guidelines.\n\n## General Rules\n\nTo keep everything smooth and consistent, please:\n\n- [x] Follow the project’s style and contribution rules.\n- [x] Be kind and respectful to others.\n- [x] If you’re unsure, ask questions.\n\nFollowing these rules helps us build an awesome community. 🚀\n\n## Third-Party\n\nWe love to see the creativity of our community! If you build something using QuickSnip, let us know. Here are some featured examples:\n\n- ⚡️ [**Raycast Extension**](https://www.raycast.com/anders_morille/quicksnip): An extension to browse and use QuickSnip snippets directly from Raycast. (Thanks to the creator: [@lille-morille](https://github.com/lille-morille))\n\nIf you’d like to create your own extension or tool:\n\n- [x] Please ensure it adheres to our project’s licensing and attribution requirements.\n- [x] Please link to the [original QuickSnip repository](https://github.com/technoph1le/quicksnip) in your extension/tool to attribute the source.\n- [x] Share your work with us — we’d be thrilled to feature it!\n\n## Project Vision\n\nFor a detailed look into our goals, future direction, and aspirations, see the [VISION.md](/VISION.md) file.\n\n## License\n\nQuickSnip is licensed under the [MIT License](/LICENSE). Feel free to use and share it as you like.\n\n\n \"Leave\n\n" }, { "path": "components.json", "content": "{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n \"style\": \"new-york\",\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {\n \"config\": \"\",\n \"css\": \"src/app/globals.css\",\n \"baseColor\": \"neutral\",\n \"cssVariables\": true,\n \"prefix\": \"\"\n },\n \"aliases\": {\n \"components\": \"@/components\",\n \"utils\": \"@/lib/utils\",\n \"ui\": \"@/components/ui\",\n \"lib\": \"@/lib\",\n \"hooks\": \"@/hooks\"\n },\n \"iconLibrary\": \"lucide\"\n}" }, { "path": "content/docs/comparison.mdx", "content": "---\ntitle: Comparison\ndescription: Hello World\n---\n\n## This is title\n\nThis is description\n" }, { "path": "content/docs/contributing/adding-snippets.mdx", "content": "---\ntitle: Adding snippets\ndescription: Hello World\n---\n\n## This is title\n\nThis is description\n" }, { "path": "content/docs/contributing/how-to-contribute.mdx", "content": "---\ntitle: How to contribute\ndescription: Hello World\n---\n\n## This is title\n\nThis is description\n" }, { "path": "content/docs/contributing/meta.json", "content": "{\n \"title\": \"Contributing\",\n \"pages\": [\n \"how-to-contribute\",\n \"adding-snippets\",\n \"modifying-snippets\",\n \"third-party-apps\"\n ]\n}\n" }, { "path": "content/docs/contributing/modifying-snippets.mdx", "content": "---\ntitle: Modifying snippets\ndescription: Hello World\n---\n\n## This is title\n\nThis is description\n" }, { "path": "content/docs/contributing/third-party-apps.mdx", "content": "---\ntitle: Third-party apps\ndescription: Hello World\n---\n\n## How to add an extension\n\nThis is description\n" }, { "path": "content/docs/extensions/meta.json", "content": "{\n \"title\": \"Extensions\",\n \"pages\": [\n \"quicksnip\",\n \"quicksnip-cli\",\n \"quicksnip-vscode\",\n \"quicksnip-raycast\"\n ]\n}\n" }, { "path": "content/docs/extensions/quicksnip-cli.mdx", "content": "---\ntitle: QuickSnip CLI\ndescription: Hello World\n---\n\n## This is title\n\nThis is description\n" }, { "path": "content/docs/extensions/quicksnip-raycast.mdx", "content": "---\ntitle: QuickSnip Raycast\ndescription: Hello World\n---\n\n## This is title\n\nThis is description\n" }, { "path": "content/docs/extensions/quicksnip-vscode.mdx", "content": "---\ntitle: QuickSnip VS Code\ndescription: Hello World\n---\n\n## This is title\n\nThis is description\n" }, { "path": "content/docs/extensions/quicksnip.mdx", "content": "---\ntitle: QuickSnip\ndescription: Hello World\n---\n\n## This is title\n\nThis is description\n" }, { "path": "content/docs/index.mdx", "content": "---\ntitle: Get Started\ndescription: Hello World\n---\n\n## This is title\n\nThis is description\n" }, { "path": "content/docs/installation.mdx", "content": "---\ntitle: Installation\ndescription: Hello World\n---\n\n## This is title\n\nThis is description\n" }, { "path": "content/docs/meta.json", "content": "{\n \"title\": \"Docs\",\n \"root\": true,\n \"pages\": [\n \"---Introduction---\",\n \"index.mdx\",\n \"installation.mdx\",\n \"comparison.mdx\",\n \"---Extensions---\",\n \"...extensions\",\n \"---Contributing---\",\n \"...contributing\"\n ]\n}\n" }, { "path": "eslint.config.mjs", "content": "import { dirname } from \"path\";\nimport { fileURLToPath } from \"url\";\nimport { FlatCompat } from \"@eslint/eslintrc\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\n\nconst compat = new FlatCompat({\n baseDirectory: __dirname,\n});\n\nconst eslintConfig = [\n ...compat.extends(\"next/core-web-vitals\", \"next/typescript\"),\n];\n\nexport default eslintConfig;\n" }, { "path": "mdx-components.tsx", "content": "import defaultMdxComponents from \"fumadocs-ui/mdx\";\nimport type { MDXComponents } from \"mdx/types\";\n\nexport function getMDXComponents(components?: MDXComponents): MDXComponents {\n return {\n ...defaultMdxComponents,\n ...components,\n };\n}\n" }, { "path": "next.config.ts", "content": "import { createMDX } from \"fumadocs-mdx/next\";\n\nconst withMDX = createMDX();\n\n/** @type {import('next').NextConfig} */\nconst config = {\n reactStrictMode: true,\n images: {\n remotePatterns: [\n new URL(\"https://img.youtube.com/vi/**\"),\n new URL(\"https://storage.ko-fi.com/cdn/**\"),\n ],\n },\n};\n\nexport default withMDX(config);\n" }, { "path": "package.json", "content": "{\n \"name\": \"quicksnip\",\n \"version\": \"2.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"prebuild\": \"tsx scripts/merge-snippets.ts\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\",\n \"postinstall\": \"fumadocs-mdx\"\n },\n \"dependencies\": {\n \"@radix-ui/react-accordion\": \"^1.2.11\",\n \"@radix-ui/react-aspect-ratio\": \"^1.1.7\",\n \"@radix-ui/react-avatar\": \"^1.1.10\",\n \"@radix-ui/react-dialog\": \"^1.1.15\",\n \"@radix-ui/react-label\": \"^2.1.7\",\n \"@radix-ui/react-navigation-menu\": \"^1.2.13\",\n \"@radix-ui/react-select\": \"^2.2.6\",\n \"@radix-ui/react-separator\": \"^1.1.7\",\n \"@radix-ui/react-slot\": \"^1.2.3\",\n \"@radix-ui/react-switch\": \"^1.2.5\",\n \"@radix-ui/react-tabs\": \"^1.1.13\",\n \"@radix-ui/react-tooltip\": \"^1.2.8\",\n \"@types/mdx\": \"^2.0.13\",\n \"class-variance-authority\": \"^0.7.1\",\n \"clsx\": \"^2.1.1\",\n \"framer-motion\": \"^12.23.12\",\n \"fumadocs-core\": \"^15.6.9\",\n \"fumadocs-mdx\": \"^12.0.3\",\n \"fumadocs-ui\": \"^15.6.9\",\n \"lucide-react\": \"^0.535.0\",\n \"next\": \"15.4.10\",\n \"radix-ui\": \"^1.4.3\",\n \"react\": \"^19.1.0\",\n \"react-dom\": \"^19.1.0\",\n \"react-icons\": \"^5.5.0\",\n \"react-markdown\": \"^10.1.0\",\n \"react-syntax-highlighter\": \"^15.6.6\",\n \"remark-gfm\": \"^4.0.1\",\n \"tailwind-merge\": \"^3.3.1\",\n \"zustand\": \"^5.0.8\"\n },\n \"devDependencies\": {\n \"@eslint/eslintrc\": \"^3\",\n \"@tailwindcss/postcss\": \"^4\",\n \"@tailwindcss/typography\": \"^0.5.16\",\n \"@types/node\": \"^20\",\n \"@types/react\": \"^19\",\n \"@types/react-dom\": \"^19\",\n \"@types/react-syntax-highlighter\": \"^15.5.13\",\n \"eslint\": \"^9\",\n \"eslint-config-next\": \"15.4.5\",\n \"pagefind\": \"^1.3.0\",\n \"tailwindcss\": \"^4\",\n \"tsx\": \"^4.20.5\",\n \"tw-animate-css\": \"^1.3.6\",\n \"typescript\": \"^5\"\n }\n}\n" }, { "path": "postcss.config.mjs", "content": "const config = {\n plugins: [\"@tailwindcss/postcss\"],\n};\n\nexport default config;\n" }, { "path": "public/data/snippets/README.md", "content": "# IMPORTANT\n\n### This folder is read-only. Do NOT modify this folder!" }, { "path": "public/data/snippets/all.json", "content": "[\n {\n \"id\": \"shuffle-array\",\n \"category\": \"array-manipulation\",\n \"title\": \"Shuffle Array\",\n \"description\": \"Shuffles the items in an array.\",\n \"languages\": [\n \"js\"\n ],\n \"contributors\": [\n \"loxt-nixo\"\n ],\n \"tags\": [\n \"array\",\n \"shuffle\",\n \"random\"\n ]\n },\n {\n \"id\": \"add-localstorage\",\n \"category\": \"data-handling\",\n \"title\": \"Add Item to localStorage\",\n \"description\": \"Stores a value in localStorage under the given key.\",\n \"languages\": [\n \"js\"\n ],\n \"contributors\": [\n \"technoph1le\"\n ],\n \"tags\": [\n \"localStorage\",\n \"storage\",\n \"memory\"\n ]\n },\n {\n \"id\": \"number-to-currency\",\n \"category\": \"number-formatting\",\n \"title\": \"Convert Number to Currency\",\n \"description\": \"Converts a number to a currency format with a specific locale.\",\n \"languages\": [\n \"js\"\n ],\n \"contributors\": [\n \"axorax\"\n ],\n \"tags\": [\n \"number\",\n \"currency\"\n ]\n },\n {\n \"id\": \"reverse-string\",\n \"category\": \"string-manipulation\",\n \"title\": \"Reverse String\",\n \"description\": \"Reverses the characters in a string.\",\n \"languages\": [\n \"js\",\n \"cpp\",\n \"py\"\n ],\n \"contributors\": [\n \"technoph1le\",\n \"Vaibhav-kesarwani\"\n ],\n \"tags\": [\n \"string\",\n \"reverse\"\n ]\n },\n {\n \"id\": \"string-to-camel-case\",\n \"category\": \"string-manipulation\",\n \"title\": \"Convert String to Camel Case\",\n \"description\": \"Converts a given string into camelCase.\",\n \"languages\": [\n \"js\",\n \"java\"\n ],\n \"contributors\": [\n \"aumirza\",\n \"Mcbencrafter\"\n ],\n \"tags\": [\n \"string\",\n \"case\"\n ]\n },\n {\n \"id\": \"string-to-param-case\",\n \"category\": \"string-manipulation\",\n \"title\": \"Convert String to Param Case\",\n \"description\": \"Converts a given string into param-case.\",\n \"languages\": [\n \"js\",\n \"java\"\n ],\n \"contributors\": [\n \"aumirza\",\n \"Mcbencrafter\"\n ],\n \"tags\": [\n \"string\",\n \"case\"\n ]\n },\n {\n \"id\": \"string-to-pascal-case\",\n \"category\": \"string-manipulation\",\n \"title\": \"Convert String to Pascal Case\",\n \"description\": \"Converts a given string into PascalCase.\",\n \"languages\": [\n \"js\",\n \"java\"\n ],\n \"contributors\": [\n \"aumirza\",\n \"Mcbencrafter\"\n ],\n \"tags\": [\n \"string\",\n \"case\"\n ]\n },\n {\n \"id\": \"string-to-snake-case\",\n \"category\": \"string-manipulation\",\n \"title\": \"Convert String to Snake Case\",\n \"description\": \"Converts a given string into snake_case.\",\n \"languages\": [\n \"js\",\n \"java\"\n ],\n \"contributors\": [\n \"axorax\",\n \"Mcbencrafter\"\n ],\n \"tags\": [\n \"string\",\n \"case\"\n ]\n },\n {\n \"id\": \"string-to-title-case\",\n \"category\": \"string-manipulation\",\n \"title\": \"Convert String to Title Case\",\n \"description\": \"Converts a given string into Title Case.\",\n \"languages\": [\n \"js\"\n ],\n \"contributors\": [\n \"aumirza\"\n ],\n \"tags\": [\n \"string\",\n \"case\"\n ]\n },\n {\n \"id\": \"truncate-sring\",\n \"category\": \"string-manipulation\",\n \"title\": \"Truncate String\",\n \"description\": \"Truncates a string after a specified length.\",\n \"languages\": [\n \"js\",\n \"java\",\n \"py\"\n ],\n \"contributors\": [\n \"realvishalrana\",\n \"Mcbencrafter\",\n \"axorax\",\n \"MinerMinerMods\"\n ],\n \"tags\": [\n \"string\",\n \"truncate\",\n \"mask\",\n \"hide\"\n ]\n }\n]" }, { "path": "public/data/snippets/array-manipulation/shuffle-array.json", "content": "{\n \"id\": \"shuffle-array\",\n \"category\": \"array-manipulation\",\n \"title\": \"Shuffle Array\",\n \"description\": \"Shuffles the items in an array.\",\n \"languages\": [\n \"js\"\n ],\n \"contributors\": [\n \"loxt-nixo\"\n ],\n \"tags\": [\n \"array\",\n \"shuffle\",\n \"random\"\n ],\n \"snippets\": {\n \"js\": \"function shuffleArray(array) {\\r\\n for (let i = array.length - 1; i >= 0; i--) {\\r\\n const j = Math.floor(Math.random() * (i + 1));\\r\\n [array[i], array[j]] = [array[j], array[i]];\\r\\n }\\r\\n}\\r\\n\\r\\n// Usage:\\r\\nconst array = [1, 2, 3, 4, 5];\\r\\nshuffleArray(array); // Shuffles `array` in place\"\n }\n}" }, { "path": "public/data/snippets/data-handling/add-localstorage.json", "content": "{\n \"id\": \"add-localstorage\",\n \"category\": \"data-handling\",\n \"title\": \"Add Item to localStorage\",\n \"description\": \"Stores a value in localStorage under the given key.\",\n \"languages\": [\n \"js\"\n ],\n \"contributors\": [\n \"technoph1le\"\n ],\n \"tags\": [\n \"localStorage\",\n \"storage\",\n \"memory\"\n ],\n \"snippets\": {\n \"js\": \"const addToLocalStorage = (key, value) => {\\r\\n localStorage.setItem(key, JSON.stringify(value));\\r\\n};\\r\\n\\r\\n// Usage:\\r\\naddToLocalStorage('user', { name: 'John', age: 30 });\"\n }\n}" }, { "path": "public/data/snippets/number-formatting/number-to-currency.json", "content": "{\n \"id\": \"number-to-currency\",\n \"category\": \"number-formatting\",\n \"title\": \"Convert Number to Currency\",\n \"description\": \"Converts a number to a currency format with a specific locale.\",\n \"languages\": [\n \"js\"\n ],\n \"contributors\": [\n \"axorax\"\n ],\n \"tags\": [\n \"number\",\n \"currency\"\n ],\n \"snippets\": {\n \"js\": \"const convertToCurrency = (num, locale = 'en-US', currency = 'USD') => {\\r\\n return new Intl.NumberFormat(locale, {\\r\\n style: 'currency',\\r\\n currency: currency\\r\\n }).format(num);\\r\\n};\\r\\n\\r\\n// Usage:\\r\\nconvertToCurrency(1234567.89); // Returns: '$1,234,567.89'\\r\\nconvertToCurrency(987654.32, 'de-DE', 'EUR'); // Returns: '987.654,32 €'\"\n }\n}" }, { "path": "public/data/snippets/string-manipulation/reverse-string.json", "content": "{\n \"id\": \"reverse-string\",\n \"category\": \"string-manipulation\",\n \"title\": \"Reverse String\",\n \"description\": \"Reverses the characters in a string.\",\n \"languages\": [\n \"js\",\n \"cpp\",\n \"py\"\n ],\n \"contributors\": [\n \"technoph1le\",\n \"Vaibhav-kesarwani\"\n ],\n \"tags\": [\n \"string\",\n \"reverse\"\n ],\n \"snippets\": {\n \"js\": \"const reverseString = (str) => str.split('').reverse().join('');\\r\\n\\r\\n// Usage:\\r\\nreverseString('hello'); // Returns: 'olleh'\",\n \"cpp\": \"#include \\r\\n#include \\r\\n\\r\\nstd::string reverseString(const std::string& input) {\\r\\n std::string reversed = input;\\r\\n std::reverse(reversed.begin(), reversed.end());\\r\\n return reversed;\\r\\n}\\r\\n\\r\\n// Usage:\\r\\nreverseString(\\\"quicksnip\\\"); // Returns: \\\"pinskciuq\\\"\",\n \"py\": \"def reverse_string(s:str) -> str:\\r\\n return s[::-1]\\r\\n\\r\\n# Usage:\\r\\nreverse_string('hello') # Returns: 'olleh'\"\n }\n}" }, { "path": "public/data/snippets/string-manipulation/string-to-camel-case.json", "content": "{\n \"id\": \"string-to-camel-case\",\n \"category\": \"string-manipulation\",\n \"title\": \"Convert String to Camel Case\",\n \"description\": \"Converts a given string into camelCase.\",\n \"languages\": [\n \"js\",\n \"java\"\n ],\n \"contributors\": [\n \"aumirza\",\n \"Mcbencrafter\"\n ],\n \"tags\": [\n \"string\",\n \"case\"\n ],\n \"snippets\": {\n \"js\": \"function toCamelCase(str) {\\r\\n return str.replace(/\\\\W+(.)/g, (match, chr) => chr.toUpperCase());\\r\\n}\\r\\n\\r\\n// Usage:\\r\\ntoCamelCase('hello world test'); // Returns: 'helloWorldTest'\",\n \"java\": \"public static String stringToCamelCase(String text) {\\r\\n String[] words = text.split(\\\"\\\\\\\\s+\\\");\\r\\n StringBuilder camelCase = new StringBuilder(\\r\\n words[0].substring(0, 1).toLowerCase() + words[0].substring(1)\\r\\n );\\r\\n\\r\\n for (int i = 1; i < words.length; i++) {\\r\\n camelCase.append(words[i].substring(0, 1).toUpperCase());\\r\\n camelCase.append(words[i].substring(1));\\r\\n }\\r\\n\\r\\n return camelCase.toString();\\r\\n}\\r\\n\\r\\n// Usage:\\r\\nSystem.out.println(stringToCamelCase(\\\"Hello world test\\\")); // \\\"helloWorldTest\\\"\"\n }\n}" }, { "path": "public/data/snippets/string-manipulation/string-to-param-case.json", "content": "{\n \"id\": \"string-to-param-case\",\n \"category\": \"string-manipulation\",\n \"title\": \"Convert String to Param Case\",\n \"description\": \"Converts a given string into param-case.\",\n \"languages\": [\n \"js\",\n \"java\"\n ],\n \"contributors\": [\n \"aumirza\",\n \"Mcbencrafter\"\n ],\n \"tags\": [\n \"string\",\n \"case\"\n ],\n \"snippets\": {\n \"js\": \"function toParamCase(str) {\\r\\n return str.toLowerCase().replace(/\\\\s+/g, '-');\\r\\n}\\r\\n\\r\\n// Usage:\\r\\ntoParamCase('Hello World Test'); // Returns: 'hello-world-test'\",\n \"java\": \"public static String stringToParamCase(String text) {\\r\\n return text.toLowerCase().replaceAll(\\\"\\\\\\\\s+\\\", \\\"-\\\");\\r\\n}\\r\\n\\r\\n// Usage:\\r\\nSystem.out.println(stringToParamCase(\\\"Hello World 123\\\")); // \\\"hello-world-123\\\"\"\n }\n}" }, { "path": "public/data/snippets/string-manipulation/string-to-pascal-case.json", "content": "{\n \"id\": \"string-to-pascal-case\",\n \"category\": \"string-manipulation\",\n \"title\": \"Convert String to Pascal Case\",\n \"description\": \"Converts a given string into PascalCase.\",\n \"languages\": [\n \"js\",\n \"java\"\n ],\n \"contributors\": [\n \"aumirza\",\n \"Mcbencrafter\"\n ],\n \"tags\": [\n \"string\",\n \"case\"\n ],\n \"snippets\": {\n \"js\": \"function toPascalCase(str) {\\r\\n return str.replace(/\\\\b\\\\w/g, (s) => s.toUpperCase()).replace(/\\\\W+(.)/g, (match, chr) => chr.toUpperCase());\\r\\n}\\r\\n\\r\\n// Usage:\\r\\ntoPascalCase('hello world test'); // Returns: 'HelloWorldTest'\",\n \"java\": \"public static String stringToPascalCase(String text) {\\r\\n String[] words = text.split(\\\"\\\\\\\\s+\\\");\\r\\n StringBuilder pascalCase = new StringBuilder();\\r\\n\\r\\n for (String word : words) {\\r\\n pascalCase.append(word.substring(0, 1).toUpperCase());\\r\\n pascalCase.append(word.substring(1).toLowerCase());\\r\\n }\\r\\n\\r\\n return pascalCase.toString();\\r\\n}\\r\\n\\r\\n// Usage:\\r\\nSystem.out.println(stringToPascalCase(\\\"hello world\\\")); // \\\"HelloWorld\\\"\"\n }\n}" }, { "path": "public/data/snippets/string-manipulation/string-to-snake-case.json", "content": "{\n \"id\": \"string-to-snake-case\",\n \"category\": \"string-manipulation\",\n \"title\": \"Convert String to Snake Case\",\n \"description\": \"Converts a given string into snake_case.\",\n \"languages\": [\n \"js\",\n \"java\"\n ],\n \"contributors\": [\n \"axorax\",\n \"Mcbencrafter\"\n ],\n \"tags\": [\n \"string\",\n \"case\"\n ],\n \"snippets\": {\n \"js\": \"function toSnakeCase(str) {\\r\\n return str.replace(/([a-z])([A-Z])/g, '$1_$2')\\r\\n .replace(/\\\\s+/g, '_')\\r\\n .toLowerCase();\\r\\n}\\r\\n\\r\\n// Usage:\\r\\ntoSnakeCase('Hello World Test'); // Returns: 'hello_world_test'\",\n \"java\": \"public static String stringToSnakeCase(String text) {\\r\\n return text.toLowerCase().replaceAll(\\\"\\\\\\\\s+\\\", \\\"_\\\");\\r\\n}\\r\\n\\r\\n// Usage:\\r\\nSystem.out.println(stringToSnakeCase(\\\"Hello World 123\\\")); // \\\"hello_world_123\\\"\"\n }\n}" }, { "path": "public/data/snippets/string-manipulation/string-to-title-case.json", "content": "{\n \"id\": \"string-to-title-case\",\n \"category\": \"string-manipulation\",\n \"title\": \"Convert String to Title Case\",\n \"description\": \"Converts a given string into Title Case.\",\n \"languages\": [\n \"js\"\n ],\n \"contributors\": [\n \"aumirza\"\n ],\n \"tags\": [\n \"string\",\n \"case\"\n ],\n \"snippets\": {\n \"js\": \"function toTitleCase(str) {\\r\\n return str.toLowerCase().replace(/\\\\b\\\\w/g, (s) => s.toUpperCase());\\r\\n}\\r\\n\\r\\n// Usage:\\r\\ntoTitleCase('hello world test'); // Returns: 'Hello World Test'\"\n }\n}" }, { "path": "public/data/snippets/string-manipulation/truncate-sring.json", "content": "{\n \"id\": \"truncate-sring\",\n \"category\": \"string-manipulation\",\n \"title\": \"Truncate String\",\n \"description\": \"Truncates a string after a specified length.\",\n \"languages\": [\n \"js\",\n \"java\",\n \"py\"\n ],\n \"contributors\": [\n \"realvishalrana\",\n \"Mcbencrafter\",\n \"axorax\",\n \"MinerMinerMods\"\n ],\n \"tags\": [\n \"string\",\n \"truncate\",\n \"mask\",\n \"hide\"\n ],\n \"snippets\": {\n \"js\": \"const truncateText = (text = '', maxLength = 50) => {\\r\\n return `${text.slice(0, maxLength)}${text.length >= maxLength ? '...' : ''}`;\\r\\n};\\r\\n\\r\\n// Usage:\\r\\nconst title = \\\"Hello, World! This is a Test.\\\";\\r\\ntruncateText(title, 10); // Returns: 'Hello, Wor...'\",\n \"java\": \"public static String truncate(String text, int length, String suffix) {\\r\\n if (text.length() <= length)\\r\\n return text;\\r\\n \\r\\n return text.substring(0, length).trim() + (suffix != null ? suffix : \\\"\\\");\\r\\n}\\r\\n\\r\\n// Usage:\\r\\nSystem.out.println(truncate(\\\"hello world\\\", 5, \\\"...\\\")); // \\\"hello...\\\"\",\n \"py\": \"def truncate(s:str, length:int, suffix:bool = True) -> str :\\r\\n return (s[:length] + (\\\"...\\\" if suffix else \\\"\\\")) if len(s) > length else s\\r\\n\\r\\n# Usage:\\r\\ntruncate('This is a long string', 10) # Returns: 'This is a ...'\\r\\ntruncate('This is a long string', 10, False) # Returns: 'This is a '\"\n }\n}" }, { "path": "scripts/merge-snippets.ts", "content": "import fs from \"fs\";\nimport path from \"path\";\n\nconst SNIPPETS_DIR = path.join(process.cwd(), \"snippets\");\nconst OUTPUT_DIR = path.join(process.cwd(), \"public\", \"data\", \"snippets\");\n\n/**\n * Extracts the code from markdown into a `{ language: code }` object.\n */\nfunction parseMarkdown(mdContent: string) {\n const regex = /```([a-zA-Z0-9+#-]*)\\s*([\\s\\S]*?)```/g;\n const snippets: { [lang: string]: string } = {};\n let match;\n\n while ((match = regex.exec(mdContent)) !== null) {\n const lang = match[1];\n const code = match[2].trim();\n snippets[lang] = code;\n }\n\n return snippets;\n}\n\n/**\n * Loads the `.json` and `.md` file of each snippet, and combines them into one object.\n */\nfunction mergeSnippet(category: string, name: string) {\n const basePath = path.join(SNIPPETS_DIR, category, name);\n const mdFile = basePath + \".md\";\n const jsonFile = basePath + \".json\";\n\n if (!fs.existsSync(mdFile) || !fs.existsSync(jsonFile)) return null;\n\n const mdContent = fs.readFileSync(mdFile, \"utf-8\");\n const meta = JSON.parse(fs.readFileSync(jsonFile, \"utf-8\"));\n const snippets = parseMarkdown(mdContent);\n\n return {\n id: name,\n category,\n ...meta,\n snippets,\n };\n}\n\n/**\n * Reads all categories inside `/snippets` and merge their snippets.\n */\nfunction scanSnippets(dir: string) {\n const items = [];\n\n for (const category of fs.readdirSync(dir)) {\n const categoryPath = path.join(dir, category);\n if (!fs.statSync(categoryPath).isDirectory()) continue;\n\n for (const file of fs.readdirSync(categoryPath)) {\n if (file.endsWith(\".json\")) {\n const name = file.replace(\".json\", \"\");\n const snippet = mergeSnippet(category, name);\n if (snippet) items.push(snippet);\n }\n }\n }\n\n return items;\n}\n\n/**\n * Generates JSON output for each snippet and a global all.json.\n */\nfunction buildSnippets() {\n const allSnippets = scanSnippets(SNIPPETS_DIR);\n\n // write individual files\n for (const snippet of allSnippets) {\n const outDir = path.join(OUTPUT_DIR, snippet.category);\n if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });\n\n const outFile = path.join(outDir, `${snippet.id}.json`);\n fs.writeFileSync(outFile, JSON.stringify(snippet, null, 2));\n }\n\n // write all.json (metadata only)\n const allMeta = allSnippets.map(({ snippets, ...meta }) => meta);\n fs.writeFileSync(\n path.join(OUTPUT_DIR, \"all.json\"),\n JSON.stringify(allMeta, null, 2)\n );\n\n console.log(\"✅ Snippets built:\", allSnippets.length);\n}\n\nbuildSnippets();\n" }, { "path": "snippets/README.md", "content": "\n\n## Markdown Format\n\n````\n```js\n// code here\n```\n\n---\n\n```py\n# code here\n```\n````\n\n\n## JSON Format\n\n```json\n{\n \"title\": \"\",\n \"description\": \"\",\n \"languages\": [\"\"],\n \"contributors\": [\"\"],\n \"tags\": [\"\", \"\"]\n}\n```" }, { "path": "snippets/array-manipulation/shuffle-array.json", "content": "{\n \"title\": \"Shuffle Array\",\n \"description\": \"Shuffles the items in an array.\",\n \"languages\": [\"js\"],\n \"contributors\": [\"loxt-nixo\"],\n \"tags\": [\"array\", \"shuffle\", \"random\"]\n}\n" }, { "path": "snippets/array-manipulation/shuffle-array.md", "content": "```js\nfunction shuffleArray(array) {\n for (let i = array.length - 1; i >= 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n}\n\n// Usage:\nconst array = [1, 2, 3, 4, 5];\nshuffleArray(array); // Shuffles `array` in place\n```" }, { "path": "snippets/data-handling/add-localstorage.json", "content": "{\n \"title\": \"Add Item to localStorage\",\n \"description\": \"Stores a value in localStorage under the given key.\",\n \"languages\": [\"js\"],\n \"contributors\": [\"technoph1le\"],\n \"tags\": [\"localStorage\", \"storage\", \"memory\"]\n}\n" }, { "path": "snippets/data-handling/add-localstorage.md", "content": "```js\nconst addToLocalStorage = (key, value) => {\n localStorage.setItem(key, JSON.stringify(value));\n};\n\n// Usage:\naddToLocalStorage('user', { name: 'John', age: 30 });\n```" }, { "path": "snippets/number-formatting/number-to-currency.json", "content": "{\n \"title\": \"Convert Number to Currency\",\n \"description\": \"Converts a number to a currency format with a specific locale.\",\n \"languages\": [\"js\"],\n \"contributors\": [\"axorax\"],\n \"tags\": [\"number\", \"currency\"]\n}\n" }, { "path": "snippets/number-formatting/number-to-currency.md", "content": "```js\nconst convertToCurrency = (num, locale = 'en-US', currency = 'USD') => {\n return new Intl.NumberFormat(locale, {\n style: 'currency',\n currency: currency\n }).format(num);\n};\n\n// Usage:\nconvertToCurrency(1234567.89); // Returns: '$1,234,567.89'\nconvertToCurrency(987654.32, 'de-DE', 'EUR'); // Returns: '987.654,32 €'\n```" }, { "path": "snippets/string-manipulation/reverse-string.json", "content": "{\n \"title\": \"Reverse String\",\n \"description\": \"Reverses the characters in a string.\",\n \"languages\": [\"js\", \"cpp\", \"py\"],\n \"contributors\": [\"technoph1le\", \"Vaibhav-kesarwani\"],\n \"tags\": [\"string\", \"reverse\"]\n}\n" }, { "path": "snippets/string-manipulation/reverse-string.md", "content": "```js\nconst reverseString = (str) => str.split('').reverse().join('');\n\n// Usage:\nreverseString('hello'); // Returns: 'olleh'\n```\n\n---\n\n```cpp\n#include \n#include \n\nstd::string reverseString(const std::string& input) {\n std::string reversed = input;\n std::reverse(reversed.begin(), reversed.end());\n return reversed;\n}\n\n// Usage:\nreverseString(\"quicksnip\"); // Returns: \"pinskciuq\"\n```\n\n---\n\n```py\ndef reverse_string(s:str) -> str:\n return s[::-1]\n\n# Usage:\nreverse_string('hello') # Returns: 'olleh'\n```" }, { "path": "snippets/string-manipulation/string-to-camel-case.json", "content": "{\n \"title\": \"Convert String to Camel Case\",\n \"description\": \"Converts a given string into camelCase.\",\n \"languages\": [\"js\", \"java\"],\n \"contributors\": [\"aumirza\", \"Mcbencrafter\"],\n \"tags\": [\"string\", \"case\"]\n}\n" }, { "path": "snippets/string-manipulation/string-to-camel-case.md", "content": "```js\nfunction toCamelCase(str) {\n return str.replace(/\\W+(.)/g, (match, chr) => chr.toUpperCase());\n}\n\n// Usage:\ntoCamelCase('hello world test'); // Returns: 'helloWorldTest'\n```\n\n---\n\n```java\npublic static String stringToCamelCase(String text) {\n String[] words = text.split(\"\\\\s+\");\n StringBuilder camelCase = new StringBuilder(\n words[0].substring(0, 1).toLowerCase() + words[0].substring(1)\n );\n\n for (int i = 1; i < words.length; i++) {\n camelCase.append(words[i].substring(0, 1).toUpperCase());\n camelCase.append(words[i].substring(1));\n }\n\n return camelCase.toString();\n}\n\n// Usage:\nSystem.out.println(stringToCamelCase(\"Hello world test\")); // \"helloWorldTest\"\n```" }, { "path": "snippets/string-manipulation/string-to-param-case.json", "content": "{\n \"title\": \"Convert String to Param Case\",\n \"description\": \"Converts a given string into param-case.\",\n \"languages\": [\"js\", \"java\"],\n \"contributors\": [\"aumirza\", \"Mcbencrafter\"],\n \"tags\": [\"string\", \"case\"]\n}\n" }, { "path": "snippets/string-manipulation/string-to-param-case.md", "content": "```js\nfunction toParamCase(str) {\n return str.toLowerCase().replace(/\\s+/g, '-');\n}\n\n// Usage:\ntoParamCase('Hello World Test'); // Returns: 'hello-world-test'\n```\n\n---\n\n```java\npublic static String stringToParamCase(String text) {\n return text.toLowerCase().replaceAll(\"\\\\s+\", \"-\");\n}\n\n// Usage:\nSystem.out.println(stringToParamCase(\"Hello World 123\")); // \"hello-world-123\"\n```" }, { "path": "snippets/string-manipulation/string-to-pascal-case.json", "content": "{\n \"title\": \"Convert String to Pascal Case\",\n \"description\": \"Converts a given string into PascalCase.\",\n \"languages\": [\"js\", \"java\"],\n \"contributors\": [\"aumirza\", \"Mcbencrafter\"],\n \"tags\": [\"string\", \"case\"]\n}\n" }, { "path": "snippets/string-manipulation/string-to-pascal-case.md", "content": "```js\nfunction toPascalCase(str) {\n return str.replace(/\\b\\w/g, (s) => s.toUpperCase()).replace(/\\W+(.)/g, (match, chr) => chr.toUpperCase());\n}\n\n// Usage:\ntoPascalCase('hello world test'); // Returns: 'HelloWorldTest'\n```\n\n---\n\n```java\npublic static String stringToPascalCase(String text) {\n String[] words = text.split(\"\\\\s+\");\n StringBuilder pascalCase = new StringBuilder();\n\n for (String word : words) {\n pascalCase.append(word.substring(0, 1).toUpperCase());\n pascalCase.append(word.substring(1).toLowerCase());\n }\n\n return pascalCase.toString();\n}\n\n// Usage:\nSystem.out.println(stringToPascalCase(\"hello world\")); // \"HelloWorld\"\n```" }, { "path": "snippets/string-manipulation/string-to-snake-case.json", "content": "{\n \"title\": \"Convert String to Snake Case\",\n \"description\": \"Converts a given string into snake_case.\",\n \"languages\": [\"js\", \"java\"],\n \"contributors\": [\"axorax\", \"Mcbencrafter\"],\n \"tags\": [\"string\", \"case\"]\n}\n" }, { "path": "snippets/string-manipulation/string-to-snake-case.md", "content": "```js\nfunction toSnakeCase(str) {\n return str.replace(/([a-z])([A-Z])/g, '$1_$2')\n .replace(/\\s+/g, '_')\n .toLowerCase();\n}\n\n// Usage:\ntoSnakeCase('Hello World Test'); // Returns: 'hello_world_test'\n```\n\n---\n\n```java\npublic static String stringToSnakeCase(String text) {\n return text.toLowerCase().replaceAll(\"\\\\s+\", \"_\");\n}\n\n// Usage:\nSystem.out.println(stringToSnakeCase(\"Hello World 123\")); // \"hello_world_123\"\n```" }, { "path": "snippets/string-manipulation/string-to-title-case.json", "content": "{\n \"title\": \"Convert String to Title Case\",\n \"description\": \"Converts a given string into Title Case.\",\n \"languages\": [\"js\"],\n \"contributors\": [\"aumirza\"],\n \"tags\": [\"string\", \"case\"]\n}\n" }, { "path": "snippets/string-manipulation/string-to-title-case.md", "content": "```js\nfunction toTitleCase(str) {\n return str.toLowerCase().replace(/\\b\\w/g, (s) => s.toUpperCase());\n}\n\n// Usage:\ntoTitleCase('hello world test'); // Returns: 'Hello World Test'\n```" }, { "path": "snippets/string-manipulation/truncate-sring.json", "content": "{\n \"title\": \"Truncate String\",\n \"description\": \"Truncates a string after a specified length.\",\n \"languages\": [\"js\", \"java\", \"py\"],\n \"contributors\": [\n \"realvishalrana\",\n \"Mcbencrafter\",\n \"axorax\",\n \"MinerMinerMods\"\n ],\n \"tags\": [\"string\", \"truncate\", \"mask\", \"hide\"]\n}\n" }, { "path": "snippets/string-manipulation/truncate-sring.md", "content": "```js\nconst truncateText = (text = '', maxLength = 50) => {\n return `${text.slice(0, maxLength)}${text.length >= maxLength ? '...' : ''}`;\n};\n\n// Usage:\nconst title = \"Hello, World! This is a Test.\";\ntruncateText(title, 10); // Returns: 'Hello, Wor...'\n```\n\n---\n\n```java\npublic static String truncate(String text, int length, String suffix) {\n if (text.length() <= length)\n return text;\n \n return text.substring(0, length).trim() + (suffix != null ? suffix : \"\");\n}\n\n// Usage:\nSystem.out.println(truncate(\"hello world\", 5, \"...\")); // \"hello...\"\n```\n\n---\n\n```py\ndef truncate(s:str, length:int, suffix:bool = True) -> str :\n return (s[:length] + (\"...\" if suffix else \"\")) if len(s) > length else s\n\n# Usage:\ntruncate('This is a long string', 10) # Returns: 'This is a ...'\ntruncate('This is a long string', 10, False) # Returns: 'This is a '\n```" }, { "path": "source.config.ts", "content": "import {\n defineConfig,\n defineDocs,\n frontmatterSchema,\n metaSchema,\n} from \"fumadocs-mdx/config\";\n\n// You can customise Zod schemas for frontmatter and `meta.json` here\n// see https://fumadocs.vercel.app/docs/mdx/collections#define-docs\nexport const docs = defineDocs({\n docs: {\n schema: frontmatterSchema,\n },\n meta: {\n schema: metaSchema,\n },\n});\n\nexport default defineConfig({\n mdxOptions: {\n // MDX options\n },\n});\n" }, { "path": "src/app/api/search/route.ts", "content": "import { source } from \"@/lib/source\";\nimport { createFromSource } from \"fumadocs-core/search/server\";\n\nexport const { GET } = createFromSource(source, {\n // https://docs.orama.com/open-source/supported-languages\n language: \"english\",\n});\n" }, { "path": "src/app/community/page.tsx", "content": "\"use client\";\n\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\";\nimport { Button } from \"@/components/ui/button\";\nimport { ExternalLink } from \"lucide-react\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { motion } from \"framer-motion\";\nimport { DISCORD_URL, GITHUB_URL } from \"@/data/meta\";\nimport { YOUTUBE_VIDEOS } from \"@/data/yt-videos\";\n\nexport default function Communitypage() {\n return (\n <>\n
\n
\n
\n \n \n \n

\n QuickSnip is Open-Source\n

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

\n Join our Discord Community\n

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

\n Videos from Technophile\n

\n
    \n {YOUTUBE_VIDEOS.map((video) => (\n
  • \n \n \n \n \n

    {video.title}

    \n \n
    • \n ))}\n
\n \n \n Let me subscribe \n \n \n
\n
\n \n );\n}\n\n/**\n * Fetch `CONTRIBUTING.md`\n */\n" }, { "path": "src/app/contributing/page.tsx", "content": "import fs from \"fs\";\nimport path from \"path\";\nimport remarkGfm from \"remark-gfm\";\nimport Markdown from \"react-markdown\";\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\nimport { oneDark } from \"react-syntax-highlighter/dist/esm/styles/prism\";\n\nexport default function ContributingPage() {\n const filePath = path.join(process.cwd(), \"CONTRIBUTING.md\");\n const fileContent = fs.readFileSync(filePath, \"utf-8\");\n\n return (\n
\n \n {String(children).replace(/\\n$/, \"\")}\n \n ) : (\n \n {children}\n \n );\n },\n }}\n >\n {fileContent}\n \n
\n );\n}\n" }, { "path": "src/app/extensions/page.tsx", "content": "import ExtensionItem, {\n NewExtensionItem,\n} from \"@/components/ui/extension-item\";\nimport { EXTENSIONS } from \"@/data/extensions\";\n\nexport default function ExtensionsPage() {\n return (\n
\n
\n

Extensions

\n
    \n {EXTENSIONS.map((extension) => (\n \n ))}\n \n
\n
\n
\n );\n}\n\n/**\n * 📦 Official Extensions\n\n VS Code Extension (coming soon)\n\n QuickSnip CLI (optional later)\n\n🔌 Community Extensions\n\n ✅ Raycast Extension\n\n 🔜 Vim Plugin\n\n ⌨️ Obsidian Snippet Sync\n\n 💡 (Form to submit your own tool)\n\n📚 How to Build One\n\n Short guide: “Build your own extension using QuickSnip API”\n\n Link to API docs or SDK\n\n Example template repo\n */\n" }, { "path": "src/app/globals.css", "content": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n@import \"fumadocs-ui/css/neutral.css\";\n@import \"fumadocs-ui/css/preset.css\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n --color-sidebar-ring: var(--sidebar-ring);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar: var(--sidebar);\n --color-chart-5: var(--chart-5);\n --color-chart-4: var(--chart-4);\n --color-chart-3: var(--chart-3);\n --color-chart-2: var(--chart-2);\n --color-chart-1: var(--chart-1);\n --color-ring: var(--ring);\n --color-input: var(--input);\n --color-border: var(--border);\n --color-destructive: var(--destructive);\n --color-accent-foreground: var(--accent-foreground);\n --color-accent: var(--accent);\n --color-muted-foreground: var(--muted-foreground);\n --color-muted: var(--muted);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-secondary: var(--secondary);\n --color-primary-foreground: var(--primary-foreground);\n --color-primary: var(--primary);\n --color-popover-foreground: var(--popover-foreground);\n --color-popover: var(--popover);\n --color-card-foreground: var(--card-foreground);\n --color-card: var(--card);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n}\n\n:root {\n --radius: 0.625rem;\n --background: hsl(0, 0%, 95%);\n --foreground: hsl(0, 0%, 16%);\n --card: hsl(0, 0%, 90%);\n --card-foreground: hsl(0, 0%, 24%);\n --popover: hsl(0, 0%, 90%);\n --popover-foreground: hsl(0, 0%, 24%);\n --primary: hsl(0, 0%, 95%);\n --primary-foreground: hsl(0, 0%, 11%);\n --secondary: hsl(0, 0%, 90%);\n --secondary-foreground: hsl(0, 0%, 16%);\n --muted: hsl(0, 0%, 80%);\n --muted-foreground: hsl(0, 0%, 24%);\n --accent: hsl(181, 100%, 22%);\n --accent-foreground: hsl(0, 0%, 11%);\n --destructive: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n\n --fd-layout-width: 90rem;\n --fd-sidebar-margin: 0 2rem;\n --fd-banner-height: 4rem;\n /* --fd-nav-height: 4rem; */\n\n --header-height: 4rem;\n --footer-height: 4rem;\n}\n\n.dark {\n --background: hsl(0, 0%, 11%);\n --foreground: hsl(0, 0%, 90%);\n --card: hsl(0, 0%, 16%);\n --card-foreground: hsl(0, 0%, 80%);\n --popover: hsl(0, 0%, 16%);\n --popover-foreground: hsl(0, 0%, 80%);\n --primary: hsl(0, 0%, 11%);\n --primary-foreground: hsl(0, 0%, 90%);\n --secondary: hsl(0, 0%, 16%);\n --secondary-foreground: hsl(0, 0%, 80%);\n --muted: hsl(0, 0%, 24%);\n --muted-foreground: hsl(0, 0%, 70%);\n --accent: hsl(181, 100%, 36%);\n --accent-foreground: hsl(0, 0%, 11%);\n --destructive: oklch(0.704 0.191 22.216);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n --ring: oklch(0.556 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n --sidebar: hsl(0, 0%, 11%);\n --sidebar-foreground: hsl(0, 0%, 90%);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.269 0 0);\n --sidebar-accent-foreground: oklch(0.985 0 0);\n --sidebar-border: oklch(1 0 0 / 10%);\n --sidebar-ring: oklch(0.556 0 0);\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n}\n\n@layer utilities {\n .wrapper {\n @apply max-w-7xl w-full mx-auto px-4;\n }\n\n .wrapper-sm {\n @apply max-w-6xl w-full mx-auto px-4;\n }\n\n .wrapper-xs {\n @apply max-w-4xl w-full mx-auto px-4;\n }\n\n .wrapper-2xs {\n @apply max-w-2xl w-full mx-auto px-4;\n }\n\n .wrapper-lg {\n @apply max-w-[90rem] w-full mx-auto px-4;\n }\n}\n\n/* #nd-docs-layout {\n padding: 0 !important;\n}\n\n#nd-page {\n border: 1px solid green;\n} */\n\n#nd-sidebar {\n background: var(--background);\n bottom: var(--footer-height);\n position: absolute;\n}\n" }, { "path": "src/app/guide/[[...slug]]/page.tsx", "content": "import { source } from \"@/lib/source\";\nimport {\n DocsBody,\n DocsDescription,\n DocsPage,\n DocsTitle,\n} from \"fumadocs-ui/page\";\nimport { getGithubLastEdit } from \"fumadocs-core/server\";\nimport { notFound } from \"next/navigation\";\nimport { getMDXComponents } from \"../../../../mdx-components\";\n\nexport default async function Page(props: {\n params: Promise<{ slug?: string[] }>;\n}) {\n const params = await props.params;\n\n const page = source.getPage(params.slug);\n if (!page) notFound();\n\n const MDX = page.data.body;\n const time = await getGithubLastEdit({\n owner: \"fuma-nama\",\n repo: \"fumadocs\",\n path: `content/guide/${page.path}`,\n });\n\n return (\n \n {page.data.title}\n {page.data.description}\n \n \n \n \n );\n}\n\nexport async function generateStaticParams() {\n return source.generateParams();\n}\n\nexport async function generateMetadata(props: {\n params: Promise<{ slug?: string[] }>;\n}) {\n const params = await props.params;\n const page = source.getPage(params.slug);\n if (!page) notFound();\n\n return {\n title: page.data.title,\n description: page.data.description,\n };\n}\n" }, { "path": "src/app/guide/layout.tsx", "content": "import { source } from \"@/lib/source\";\nimport { DocsLayout } from \"fumadocs-ui/layouts/docs\";\nimport type { ReactNode } from \"react\";\nimport { baseOptions } from \"@/app/layout.config\";\n\nexport default function Layout({ children }: { children: ReactNode }) {\n return (\n \n {children}\n \n );\n}\n" }, { "path": "src/app/layout.config.tsx", "content": "import { BaseLayoutProps } from \"fumadocs-ui/layouts/shared\";\n\nexport const baseOptions: BaseLayoutProps = {\n // githubUrl: \"https://github.com/quicksnip-dev/quicksnip\",\n nav: {\n enabled: false,\n },\n};\n" }, { "path": "src/app/layout.tsx", "content": "import type { Metadata } from \"next\";\nimport { Geist, Geist_Mono } from \"next/font/google\";\nimport { RootProvider } from \"fumadocs-ui/provider\";\nimport \"./globals.css\";\nimport Header from \"@/components/layouts/header\";\nimport Footer from \"@/components/layouts/footer\";\n\nconst geistSans = Geist({\n variable: \"--font-geist-sans\",\n subsets: [\"latin\"],\n});\n\nconst geistMono = Geist_Mono({\n variable: \"--font-geist-mono\",\n subsets: [\"latin\"],\n});\n\nexport const metadata: Metadata = {\n title: \"QuickSnip\",\n description: \"Find code snippets in seconds.\",\n};\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode;\n}>) {\n return (\n \n \n
\n {children}\n
\n \n \n );\n}\n" }, { "path": "src/app/page.tsx", "content": "import Features from \"@/components/layouts/features\";\nimport Hero from \"@/components/layouts/hero\";\nimport AvailableFor from \"@/components/layouts/available-for\";\nimport Sponsor from \"@/components/layouts/sponsor\";\n\nexport default function Home() {\n return (\n <>\n \n \n \n \n \n );\n}\n" }, { "path": "src/app/snippets/[category]/[snippet]/page.tsx", "content": "\"use client\";\n\nimport { use } from \"react\";\n\nimport { useRouter } from \"next/navigation\";\nimport Link from \"next/link\";\n\nimport { Loader, XIcon } from \"lucide-react\";\n\nimport { FullSnippet } from \"@/types\";\nimport { useFetch } from \"@/hooks/use-fetch\";\nimport { Button } from \"@/components/ui/button\";\nimport CodePreview from \"@/components/layouts/code-preview\";\nimport {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n} from \"@/components/ui/card\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\ninterface Props {\n params: Promise<{ category: string; snippet: string }>;\n}\n\nexport default function SnippetPage({ params }: Props) {\n const router = useRouter();\n const { category, snippet } = use(params);\n const { data, loading } = useFetch(\n `/data/snippets/${category}/${snippet}.json`\n );\n\n const handleCloseModal = () => {\n /**\n * If a snippet is visited directly from URL,\n * it won't have history to go back to.\n * Thus, fallback to `/snippets/` page.\n */\n if (window.history.length > 2) router.back();\n else router.push(\"/snippets\");\n };\n\n if (loading) return ;\n if (!data) return null;\n\n return (\n
\n \n \n

{data.title}

\n \n \n \n

{data.description}

\n \n \n \n
\n

Contributors:

\n
\n {data.contributors.map((contributor) => (\n \n \n {contributor.slice(0, 2)}\n \n ))}\n
\n
\n
    \n {data.tags.map((tag) => (\n
  • \n \n {tag}\n \n
    • \n ))}\n
\n \n \n
\n );\n}\n" }, { "path": "src/app/snippets/[category]/page.tsx", "content": "\"use client\";\n\nimport SnippetList from \"@/components/layouts/snippet-list\";\nimport { unslugify } from \"@/lib/utils\";\nimport { useSnippetsStore } from \"@/store/useSnippetsStore\";\nimport { use } from \"react\";\n\ninterface Props {\n params: Promise<{ category: string }>;\n}\n\nexport default function Categories({ params }: Props) {\n const { snippets } = useSnippetsStore();\n const { category } = use(params);\n\n const filteredSnippets = snippets.filter(\n (snippet) => snippet.category === category\n );\n\n return (\n
\n

{unslugify(category)}

\n \n
\n );\n}\n" }, { "path": "src/app/snippets/layout.tsx", "content": "import SnippetHeader from \"@/components/layouts/snippet-header\";\nimport SnippetSidebar from \"@/components/layouts/snippet-sidebar\";\n\nimport { SidebarProvider } from \"@/components/ui/sidebar\";\n\nexport default function SnippetsLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n
\n \n {children}\n
\n \n );\n}\n" }, { "path": "src/app/snippets/page.tsx", "content": "\"use client\";\n\nimport SnippetList from \"@/components/layouts/snippet-list\";\nimport { useSnippetsStore } from \"@/store/useSnippetsStore\";\nimport { useEffect } from \"react\";\n\nexport default function SnippetsPage() {\n const { setSnippets, snippets } = useSnippetsStore();\n\n useEffect(() => {\n fetch(\"/data/snippets/all.json\")\n .then((res) => res.json())\n .then((data) => setSnippets(data));\n }, [setSnippets]);\n\n // This is for showing all the snippets\n return ;\n}\n" }, { "path": "src/components/layouts/available-for.tsx", "content": "import Link from \"next/link\";\n\nimport { EXTENSIONS } from \"@/data/extensions\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function AvailableFor() {\n return (\n
\n
\n

Available for:

\n
\n {EXTENSIONS.map((extension) => (\n \n \n \n {extension.name.slice(0, 2)}\n \n \n ))}\n
\n \n
\n
\n );\n}\n" }, { "path": "src/components/layouts/code-preview.tsx", "content": "import { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\nimport { oneDark } from \"react-syntax-highlighter/dist/esm/styles/prism\";\n\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\n// import CopyToClipboard from \"./CopyToClipboard\";\n// import CopyURLButton from \"./CopyURLButton\";\n\ntype Props = {\n languages: string[];\n snippets: Record;\n};\n\nconst CodePreview = ({ languages, snippets }: Props) => {\n return (\n
\n \n \n {languages.map((language) => (\n \n {language}\n \n ))}\n \n {Object.keys(snippets).map((language) => {\n const code = snippets[language as keyof typeof snippets];\n\n return (\n \n \n {code}\n \n \n );\n })}\n \n
\n );\n};\n\nexport default CodePreview;\n" }, { "path": "src/components/layouts/features.tsx", "content": "import {\n Code,\n Terminal,\n Paintbrush,\n Rocket,\n Book,\n PlusCircle,\n} from \"lucide-react\";\nimport { Card, CardContent, CardHeader } from \"../ui/card\";\n\nconst features = [\n {\n icon: ,\n title: \"Developer-Friendly\",\n desc: \"Tailored for developers to create and iterate fast, with minimal overhead and maximum flexibility.\",\n },\n {\n icon: ,\n title: \"CLI Support\",\n desc: \"Command-line interface support for seamless development and workflow integration.\",\n },\n {\n icon: ,\n title: \"Easily Customizable\",\n desc: \"Every block is built to be editable. From layout to logic, style to structure—make it your own.\",\n },\n {\n icon: ,\n title: \"v0 Support\",\n desc: \"Launch fast with confidence. Perfect for MVPs, prototypes, and weekend projects.\",\n },\n {\n icon: ,\n title: \"Full Documentation\",\n desc: \"Comprehensive documentation to understand every feature and maximize your development experience.\",\n },\n {\n icon: ,\n title: \"Contribute Yours\",\n desc: \"Add your own blocks to the library and become part of the MVPBlocks community.\",\n },\n];\nexport default function Features() {\n return (\n
\n
\n
    \n {features.map((item, idx) => (\n \n \n
    \n {item.icon}\n
    \n     \n \n

    {item.title}

    \n

    {item.desc}

    \n     \n     \n ))}\n
\n
\n
\n );\n}\n" }, { "path": "src/components/layouts/footer.tsx", "content": "import { ExternalLink } from \"lucide-react\";\nimport Link from \"next/link\";\n\nconst NAV_ITEMS = [\n { name: \"Contribute\", url: \"/contributing\", external: false },\n {\n name: \"Changelog\",\n url: \"https://github.com/quicksnip-dev/quicksnip/releases\",\n external: true,\n },\n {\n name: \"Sponsor\",\n url: \"https://ko-fi.com/technoph1le\",\n external: true,\n },\n {\n name: \"GitHub\",\n url: \"https://github.com/quicksnip-dev/quicksnip\",\n external: true,\n },\n {\n name: \"Discord\",\n url: \"https://discord.com/invite/Nm5K46yUy5\",\n external: true,\n },\n];\n\nconst Footer = () => {\n return (\n
\n
\n

\n Released under the{\" \"}\n \n MIT License.\n \n
\n Copyright © 2025\n

\n
    \n {NAV_ITEMS.map((item) => (\n
  • \n \n {item.name}\n {item.external ? : null}\n \n
    • \n ))}\n
\n
\n
\n );\n};\n\nexport default Footer;\n" }, { "path": "src/components/layouts/header.tsx", "content": "\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport { motion, AnimatePresence, easeInOut } from \"framer-motion\";\nimport { Menu, X } from \"lucide-react\";\n\nimport Link from \"next/link\";\nimport Image from \"next/image\";\n\nimport Logo from \"@/components/ui/logo\";\nimport DarkModeSwitch from \"@/components/ui/dark-mode-switch\";\n\nimport { DISCORD_URL, GITHUB_URL } from \"@/data/meta\";\n\nconst NAV_ITEMS = [\n { name: \"Snippets\", url: \"/snippets\" },\n { name: \"Guide\", url: \"/guide\" },\n { name: \"Extensions\", url: \"/extensions\" },\n { name: \"Community\", url: \"/community\" },\n { name: \"Contributing\", url: \"/contributing\" },\n];\n\nconst SOCIAL_ITEMS = [\n {\n icon: \"/assets/icons/github.svg\",\n name: \"GitHub\",\n url: GITHUB_URL,\n },\n {\n icon: \"/assets/icons/discord.svg\",\n name: \"Discord\",\n url: DISCORD_URL,\n },\n];\n\nexport default function Header() {\n const [isScrolled, setIsScrolled] = useState(false);\n const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n\n useEffect(() => {\n const handleScroll = () => {\n setIsScrolled(window.scrollY > 10);\n };\n window.addEventListener(\"scroll\", handleScroll);\n return () => window.removeEventListener(\"scroll\", handleScroll);\n }, []);\n\n const itemVariants = {\n hidden: { opacity: 0, y: -10 },\n visible: { opacity: 1, y: 0 },\n };\n\n const mobileMenuVariants = {\n closed: {\n opacity: 0,\n x: \"100%\",\n transition: {\n duration: 0.3,\n ease: easeInOut,\n },\n },\n open: {\n opacity: 1,\n x: 0,\n transition: {\n duration: 0.3,\n ease: easeInOut,\n staggerChildren: 0.1,\n },\n },\n };\n\n const mobileItemVariants = {\n closed: { opacity: 0, x: 20 },\n open: { opacity: 1, x: 0 },\n };\n\n return (\n <>\n
\n \n
\n
\n \n\n
\n \n\n
\n\n \n\n
\n\n \n {SOCIAL_ITEMS.map((item) => (\n \n \n \n ))}\n \n\n setIsMobileMenuOpen(!isMobileMenuOpen)}\n variants={itemVariants}\n whileTap={{ scale: 0.95 }}\n >\n {isMobileMenuOpen ? (\n \n ) : (\n \n )}\n \n
\n
\n
\n \n\n {/* Mobile menu */}\n \n {isMobileMenuOpen && (\n <>\n setIsMobileMenuOpen(false)}\n />\n \n
\n
\n {NAV_ITEMS.map((item) => (\n \n setIsMobileMenuOpen(false)}\n >\n {item.name}\n \n \n ))}\n
\n\n \n setIsMobileMenuOpen(false)}\n >\n Sign In\n \n setIsMobileMenuOpen(false)}\n >\n Get Started\n \n \n
\n \n \n )}\n \n \n );\n}\n" }, { "path": "src/components/layouts/hero.tsx", "content": "import Link from \"next/link\";\nimport { Button } from \"../ui/button\";\nimport { GITHUB_URL } from \"@/data/meta\";\n\nconst Hero = () => {\n return (\n
\n
\n
\n \n v2.3.1\n \n

\n A collection of <code>{\" \"}\n snippets\n

\n

\n Made by the community.\n

\n
\n \n \n Get Started\n \n \n \n GitHub\n \n \n
\n
\n
\n
\n
\n
\n
\n );\n};\n\nexport default Hero;\n" }, { "path": "src/components/layouts/snippet-header.tsx", "content": "import { Search } from \"lucide-react\";\n\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { SidebarTrigger } from \"@/components/ui/sidebar\";\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/components/ui/input-group\";\n\nexport default function SnippetHeader() {\n return (\n
\n \n \n \n \n \n \n \n \n \n
\n );\n}\n" }, { "path": "src/components/layouts/snippet-list.tsx", "content": "import SnippetItem from \"../ui/snippet-item\";\n\nimport type { SnippetType } from \"@/types\";\n\ninterface SnippetListProps {\n snippets: SnippetType[];\n}\n\nexport default function SnippetList({ snippets }: SnippetListProps) {\n return (\n
    \n {snippets.map((snippet) => (\n \n ))}\n
\n );\n}\n" }, { "path": "src/components/layouts/snippet-sidebar.tsx", "content": "\"use client\";\n\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarRail,\n} from \"@/components/ui/sidebar\";\nimport { unslugify } from \"@/lib/utils\";\nimport { useSnippetsStore } from \"@/store/useSnippetsStore\";\nimport Link from \"next/link\";\n\n// const categories = [\n// {\n// title: \"Routing\",\n// url: \"/routing\",\n// count: 23,\n// },\n// {\n// title: \"Data Fetching\",\n// url: \"#\",\n// isActive: true,\n// count: 86,\n// },\n// {\n// title: \"Rendering\",\n// url: \"#\",\n// count: 34,\n// },\n// {\n// title: \"Caching\",\n// url: \"#\",\n// count: 64,\n// },\n// {\n// title: \"Styling\",\n// url: \"#\",\n// count: 98,\n// },\n// {\n// title: \"Optimizing\",\n// url: \"#\",\n// count: 45,\n// },\n// {\n// title: \"Configuring\",\n// url: \"#\",\n// count: 123,\n// },\n// {\n// title: \"Testing\",\n// url: \"#\",\n// count: 56,\n// },\n// {\n// title: \"Authentication\",\n// url: \"#\",\n// count: 87,\n// },\n// {\n// title: \"Deploying\",\n// url: \"#\",\n// count: 234,\n// },\n// {\n// title: \"Upgrading\",\n// url: \"#\",\n// count: 12,\n// },\n// {\n// title: \"Examples\",\n// url: \"#\",\n// count: 56,\n// },\n// ];\n\nexport default function SnippetSidebar() {\n const { setCategory, categories } = useSnippetsStore();\n const cats = categories();\n\n return (\n \n \n \n \n \n \n setCategory(\"All\")}>\n All\n \n \n \n \n \n Categories\n \n {cats.length ? (\n \n {cats.map((item) => (\n \n \n setCategory(item.name)}\n className=\"flex items-center justify-between\"\n >\n {unslugify(item.name)}\n \n {item.count}\n \n \n \n \n ))}\n \n ) : null}\n \n \n \n \n \n \n );\n}\n" }, { "path": "src/components/layouts/sponsor.tsx", "content": "import Image from \"next/image\";\nimport Link from \"next/link\";\nimport {\n Card,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { SPONSOR_URL } from \"@/data/meta\";\n\nexport default function Sponsor() {\n return (\n
\n \n \n \n Support the project\n \n \n And get a special đź’– Prime Supporter role in our\n Discord server.\n \n \n \n \n \n \n \n \n
\n );\n}\n" }, { "path": "src/components/ui/accordion.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Accordion({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction AccordionItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n svg]:rotate-180\",\n className\n )}\n {...props}\n >\n {children}\n \n \n \n )\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n
{children}
\n \n )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n" }, { "path": "src/components/ui/aspect-ratio.tsx", "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nfunction AspectRatio({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nexport { AspectRatio }\n" }, { "path": "src/components/ui/avatar.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Avatar({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AvatarImage({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback };\n" }, { "path": "src/components/ui/button.tsx", "content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default:\n \"bg-accent rounded-full font-semibold text-accent-foreground shadow-xs hover:bg-accent/70\",\n destructive:\n \"bg-destructive rounded-full text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border font-semibold rounded-full bg-background shadow-xs hover:bg-accent dark:bg-input/30 dark:border-input dark:hover:bg-secondary/50\",\n secondary:\n \"bg-secondary font-semibold rounded-full text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n link: \"text-primary font-semibold underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-full gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-full px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean;\n }) {\n const Comp = asChild ? Slot : \"button\";\n\n return (\n \n );\n}\n\nexport { Button, buttonVariants };\n" }, { "path": "src/components/ui/card.tsx", "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n" }, { "path": "src/components/ui/dark-mode-switch.tsx", "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport { MoonIcon, SunIcon } from \"lucide-react\";\n\nimport { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\n\nexport default function DarkModeSwitch() {\n const id = useId();\n const [checked, setChecked] = useState(true);\n\n return (\n
\n
\n \n \n \n \n \n \n \n
\n \n
\n );\n}\n" }, { "path": "src/components/ui/extension-item.tsx", "content": "import Link from \"next/link\";\nimport Image from \"next/image\";\nimport type { ExtensionType } from \"@/types\";\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"./card\";\nimport { Button } from \"./button\";\nimport { FUTURE_EXTENSIONS } from \"@/data/extensions\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"./avatar\";\n\nexport default function ExtensionItem({\n extension,\n}: {\n extension: ExtensionType;\n}) {\n return (\n \n \n
\n \n
\n
\n {extension.name}\n

\n Downloads: \n {new Intl.NumberFormat().format(extension.downloads)}\n

\n
\n \n \n \n {extension.description}\n \n \n \n \n \n \n \n \n \n );\n}\n\nexport function NewExtensionItem() {\n return (\n \n \n Add your extension here...\n \n );\n}\n\nfunction ExtensionsAvatarGroup() {\n return (\n
\n {FUTURE_EXTENSIONS.map((extension) => (\n \n \n {extension.shortcut_name}\n \n ))}\n
\n );\n}\n" }, { "path": "src/components/ui/input-group.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n textarea]:h-auto\",\n\n // Variants based on alignment.\n \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n // Focus state.\n \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]\",\n\n // Error state.\n \"has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n\n className\n )}\n {...props}\n />\n )\n}\n\nconst inputGroupAddonVariants = cva(\n \"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50\",\n {\n variants: {\n align: {\n \"inline-start\":\n \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n \"inline-end\":\n \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n \"block-start\":\n \"order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5\",\n \"block-end\":\n \"order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n }\n)\n\nfunction InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n }}\n {...props}\n />\n )\n}\n\nconst inputGroupButtonVariants = cva(\n \"text-sm shadow-none flex gap-2 items-center\",\n {\n variants: {\n size: {\n xs: \"h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2\",\n sm: \"h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5\",\n \"icon-xs\":\n \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n }\n)\n\nfunction InputGroupButton({\n className,\n type = \"button\",\n variant = \"ghost\",\n size = \"xs\",\n ...props\n}: Omit, \"size\"> &\n VariantProps) {\n return (\n \n )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction InputGroupInput({\n className,\n ...props\n}: React.ComponentProps<\"input\">) {\n return (\n \n )\n}\n\nfunction InputGroupTextarea({\n className,\n ...props\n}: React.ComponentProps<\"textarea\">) {\n return (\n \n )\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n}\n" }, { "path": "src/components/ui/input.tsx", "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n return (\n \n )\n}\n\nexport { Input }\n" }, { "path": "src/components/ui/label.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Label }\n" }, { "path": "src/components/ui/language-icons.tsx", "content": "import { FaJs, FaPython, FaJava } from \"react-icons/fa\";\nimport { SiTypescript, SiNextdotjs, SiReact } from \"react-icons/si\";\n\nexport const languageIcons: Record<\n string,\n React.ComponentType<{ size?: number }>\n> = {\n js: FaJs,\n ts: SiTypescript,\n py: FaPython,\n java: FaJava,\n nextjs: SiNextdotjs,\n react: SiReact,\n};\n" }, { "path": "src/components/ui/logo.tsx", "content": "import Link from \"next/link\";\n\nexport const LogoIcon = () => (\n \n QuickSnip Logo\n \n A light blue logo with a thunderbolt in brackets\n \n \n \n \n \n);\n\nconst Logo = () => {\n return (\n \n \n QuickSnip\n \n );\n};\n\nexport default Logo;\n" }, { "path": "src/components/ui/navigation-menu.tsx", "content": "import * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n
\n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n" }, { "path": "src/components/ui/select.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Select({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectGroup({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"popper\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n" }, { "path": "src/components/ui/separator.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Separator({\n className,\n orientation = \"horizontal\",\n decorative = true,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Separator }\n" }, { "path": "src/components/ui/sheet.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Sheet({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction SheetTrigger({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SheetClose({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SheetPortal({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SheetContent({\n className,\n children,\n side = \"right\",\n ...props\n}: React.ComponentProps & {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n return (\n \n \n \n {children}\n \n \n Close\n \n \n \n )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n" }, { "path": "src/components/ui/sidebar.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { PanelLeftIcon } from \"lucide-react\";\n\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n} from \"@/components/ui/sheet\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\ntype SidebarContextProps = {\n state: \"expanded\" | \"collapsed\";\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n }\n\n return context;\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = React.useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === \"function\" ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open]\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n }, [isMobile, setOpen, setOpenMobile]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? \"expanded\" : \"collapsed\";\n\n const contextValue = React.useMemo(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n );\n\n return (\n \n \n \n {children}\n
\n \n \n );\n}\n\nfunction Sidebar({\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"offcanvas\",\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n side?: \"left\" | \"right\";\n variant?: \"sidebar\" | \"floating\" | \"inset\";\n collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === \"none\") {\n return (\n \n {children}\n
\n );\n }\n\n if (isMobile) {\n return (\n \n button]:hidden\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n \n Sidebar\n Displays the mobile sidebar.\n \n
{children}
\n \n \n );\n }\n\n return (\n
\n \n \n );\n}\n\nfunction SidebarTrigger({\n className,\n onClick,\n ...props\n}: React.ComponentProps) {\n const { toggleSidebar } = useSidebar();\n\n return (\n {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n \n Toggle Sidebar\n \n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n const { toggleSidebar } = useSidebar();\n\n return (\n