{"_id":"@7span/phoenix-react-ui-quizcard","_rev":"1-2532a99a55770e430950fc4dc491fffe","name":"@7span/phoenix-react-ui-quizcard","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@7span/phoenix-react-ui-quizcard","version":"1.0.0","keywords":[],"author":{"name":"7span"},"license":"MIT","_id":"@7span/phoenix-react-ui-quizcard@1.0.0","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"homepage":"https://github.com/akshay-7span/react-component-library#readme","bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"dist":{"shasum":"1cda66e44b7e7d0b7050ca951210412808874ae0","tarball":"https://registry.npmjs.org/@7span/phoenix-react-ui-quizcard/-/phoenix-react-ui-quizcard-1.0.0.tgz","fileCount":5,"integrity":"sha512-YMMcuRWjSYlQawxqXXJNUXHPvdkKTFMO0ssq9mHcpI+X6UW8KGy3du3d/3LbX00hbm8u0mQ9TG4TkyQ3Ohvidg==","signatures":[{"sig":"MEYCIQC2hIgHPOvFxytw1OgB6gH8b8mipeHC43ZUemafK3sinQIhAJ2u/lo2pTNqM5ij11MwDffKSYF5U37RyFQ9s3qna8CA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51607},"main":"index.js","gitHead":"dc3260eafdf29d8fcdcdeffd7a417d2c718390e8","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"repository":{"url":"git+https://github.com/akshay-7span/react-component-library.git","type":"git"},"_npmVersion":"8.19.3","description":"A customizable quiz card component for React applications, built with MUI.","directories":{},"_nodeVersion":"18.13.0","dependencies":{"yaml":"^1.10.2","@mui/material":"^5.15.20","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","react-router-dom":"^6.23.1","@mui/icons-material":"^5.15.20"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/phoenix-react-ui-quizcard_1.0.0_1721032137188_0.6803790433130434","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@7span/phoenix-react-ui-quizcard","version":"1.0.1","description":"A customizable quiz card component for React applications, built with MUI.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/akshay-7span/react-component-library.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":{"name":"7span"},"license":"MIT","dependencies":{"yaml":"^1.10.2","@emotion/react":"^11.11.4","@mui/icons-material":"^5.15.20","@mui/material":"^5.15.20","@emotion/styled":"^11.11.5","react-router-dom":"^6.23.1"},"bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"homepage":"https://github.com/akshay-7span/react-component-library#readme","devDependencies":{},"gitHead":"dc3260eafdf29d8fcdcdeffd7a417d2c718390e8","_id":"@7span/phoenix-react-ui-quizcard@1.0.1","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-llB8yc4jC+OtHeZ5SPnVJEvWVE3ZW8j+J2m9R6LWdkvGCZicIkRzFHPr/AwnbGwK2oVqMv28LE2A4y/Y6lVvjQ==","shasum":"09640851b08daf8051e34d0184309bbc8e420dc6","tarball":"https://registry.npmjs.org/@7span/phoenix-react-ui-quizcard/-/phoenix-react-ui-quizcard-1.0.1.tgz","fileCount":5,"unpackedSize":51604,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH34IZc87aHvyBevxQOJ1+IK+Nu+75A7eEQ6KOmkK03sAiEA9b1zcKDEhtRXOqeczvWKsUDP0UaLIu65e6FYPB0W5yA="}]},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"directories":{},"maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/phoenix-react-ui-quizcard_1.0.1_1721032335291_0.24675296821467896"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-15T08:28:57.035Z","modified":"2024-07-15T08:32:15.687Z","1.0.0":"2024-07-15T08:28:57.347Z","1.0.1":"2024-07-15T08:32:15.508Z"},"bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"author":{"name":"7span"},"license":"MIT","homepage":"https://github.com/akshay-7span/react-component-library#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/akshay-7span/react-component-library.git"},"description":"A customizable quiz card component for React applications, built with MUI.","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"readme":"# Custom Quiz Component\r\n\r\nThe `Quiz` component is a flexible and interactive card component for displaying quiz information. It includes various functionalities such as editing, moving, deleting, and playing a quiz. The component is designed to be customizable and can adapt to different use cases with the help of props.\r\n\r\n\r\n## Features\r\n\r\n- Displays quiz details including title, plays, questions, status, and folder name.\r\n- Allows editing, moving, deleting, and playing the quiz through menu actions.\r\n- Customizable menu items and action components.\r\n- Responsive design with hover and click interactions.\r\n\r\n## Installation\r\n\r\nInstall the necessary dependencies:\r\n\r\n```bash\r\nnpm install @mui/material @emotion/react @emotion/styled @mui/icons-material\r\n```\r\n\r\nInstall the package via npm:\r\n\r\n```bash\r\nnpm install @7span/phoenix-react-ui-quizcard\r\n```\r\n\r\nOr via yarn:\r\n```bash\r\nyarn add @7span/phoenix-react-ui-quizcard\r\n```\r\n\r\n## Usage\r\nHere's a basic example of how to use the custom Sidebar component in your React application:\r\n\r\n```\r\nimport React from \"react\";\r\nimport Quiz from \" @7span/phoenix-react-ui-quizcard\";\r\nimport MoveQuizModelComponent from \"./MoveQuizModelComponent\"; // Your custom move quiz modal component\r\nimport ActionItemsComponent from \"./ActionItemsComponent\"; // Your custom action items component\r\n\r\nconst App = () => {\r\n const handleDoubleClick = (id) => {\r\n console.log(\"Quiz double-clicked:\", id);\r\n };\r\n\r\n const handleDelete = (id) => {\r\n console.log(\"Quiz deleted:\", id);\r\n };\r\n\r\n const handleEdit = (id) => {\r\n console.log(\"Quiz edited:\", id);\r\n };\r\n\r\n const handleMove = (id) => {\r\n console.log(\"Quiz moved:\", id);\r\n };\r\n\r\n const handlePlay = (id) => {\r\n console.log(\"Quiz played:\", id);\r\n };\r\n\r\n const menuItems = [\r\n {\r\n name: \"Custom Action\",\r\n onClick: () => console.log(\"Custom action triggered\"),\r\n },\r\n ];\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default App;\r\n\r\n```\r\n\r\n## Props\r\n| Prop | Type | Default | Description |\r\n|---------------------------|----------|---------|------------------------------------------------------------------|\r\n| `title` | string | `null` | The title of the quiz. |\r\n| `plays` | number | `0` | The number of times the quiz has been played. |\r\n| `questions` | number | `0` | The number of questions in the quiz. |\r\n| `status` | string | `null` | The status of the quiz (e.g., DRAFT). |\r\n| `id` | number | `null` | The unique identifier of the quiz. |\r\n| `folderName` | string | `null` | The name of the folder containing the quiz. |\r\n| `coverImage` | string | `null` | The URL of the cover image for the quiz. |\r\n| `onDoubleClick` | function | `null` | Callback function triggered on double-clicking the quiz card. |\r\n| `onDelete` | function | `null` | Callback function triggered on deleting the quiz. |\r\n| `onEdit` | function | `null` | Callback function triggered on editing the quiz. |\r\n| `onMove` | function | `null` | Callback function triggered on moving the quiz. |\r\n| `onPlay` | function | `null` | Callback function triggered on playing the quiz. |\r\n| `menuItems` | array | `null` | Custom menu items to display in the action menu. |\r\n| `MoveQuizModelComponent` | element | `null` | Custom component for handling the move quiz modal. |\r\n| `ActionItemsComponent` | element | `null` | Custom component for displaying action items in the menu. |\r\n\r\n\r\n\r\n\r\n## Customization\r\nYou can customize the styles of the ActionItems component and its elements by modifying the sx prop in the component's JSX.\r\n\r\n## Images\r\n|Quiz Card|\r\n|:-:|\r\n|![Quiz Card Image](https://github.com/akshay-7span/react-component-library/blob/VS-238/Quiz/cover_img.png)|\r\n\r\n\r\n## Author\r\n- Krushna Mistry\r\n\r\n## Contributing\r\nIf you would like to contribute to the project, please follow these steps:\r\n1. Fork the repository\r\n2. Create a new branch (git checkout -b feature/your-feature)\r\n3. Make your changes\r\n4. Commit your changes (git commit -m 'Add some feature')\r\n5. Push to the branch (git push origin feature/your-feature)\r\n6. Open a Pull Request\r\n\r\n\r\n## License\r\nThis project is licensed under the MIT License\r\n\r\n## Contact\r\nIf you have any questions or suggestions, feel free to open an issue or contact me directly at [yo@7span.com].\r\n\r\n\r\nMade with by 7span\r\n##### This `README.md` file provides comprehensive details about the `Quiz Card` component, including installation instructions, usage examples, prop descriptions, customization options, and the actual component code. Let me know if you need any more adjustments!\r\n\r\n","readmeFilename":"README.md"}