├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── index.html ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── components │ ├── author-card │ │ ├── AuthorCard.jsx │ │ └── SocialTags.jsx │ ├── codehighlight │ │ └── CodeBlock.jsx │ ├── layout │ │ ├── Explainer.jsx │ │ ├── Navbar.jsx │ │ ├── Sidebar.jsx │ │ └── sidebar-links.js │ └── tags │ │ ├── a │ │ ├── A.jsx │ │ ├── a_details.js │ │ └── index.jsx │ │ ├── br │ │ ├── Br.jsx │ │ ├── br_details.js │ │ └── index.js │ │ ├── button │ │ ├── Button.jsx │ │ ├── button_details.js │ │ └── index.js │ │ ├── details │ │ ├── Details.jsx │ │ ├── details_details.js │ │ └── index.jsx │ │ ├── dialog │ │ ├── Dialog.jsx │ │ ├── dialog_details.js │ │ └── index.jsx │ │ ├── div │ │ ├── Div.jsx │ │ ├── div_details.js │ │ └── index.js │ │ ├── h1 │ │ ├── H1.jsx │ │ ├── h1_details.js │ │ └── index.jsx │ │ ├── h2 │ │ ├── H2.jsx │ │ ├── h2_details.js │ │ └── index.jsx │ │ ├── h3 │ │ ├── H3.jsx │ │ ├── h3_details.js │ │ └── index.jsx │ │ ├── h4 │ │ ├── H4.jsx │ │ ├── h4_details.js │ │ └── index.js │ │ ├── h5 │ │ ├── H5.jsx │ │ ├── h5_details.js │ │ └── index.js │ │ ├── h6 │ │ ├── H6.jsx │ │ ├── h6_details.js │ │ └── index.js │ │ ├── header │ │ ├── header.jsx │ │ └── index.js │ │ ├── img │ │ ├── Img.jsx │ │ ├── img_details.js │ │ └── index.jsx │ │ ├── p │ │ ├── P.jsx │ │ ├── index.js │ │ └── p_details.js │ │ ├── small │ │ ├── Small.jsx │ │ ├── index.js │ │ └── small_details.js │ │ └── tags.module.css ├── index.css ├── index.js ├── logo.svg ├── pages │ └── home │ │ └── Documenter.jsx ├── reportWebVitals.js └── setupTests.js ├── tailwind.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | Practice how to create a reusable JSX element component by converting any HTML tag of your choice to React JSX component. 3 | 4 | 5 | Check the live website [here](https://react-jsx-tag-components.vercel.app/). 6 | 7 | ## Tools and Dependencies 8 | 9 | - Yarn 10 | - Create-react-app 11 | - Tailwind CSS 12 | - React Router v6 13 | - Prism-react-renderer 14 | 15 | ## How to Contribute? 16 | - Create an issue about the JSX tag you want to contribute (let people know that it's taken) 17 | - Clone [this](https://github.com/unclebay143/react-jsx-tag-components) repository 18 | - Run `yarn install` to install the dependencies 19 | - Create your own branch 20 | - Create a new folder for your HTML tag i.e `h1` in the `tags` folder 21 | - Create the following files inside your new HTML tag folder 22 | - JSX tag file i.e `H1.jsx` 23 | - Component and contributors details file i.e `h1_details.js` 24 | - `index.js` 25 | - Create a resuable JSX element component inside the HTML tag file i.e `H1.jsx` 26 | - Add the code and title in the `h1_details.js` file 27 | - Export the component as default using the `index.js` file 28 | - Add the component to the `Sidebar-links.js` file in the `components/sidebar` folder 29 | - Preview your work 30 | - Commit and send a PR 31 | 32 | ## Proposed UI 33 | ![image](https://user-images.githubusercontent.com/58919619/195976588-d58f48af-ca27-48d6-8830-0d818807d615.png) 34 | 35 | ## Update 36 | ![image](https://user-images.githubusercontent.com/58919619/196339691-6feb2173-3db4-470e-bc52-b3479e44c880.png) 37 | 38 | ## Update (Current) 39 | ![image](https://user-images.githubusercontent.com/58919619/196357359-2ea90226-997a-4c8e-ae29-70389d3e5f7c.png) 40 | 41 | 42 | 43 | 44 | 45 | 46 | # Thanks to all Stargazers ⭐️ 47 | 48 | [![Thanks to all stargazers](https://git-lister.onrender.com/api/stars/unclebay143/react-jsx-tag-components?limit=30)](https://github.com/unclebay143/react-jsx-tag-components) 49 | 50 | 51 | # Kudos to all Contributors 🍻 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-components-templates", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^13.0.0", 8 | "@testing-library/user-event": "^13.2.1", 9 | "prism-react-renderer": "^1.3.5", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-router-dom": "^6.4.2", 13 | "react-scripts": "^5.0.1", 14 | "web-vitals": "^2.1.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | }, 40 | "devDependencies": { 41 | "autoprefixer": "^10.4.12", 42 | "postcss": "^8.4.18", 43 | "tailwindcss": "^3.1.8" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React JSX Tag Components 🚀 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React JSX Tag Components 🚀", 3 | "name": "React JSX Tag Components 🚀" 4 | } 5 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { Route, Routes } from 'react-router-dom'; 2 | import { a_details } from './components/tags/a/a_details'; 3 | import { h1_details } from './components/tags/h1/h1_details'; 4 | import { h2_details } from './components/tags/h2/h2_details'; 5 | import { img_details } from './components/tags/img/img_details'; 6 | import { p_details } from './components/tags/p/p_details'; 7 | import { dialog_details } from './components/tags/dialog/dialog_details'; 8 | import { Documenter } from './pages/home/Documenter'; 9 | import { h3_details } from './components/tags/h3/h3_details'; 10 | import { details_details } from './components/tags/details/details_details'; 11 | import { h4_details } from './components/tags/h4/h4_details'; 12 | import { h5_details } from './components/tags/h5/h5_details'; 13 | import { h6_details } from './components/tags/h6/h6_details'; 14 | import { button_details } from './components/tags/button/button_details'; 15 | import { div_details } from './components/tags/div/div_details'; 16 | import { br_details } from './components/tags/br/br_details'; 17 | import { small_details } from './components/tags/small/small_details'; 18 | 19 | function App() { 20 | return ( 21 | 22 | } /> 23 | } 26 | /> 27 | 28 | } 31 | /> 32 | 33 | } /> 34 | 35 | } 38 | /> 39 | } /> 40 | 41 | } 44 | /> 45 | 46 | } 49 | /> 50 | 51 | } 54 | /> 55 | } 58 | /> 59 | } 62 | /> 63 | 64 | } 67 | /> 68 | } 71 | /> 72 | } 75 | /> 76 | } 79 | /> 80 | } 83 | /> 84 | 85 | ); 86 | } 87 | 88 | export default App; 89 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/author-card/AuthorCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SocialTags from "./SocialTags"; 3 | 4 | const AuthorCard = ({ author }) => { 5 | const { name, github_image_url, brief, socials, socials_theme } = 6 | author || {}; 7 | return ( 8 |
9 |
10 |

11 | Contributor's Profile 12 |

13 |
14 |
15 |
16 |
17 |
21 |
22 |
23 | Author 31 |
32 |
33 | 34 |
38 |
39 |

43 | {name} 44 |

45 |
46 | {socials && ( 47 |
48 |

49 | Let's Connect 👋 50 |

51 | 55 |
56 | )} 57 | 58 |
59 |

63 | {brief} 64 |

65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 | ); 73 | }; 74 | 75 | export default AuthorCard; 76 | -------------------------------------------------------------------------------- /src/components/author-card/SocialTags.jsx: -------------------------------------------------------------------------------- 1 | const SocialTags = ({ socials, socials_theme }) => { 2 | const { tailwind_bg_color, tailwind_text_color } = socials_theme || {}; 3 | return ( 4 |
5 |
6 | {socials?.map(({ name, url }) => { 7 | return ( 8 | 14 | 19 | 20 | 21 | {name} 22 | 23 | ); 24 | })} 25 |
26 |
27 | ); 28 | }; 29 | 30 | export default SocialTags; 31 | -------------------------------------------------------------------------------- /src/components/codehighlight/CodeBlock.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Highlight, { defaultProps } from "prism-react-renderer"; 3 | 4 | export const CodeBlock = ({ language, codeSnippet }) => { 5 | return ( 6 | 11 | {({ className, style, tokens, getLineProps, getTokenProps }) => ( 12 | 
13 |           {tokens.map((line, i) => (
14 |             

15 |               {line.map((token, key) => (
16 |                 
17 |               ))}
18 |             

19 |           ))}
20 |
21 | )} 22 | 23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /src/components/layout/Explainer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AuthorCard from "../author-card/AuthorCard"; 3 | import { CodeBlock } from "../codehighlight/CodeBlock"; 4 | 5 | const Explainer = ({ details }) => { 6 | const { title, subtitle, language, codeSnippet, githubURL, author } = details; 7 | 8 | return ( 9 |
10 |
11 |

12 | {title} - JSX Tag Component 13 |

14 |
15 |
16 | {/*
17 |

18 | {title} Component 19 |

20 |
*/} 21 |
22 | 23 |
24 |
25 | 31 | Show on GitHub 32 | 33 |
34 |
35 | {/* Contributor Card */} 36 | 37 |
38 | ); 39 | }; 40 | 41 | export default Explainer; 42 | -------------------------------------------------------------------------------- /src/components/layout/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Navbar = () => { 4 | return ( 5 | 12 | ); 13 | }; 14 | 15 | export default Navbar; 16 | -------------------------------------------------------------------------------- /src/components/layout/Sidebar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link, useMatch, useResolvedPath } from "react-router-dom"; 3 | import { sidebarLinks } from "./sidebar-links"; 4 | 5 | const Sidebar = () => { 6 | return ( 7 | 19 | ); 20 | }; 21 | 22 | function LinksWithActiveClass({ children, to, ...props }) { 23 | let resolved = useResolvedPath(to); 24 | let match = useMatch({ path: resolved.pathname, end: true }); 25 | 26 | return ( 27 |
  • 28 | 33 | {children} 34 | {match && " 👈🏽"} 35 | 36 |
    • 37 | ); 38 | } 39 | 40 | export default Sidebar; 41 | -------------------------------------------------------------------------------- /src/components/layout/sidebar-links.js: -------------------------------------------------------------------------------- 1 | export const sidebarLinks = [ 2 | { 3 | label: 'h1', 4 | to: '/h1', 5 | }, 6 | { 7 | label: 'h2', 8 | to: '/h2', 9 | }, 10 | { 11 | label: 'h3', 12 | to: '/h3', 13 | }, 14 | { 15 | label: 'h4', 16 | to: '/h4', 17 | }, 18 | { 19 | label: 'h5', 20 | to: '/h5', 21 | }, 22 | { 23 | label: 'h6', 24 | to: '/h6', 25 | }, 26 | { 27 | label: 'a', 28 | to: '/a', 29 | }, 30 | { 31 | label: 'img', 32 | to: '/img', 33 | }, 34 | { 35 | label: 'p', 36 | to: '/p', 37 | }, 38 | { 39 | label: 'dialog', 40 | to: '/dialog', 41 | }, 42 | { 43 | label: 'div', 44 | to: '/div', 45 | }, 46 | { 47 | label: 'details', 48 | to: '/details', 49 | }, 50 | { 51 | label: 'button', 52 | to: '/button', 53 | }, 54 | { 55 | label: 'br', 56 | to: '/br', 57 | }, 58 | { 59 | label: 'small', 60 | to: '/small', 61 | }, 62 | ]; 63 | -------------------------------------------------------------------------------- /src/components/tags/a/A.jsx: -------------------------------------------------------------------------------- 1 | export const A = (props) => { 2 | const { text, classes, styles, children, url } = props; 3 | 4 | return ( 5 | 6 | {children || text || "Link"} 7 | 8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /src/components/tags/a/a_details.js: -------------------------------------------------------------------------------- 1 | export const a_details = { 2 | title: "A", 3 | codeSnippet: ` 4 | export const A = (props) => { 5 | const { text, classes, styles, children, url } = props; 6 | 7 | return ( 8 | 9 | {children || text || "Link"} 10 | 11 | ); 12 | }; 13 | `, 14 | 15 | author: { 16 | name: "Juan Sebastian Mendoza", 17 | profession: "Software Developer", 18 | github_image_url: "https://github.com/JuanSebastianM.png", 19 | socials: [ 20 | { 21 | name: "GitHub", 22 | url: "https://github.com/JuanSebastianM", 23 | }, 24 | { 25 | name: "LinkedIn", 26 | url: "https://www.linkedin.com/in/juan-sebastian-mendoza-perez/", 27 | }, 28 | { name: "Twitter", url: "https://twitter.com/JuanMendozaDev" }, 29 | { name: "Hashnode", url: "https://hashnode.com/@JuanMendozaDev" }, 30 | { name: "Blog", url: "https://juansebastian.hashnode.dev" }, 31 | ], 32 | socials_theme: { 33 | tailwind_bg_color: "bg-pink-400", 34 | tailwind_text_color: "text-white", 35 | }, 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /src/components/tags/a/index.jsx: -------------------------------------------------------------------------------- 1 | export { A as default } from "./A"; 2 | -------------------------------------------------------------------------------- /src/components/tags/br/Br.jsx: -------------------------------------------------------------------------------- 1 | export const Br = (props) => { 2 | const { text, classes, styles } = props; 3 | return
    ; 4 | }; 5 | -------------------------------------------------------------------------------- /src/components/tags/br/br_details.js: -------------------------------------------------------------------------------- 1 | export const br_details = { 2 | title: 'Br', 3 | codeSnippet: ` 4 | export const Br = (props) => { 5 | const { text, classes, styles } = props; 6 | return
    ; 7 | }; 8 | `, 9 | 10 | author: { 11 | name: 'Godswill Udoh', 12 | profession: 'Frontend Developer', 13 | github_image_url: 'https://github.com/godswilludoh.png', 14 | socials: [ 15 | { 16 | name: 'GitHub', 17 | url: 'https://github.com/godswilludoh', 18 | }, 19 | { 20 | name: 'LinkedIn', 21 | url: 'https://www.linkedin.com/in/godswill-udoh-832aba141/', 22 | }, 23 | { name: 'Twitter', url: 'https://twitter.com/officialgodswil' }, 24 | { name: 'Hashnode', url: 'https://hashnode.com/@godswilludoh' }, 25 | { name: 'Blog', url: 'https://godswilludoh.substack.com/' }, 26 | ], 27 | socials_theme: { 28 | tailwind_bg_color: 'bg-rose-400', 29 | tailwind_text_color: 'text-white', 30 | }, 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /src/components/tags/br/index.js: -------------------------------------------------------------------------------- 1 | export { Br as default } from './Br'; 2 | -------------------------------------------------------------------------------- /src/components/tags/button/Button.jsx: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import tag_styles from './../tags.module.css'; 3 | 4 | export const Button = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /src/components/tags/button/button_details.js: -------------------------------------------------------------------------------- 1 | export const button_details = { 2 | title: 'Button', 3 | codeSnippet: ` 4 | export const Button = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 | 10 | ); 11 | }; 12 | `, 13 | 14 | author: { 15 | name: 'Ijeoma Igboagu', 16 | profession: 'Front-end developer | tech communicator', 17 | github_image_url: 'https://github.com/ijayhub.png', 18 | socials: [ 19 | { 20 | name: 'GitHub', 21 | url: 'https://github.com/ijayhub', 22 | }, 23 | { name: 'LinkedIn', url: 'https://www.linkedin.com/in/ijeoma-igboagu/' }, 24 | { name: 'Twitter', url: 'https://twitter.com/ijaydimples' }, 25 | { name: 'Hashnode', url: 'https://ijaycent.hashnode.dev/' }, 26 | { name: 'Blog', url: '' }, 27 | ], 28 | socials_theme: { 29 | tailwind_bg_color: 'bg-pink-400', 30 | tailwind_text_color: 'text-white', 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/components/tags/button/index.js: -------------------------------------------------------------------------------- 1 | export { Button as default } from './Button'; 2 | -------------------------------------------------------------------------------- /src/components/tags/details/Details.jsx: -------------------------------------------------------------------------------- 1 | export const Details = (props) => { 2 | const { text, classes, styles, children, summary } = props; 3 | 4 | return ( 5 |
    6 | {summary} 7 | {children || text || 'Details'} 8 |
    9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /src/components/tags/details/details_details.js: -------------------------------------------------------------------------------- 1 | export const details_details = { 2 | title: 'Details', 3 | codeSnippet: ` 4 | export const Details = (props) => { 5 | const { text, classes, styles, children, summary } = props; 6 | 7 | return ( 8 |
    9 | {summary} 10 | {children || text || 'Details'} 11 |
    12 | ); 13 | }; 14 | `, 15 | 16 | author: { 17 | name: 'Juan Sebastian Mendoza', 18 | profession: 'Software Developer', 19 | github_image_url: 'https://github.com/JuanSebastianM.png', 20 | socials: [ 21 | { 22 | name: 'GitHub', 23 | url: 'https://github.com/JuanSebastianM', 24 | }, 25 | { 26 | name: 'LinkedIn', 27 | url: 'https://www.linkedin.com/in/juan-sebastian-mendoza-perez/', 28 | }, 29 | { name: 'Twitter', url: 'https://twitter.com/JuanMendozaDev' }, 30 | { name: 'Hashnode', url: 'https://hashnode.com/@JuanMendozaDev' }, 31 | { name: 'Blog', url: 'https://juansebastian.hashnode.dev' }, 32 | ], 33 | socials_theme: { 34 | tailwind_bg_color: 'bg-pink-400', 35 | tailwind_text_color: 'text-white', 36 | }, 37 | }, 38 | }; 39 | -------------------------------------------------------------------------------- /src/components/tags/details/index.jsx: -------------------------------------------------------------------------------- 1 | export { Details as default } from './Details'; 2 | -------------------------------------------------------------------------------- /src/components/tags/dialog/Dialog.jsx: -------------------------------------------------------------------------------- 1 | export const Dialog = (props) => { 2 | const { text, classes, styles, children, isOpen } = props; 3 | 4 | return ( 5 | 6 | {children || text || "Dialog"} 7 | 8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /src/components/tags/dialog/dialog_details.js: -------------------------------------------------------------------------------- 1 | export const dialog_details = { 2 | title: "Dialog", 3 | codeSnippet: ` 4 | export const Dialog = (props) => { 5 | const { text, classes, styles, children, isOpen } = props; 6 | 7 | return ( 8 | 14 | {children || text || "Dialog"} 15 | 16 | ); 17 | }; 18 | `, 19 | author: { 20 | name: "Juan Sebastian Mendoza", 21 | profession: "Software Developer", 22 | github_image_url: "https://github.com/JuanSebastianM.png", 23 | socials: [ 24 | { 25 | name: "GitHub", 26 | url: "https://github.com/JuanSebastianM", 27 | }, 28 | { 29 | name: "LinkedIn", 30 | url: "https://www.linkedin.com/in/juan-sebastian-mendoza-perez/", 31 | }, 32 | { name: "Twitter", url: "https://twitter.com/JuanMendozaDev" }, 33 | { name: "Hashnode", url: "https://hashnode.com/@JuanMendozaDev" }, 34 | { name: "Blog", url: "https://juansebastian.hashnode.dev" }, 35 | ], 36 | socials_theme: { 37 | tailwind_bg_color: "bg-pink-400", 38 | tailwind_text_color: "text-white", 39 | }, 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /src/components/tags/dialog/index.jsx: -------------------------------------------------------------------------------- 1 | export { Dialog as default } from "./Dialog"; 2 | -------------------------------------------------------------------------------- /src/components/tags/div/Div.jsx: -------------------------------------------------------------------------------- 1 | export const Div = (props) => { 2 | const { text, classes, styles, children } = props; 3 | return ( 4 |
    5 | {children || text || 'Div Tag'} 6 |
    7 | ); 8 | }; 9 | -------------------------------------------------------------------------------- /src/components/tags/div/div_details.js: -------------------------------------------------------------------------------- 1 | export const div_details = { 2 | title: 'Div', 3 | codeSnippet: ` 4 | export const Div = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 |
    8 | {children || text || 'Div Tag'} 9 |
    10 | ); 11 | }; 12 | `, 13 | 14 | author: { 15 | name: 'Godswill Udoh', 16 | profession: 'Frontend Developer', 17 | github_image_url: 'https://github.com/godswilludoh.png', 18 | socials: [ 19 | { 20 | name: 'GitHub', 21 | url: 'https://github.com/godswilludoh', 22 | }, 23 | { 24 | name: 'LinkedIn', 25 | url: 'https://www.linkedin.com/in/godswill-udoh-832aba141/', 26 | }, 27 | { name: 'Twitter', url: 'https://twitter.com/officialgodswil' }, 28 | { name: 'Hashnode', url: 'https://hashnode.com/@godswilludoh' }, 29 | { name: 'Blog', url: 'https://godswilludoh.substack.com/' }, 30 | ], 31 | socials_theme: { 32 | tailwind_bg_color: 'bg-purple-400', 33 | tailwind_text_color: 'text-white', 34 | }, 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/tags/div/index.js: -------------------------------------------------------------------------------- 1 | export { Div as default } from './Div'; 2 | -------------------------------------------------------------------------------- /src/components/tags/h1/H1.jsx: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import tag_styles from "./../tags.module.css"; 3 | 4 | export const H1 = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 |

    8 | {children || text || "Title 1"} 9 |

    10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /src/components/tags/h1/h1_details.js: -------------------------------------------------------------------------------- 1 | export const h1_details = { 2 | title: "H1", 3 | codeSnippet: ` 4 | export const H1 = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 |

    8 | {children || text || "Title 1"} 9 |

    10 | ); 11 | }; 12 | `, 13 | 14 | author: { 15 | name: "Ayodele Samuel Adebayo (Unclebigbay)", 16 | profession: "Customer Success Engineer", 17 | github_image_url: "https://github.com/unclebay143.png", 18 | socials: [ 19 | { 20 | name: "GitHub", 21 | url: "https://github.com/unclebay143", 22 | }, 23 | { name: "LinkedIn", url: "https://linkedin.com/in/unclebigbay" }, 24 | { name: "Twitter", url: "https://twitter.com/unclebigbay143" }, 25 | { name: "Hashnode", url: "https://hashnode.com/unclebigbay" }, 26 | { name: "Blog", url: "https://unclebigbay.com" }, 27 | ], 28 | socials_theme: { 29 | tailwind_bg_color: "bg-pink-400", 30 | tailwind_text_color: "text-white", 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/components/tags/h1/index.jsx: -------------------------------------------------------------------------------- 1 | export { H1 as default } from "./H1"; 2 | -------------------------------------------------------------------------------- /src/components/tags/h2/H2.jsx: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import tag_styles from "./../tags.module.css"; 3 | 4 | export const H2 = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 |

    8 | {children || text || "Title 2"} 9 |

    10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /src/components/tags/h2/h2_details.js: -------------------------------------------------------------------------------- 1 | export const h2_details = { 2 | title: "H2", 3 | codeSnippet: ` 4 | export const H2 = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 |

    8 | {children || text || "Title 2"} 9 |

    10 | ); 11 | }; 12 | `, 13 | 14 | author: { 15 | name: "Ayodele Samuel Adebayo (Unclebigbay)", 16 | profession: "Customer Success Engineer", 17 | github_image_url: "https://github.com/unclebay143.png", 18 | socials: [ 19 | { 20 | name: "GitHub", 21 | url: "https://github.com/unclebay143", 22 | }, 23 | { name: "LinkedIn", url: "https://linkedin.com/in/unclebigbay" }, 24 | { name: "Twitter", url: "https://twitter.com/unclebigbay143" }, 25 | { name: "Hashnode", url: "https://hashnode.com/unclebigbay" }, 26 | { name: "Blog", url: "https://unclebigbay.com" }, 27 | ], 28 | socials_theme: { 29 | tailwind_bg_color: "bg-pink-400", 30 | tailwind_text_color: "text-white", 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/components/tags/h2/index.jsx: -------------------------------------------------------------------------------- 1 | export { H2 as default } from "./H2"; 2 | -------------------------------------------------------------------------------- /src/components/tags/h3/H3.jsx: -------------------------------------------------------------------------------- 1 | export const H3 = (props) => { 2 | const { text, classes, styles, children } = props; 3 | 4 | return ( 5 |

    6 | {children || text || "Title 3"} 7 |

    8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /src/components/tags/h3/h3_details.js: -------------------------------------------------------------------------------- 1 | export const h3_details = { 2 | title: "H3", 3 | codeSnippet: ` 4 | export const H3 = (props) => { 5 | const { text, classes, styles, children } = props; 6 | 7 | return ( 8 |

    9 | {children || text || "Title 3"} 10 |

    11 | ); 12 | }; 13 | `, 14 | 15 | author: { 16 | name: "Juan Sebastian Mendoza", 17 | profession: "Software Developer", 18 | github_image_url: "https://github.com/JuanSebastianM.png", 19 | socials: [ 20 | { 21 | name: "GitHub", 22 | url: "https://github.com/JuanSebastianM", 23 | }, 24 | { 25 | name: "LinkedIn", 26 | url: "https://www.linkedin.com/in/juan-sebastian-mendoza-perez/", 27 | }, 28 | { name: "Twitter", url: "https://twitter.com/JuanMendozaDev" }, 29 | { name: "Hashnode", url: "https://hashnode.com/@JuanMendozaDev" }, 30 | { name: "Blog", url: "https://juansebastian.hashnode.dev" }, 31 | ], 32 | socials_theme: { 33 | tailwind_bg_color: "bg-pink-400", 34 | tailwind_text_color: "text-white", 35 | }, 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /src/components/tags/h3/index.jsx: -------------------------------------------------------------------------------- 1 | export { H3 as default } from "./H3"; 2 | -------------------------------------------------------------------------------- /src/components/tags/h4/H4.jsx: -------------------------------------------------------------------------------- 1 | export const H4 = (props) => { 2 | const { text, classes, styles, children } = props; 3 | return ( 4 |

    5 | {children || text || 'Title 4'} 6 |

    7 | ); 8 | }; 9 | -------------------------------------------------------------------------------- /src/components/tags/h4/h4_details.js: -------------------------------------------------------------------------------- 1 | export const h4_details = { 2 | title: 'H4', 3 | codeSnippet: ` 4 | export const H4 = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 |

    8 | {children || text || 'Title 4'} 9 |

    10 | ); 11 | }; 12 | `, 13 | 14 | author: { 15 | name: 'Godswill Udoh', 16 | profession: 'Frontend Developer', 17 | github_image_url: 'https://github.com/godswilludoh.png', 18 | socials: [ 19 | { 20 | name: 'GitHub', 21 | url: 'https://github.com/godswilludoh', 22 | }, 23 | { 24 | name: 'LinkedIn', 25 | url: 'https://www.linkedin.com/in/godswill-udoh-832aba141/', 26 | }, 27 | { name: 'Twitter', url: 'https://twitter.com/officialgodswil' }, 28 | { name: 'Hashnode', url: 'https://hashnode.com/@godswilludoh' }, 29 | { name: 'Blog', url: 'https://godswilludoh.substack.com/' }, 30 | ], 31 | socials_theme: { 32 | tailwind_bg_color: 'bg-blue-400', 33 | tailwind_text_color: 'text-white', 34 | }, 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/tags/h4/index.js: -------------------------------------------------------------------------------- 1 | export { H4 as default } from './H4'; 2 | -------------------------------------------------------------------------------- /src/components/tags/h5/H5.jsx: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import tag_styles from './../tags.module.css'; 3 | 4 | export const H5 = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 |
    8 | {children || text || 'Title 5'} 9 |
    10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /src/components/tags/h5/h5_details.js: -------------------------------------------------------------------------------- 1 | export const h5_details = { 2 | title: 'H5', 3 | codeSnippet: ` 4 | export const H5 = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 |
    8 | {children || text || "Title 5"} 9 |
    10 | ); 11 | }; 12 | `, 13 | 14 | author: { 15 | name: 'Ijeoma Igboagu', 16 | profession: 'Front-end developer | tech communicator', 17 | github_image_url: 'https://github.com/ijayhub.png', 18 | socials: [ 19 | { 20 | name: 'GitHub', 21 | url: 'https://github.com/ijayhub', 22 | }, 23 | { name: 'LinkedIn', url: 'https://www.linkedin.com/in/ijeoma-igboagu/' }, 24 | { name: 'Twitter', url: 'https://twitter.com/ijaydimples' }, 25 | { name: 'Hashnode', url: 'https://ijaycent.hashnode.dev/' }, 26 | { name: 'Blog', url: '' }, 27 | ], 28 | socials_theme: { 29 | tailwind_bg_color: 'bg-pink-400', 30 | tailwind_text_color: 'text-white', 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/components/tags/h5/index.js: -------------------------------------------------------------------------------- 1 | export { H5 as default } from './H5'; 2 | -------------------------------------------------------------------------------- /src/components/tags/h6/H6.jsx: -------------------------------------------------------------------------------- 1 | export const H6 = (props) => { 2 | const { text, classes, styles, children } = props; 3 | return ( 4 |
    5 | {children || text || 'Title 6'} 6 |
    7 | ); 8 | }; -------------------------------------------------------------------------------- /src/components/tags/h6/h6_details.js: -------------------------------------------------------------------------------- 1 | export const h6_details = { 2 | title: 'H6', 3 | codeSnippet: ` 4 | export const H6 = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 |
    8 | {children || text || "Title 6"} 9 |
    10 | ); 11 | }; 12 | `, 13 | 14 | author: { 15 | name: 'Kehinde Ridwan Onifade', 16 | profession: 'Fullstack developer', 17 | github_image_url: 'https://github.com/kendoriddy.png', 18 | socials: [ 19 | { 20 | name: 'GitHub', 21 | url: 'https://github.com/kendoriddy', 22 | }, 23 | { name: 'LinkedIn', url: 'https://www.linkedin.com/in/kehindeonifade/' }, 24 | { name: 'Twitter', url: 'https://twitter.com/RideOnOne09' }, 25 | { name: 'Medium', url: 'https://hashnode.com/@RideOnOne' }, 26 | { name: 'Blog', url: 'https://medium.com/@onifkay' }, 27 | ], 28 | socials_theme: { 29 | tailwind_bg_color: 'bg-blue-400', 30 | tailwind_text_color: 'text-white', 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/components/tags/h6/index.js: -------------------------------------------------------------------------------- 1 | export { H6 as default } from './H6'; -------------------------------------------------------------------------------- /src/components/tags/header/header.jsx: -------------------------------------------------------------------------------- 1 | export const header = (props) => { 2 | const { text, classes, styles, children } = props; 3 | return ( 4 |
    5 | {children || text || 'Title 6'} 6 |
    7 | ); 8 | }; -------------------------------------------------------------------------------- /src/components/tags/header/index.js: -------------------------------------------------------------------------------- 1 | export { header as default } from './header'; -------------------------------------------------------------------------------- /src/components/tags/img/Img.jsx: -------------------------------------------------------------------------------- 1 | import tag_styles from "./../tags.module.css"; 2 | 3 | export const Img = (props) => { 4 | const {alt, src, width, height, classes, styles} = props; 5 | return ( 6 | {alt} 7 | ) 8 | } -------------------------------------------------------------------------------- /src/components/tags/img/img_details.js: -------------------------------------------------------------------------------- 1 | export const img_details = { 2 | title: "Img", 3 | codeSnippet: ` 4 | export const Img = (props) => { 5 | const {alt, src, width, height, classes, styles} = props; 6 | 7 | return ( 8 | {alt} 9 | ); 10 | }; 11 | `, 12 | 13 | author: { 14 | name: "Abdul-Rasheed Wahab", 15 | profession: "Software Engineer", 16 | github_image_url: "https://github.com/Damilola99-web.png", 17 | socials: [ 18 | { 19 | name: "GitHub", 20 | url: "https://github.com/Damilola99-web", 21 | }, 22 | { name: "LinkedIn", url: "https://linkedin.com/in/abdul-rasheed-wahab-92aa15214" }, 23 | { name: "Twitter", url: "https://twitter.com/RashedWahab" }, 24 | ], 25 | socials_theme: { 26 | tailwind_bg_color: "bg-green-500", 27 | tailwind_text_color: "text-white", 28 | }, 29 | }, 30 | } -------------------------------------------------------------------------------- /src/components/tags/img/index.jsx: -------------------------------------------------------------------------------- 1 | export { Img as default } from "./Img"; -------------------------------------------------------------------------------- /src/components/tags/p/P.jsx: -------------------------------------------------------------------------------- 1 | export const P = (props) => { 2 | const { text, classes, styles, children } = props; 3 | return ( 4 |

    5 | {children || text || 'Paragraph'} 6 |

    7 | ); 8 | }; 9 | -------------------------------------------------------------------------------- /src/components/tags/p/index.js: -------------------------------------------------------------------------------- 1 | export { P as default } from './P'; 2 | -------------------------------------------------------------------------------- /src/components/tags/p/p_details.js: -------------------------------------------------------------------------------- 1 | export const p_details = { 2 | title: 'P', 3 | codeSnippet: ` 4 | export const P = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 |

    8 | {children || text || 'Paragraph'} 9 |

    10 | ); 11 | }; 12 | 13 | `, 14 | 15 | author: { 16 | name: 'Godswill Udoh', 17 | profession: 'Frontend Developer', 18 | github_image_url: 'https://github.com/godswilludoh.png', 19 | socials: [ 20 | { 21 | name: 'GitHub', 22 | url: 'https://github.com/godswilludoh', 23 | }, 24 | { 25 | name: 'LinkedIn', 26 | url: 'https://www.linkedin.com/in/godswill-udoh-832aba141/', 27 | }, 28 | { name: 'Twitter', url: 'https://twitter.com/officialgodswil' }, 29 | { name: 'Hashnode', url: 'https://hashnode.com/@godswilludoh' }, 30 | { name: 'Blog', url: 'https://godswilludoh.substack.com/' }, 31 | ], 32 | socials_theme: { 33 | tailwind_bg_color: 'bg-pink-400', 34 | tailwind_text_color: 'text-white', 35 | }, 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /src/components/tags/small/Small.jsx: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import tag_styles from './../tags.module.css'; 3 | 4 | export const Small = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 | 8 | {children || text || 'Small'} 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /src/components/tags/small/index.js: -------------------------------------------------------------------------------- 1 | export { Small as default } from './Small'; 2 | -------------------------------------------------------------------------------- /src/components/tags/small/small_details.js: -------------------------------------------------------------------------------- 1 | export const small_details = { 2 | title: 'small', 3 | codeSnippet: ` 4 | export const small = (props) => { 5 | const { text, classes, styles, children } = props; 6 | return ( 7 | 8 | {children || text || "Small"} 9 | 10 | ); 11 | }; 12 | `, 13 | 14 | author: { 15 | name: 'Ijeoma Igboagu', 16 | profession: 'Front-end developer | tech communicator', 17 | github_image_url: 'https://github.com/ijayhub.png', 18 | socials: [ 19 | { 20 | name: 'GitHub', 21 | url: 'https://github.com/ijayhub', 22 | }, 23 | { name: 'LinkedIn', url: 'https://www.linkedin.com/in/ijeoma-igboagu/' }, 24 | { name: 'Twitter', url: 'https://twitter.com/ijaydimples' }, 25 | { name: 'Hashnode', url: 'https://ijaycent.hashnode.dev/' }, 26 | { name: 'Blog', url: '' }, 27 | ], 28 | socials_theme: { 29 | tailwind_bg_color: 'bg-pink-400', 30 | tailwind_text_color: 'text-white', 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/components/tags/tags.module.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | color: red 3 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | 6 | body { 7 | margin: 0; 8 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 9 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 10 | sans-serif; 11 | -webkit-font-smoothing: antialiased; 12 | -moz-osx-font-smoothing: grayscale; 13 | } 14 | 15 | code { 16 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 17 | monospace; 18 | } 19 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import { BrowserRouter } from "react-router-dom"; 7 | 8 | const root = ReactDOM.createRoot(document.getElementById("root")); 9 | root.render( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/home/Documenter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "../../components/layout/Navbar"; 3 | import Sidebar from "../../components/layout/Sidebar"; 4 | import Explainer from "../../components/layout/Explainer"; 5 | 6 | export const Documenter = (props) => { 7 | const { componentDetails } = props; 8 | return ( 9 |
    10 | 11 | 12 |
    13 | 14 | 15 |
    16 |
    17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{js,jsx,ts,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | --------------------------------------------------------------------------------