8 | {label}{" "}
9 |
18 | );
19 | };
20 |
21 | export default ToggleSwitch;
22 |
--------------------------------------------------------------------------------
/src/toggleButton/anon/toggle.js:
--------------------------------------------------------------------------------
1 | // Importing required libraries
2 | import React from 'react'
3 | import 'rsuite/dist/styles/rsuite-default.css';
4 | import { Toggle } from 'rsuite';
5 |
6 | export default function App() {
7 |
8 | // State for the current toggle value
9 | const [currentValue, setCurrentValue] = React.useState(0)
10 |
11 | return (
12 |
10 |
12 |
16 |
17 |
15 | { setCurrentValue(value) }}
18 | />
19 | {currentValue === true ? "Toggle On" : "Toggle Off"}
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/button-groups/ButtonGroups.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Stack } from '@mui/material'
3 | import ShrutiButtonGroups1 from './shruti-lenka/shrutiButtonGroups1'
4 | import ShrutiButtonGroups2 from './shruti-lenka/shrutiButtonGroups2'
5 | import ShrutiButtonGroups3 from './shruti-lenka/shrutiButtonGroups3'
6 |
7 |
8 | const ButtonGroups = () => {
9 | return (
10 | React Suite Toggle Component
16 |
7 |
13 |
17 |
18 | );
19 | }
20 | }
21 |
22 | export default ToggleSwitch;
23 |
--------------------------------------------------------------------------------
/src/buttons/chandan/button002.tsx:
--------------------------------------------------------------------------------
1 | //custom button for react
2 | import React from "react";
3 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
4 | interface Props {
5 | border: string;
6 | color: string;
7 | children?: React.ReactNode;
8 | height: string;
9 | onClick: () => void;
10 | radius: string
11 | width: string;
12 | }
13 | const Button: React.FC
6 | 
7 |
19 | )
20 | }
21 |
22 | export default ShrutiCards1
--------------------------------------------------------------------------------
/Documentation/sweta.md:
--------------------------------------------------------------------------------
1 | ## The value of project documentation
2 |
3 | Faster new employee onboarding. Good project documentation gives new team members access to all the knowledge that has been collected over the course of your projects, both past and ongoing. New team members are able to immediately understand decisions made in the past and to find relevant information without having to ask others on the team over the course of many weeks.
4 |
5 | Better cross-team alignment. Thorough documentation brings clarity and transparency to what everyone is working on. As a result, decisions and discussions don't get scattered over chat and email, less time is spent in meetings, and work is less likely to get duplicated.
6 |
7 | More effective knowledge management. The insights and lessons learned from one project can be transferred to new projects. Capturing and sharing this knowledge can help you develop new best practices, prevent repeated mistakes, and continuously improve your team's overall performance.
8 |
9 | But in order to deliver on these goals, your internal documentation needs to be well-written, accurate, and up-to-date. In this guide, we will cover the tools and best practices you can use to improve the quality of your project documentation.
10 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 |
2 | # How to contribute
3 |
4 | You can ⭐️ the repo, if you feel like doing it.
5 |
6 | Fork the repo first, clone it and add your changes, push that to your forked repo and raise a PR.
7 | You can check out [Getting-Started.md](https://github.com/iamsmruti/the-best-gathering/blob/main/Getting-Started.md) for instructions on how to setup.
8 |
9 |
10 | - Look in the package.json , if you are having the dependency installed already, if not install your dependency.
11 |
12 | - Then look for the folder names matching your component type.
13 |
14 | For example, you want to add a button, then search for Buttons folder and then inside that create a folder with the naming convention as 'your-name'. Inside this folder create your component files and give a name that doesnt clash with other files.
15 | Put your styling files inside this folder along with your component file.
16 |
17 | - After you are done with your component, you can add that to the main file of that component i.e in the Buttons.js file. and similarly this works for other components as well.
18 |
19 | - If the component you want to add doesnt have a parent folder, then feel free to create yourself while maintaining the structure. After creating a parent folder for the new component, you need to add a route in the App.js and also in the navbar in core-components/Navbar
20 |
21 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import { BrowserRouter as Router, Route, Routes, Switch } from 'react-router-dom';
2 | import Buttons from './buttons/Buttons';
3 | import Cards from './cards/Cards';
4 | import Layout from './core-components/Layout';
5 | import Home from './Home';
6 | import Icons from './icons/Icons';
7 | import Sliders from './slider/Sliders';
8 | import TextFields from './textfields/TextFields';
9 | import ToggleButton from './toggleButton/ToggleButton';
10 | import Alerts from './alerts/Alerts'
11 | import BreadCrumbs from './breadcrumbs/BreadCrumbs'
12 | import ButtonGroups from './button-groups/ButtonGroups'
13 |
14 | const App = () => {
15 | return (
16 |
7 |
8 |
13 | Tailwind CSS
9 | 10 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. 11 |
12 |
14 | #web
15 | #design
16 | #ui
17 |
18 |
7 |
10 |
13 |
16 |
17 |
18 |
19 | )
20 | }
21 |
22 | export default ShrutiButtonGroups1
--------------------------------------------------------------------------------
/src/alerts/shruti-lenka/shrutiAlerts2.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const ShrutiAlerts2 = () => {
4 | return (
5 |
6 |
7 |
25 |
26 | )
27 | }
28 |
29 | export default ShrutiAlerts2
--------------------------------------------------------------------------------
/src/buttons/shruti-lenka/shrutiButton10.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const ShrutiButton10 = () => {
4 | return (
5 |
6 |
13 | )
14 | }
15 |
16 | export default ShrutiButton10
--------------------------------------------------------------------------------
/src/buttons/Buttons.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Stack } from '@mui/material'
3 | import SmrutiButton from './smruti-ranjan/SmrutiButton'
4 | import SaiButton from './sai-kiran/SaiButton'
5 | import Custombtn from './gyana-ranjan/Custombtn'
6 | import VButton from './sai-vaishnav/VButton'
7 | import ShrutiButton1 from './shruti-lenka/shrutiButton1'
8 | import ShrutiButton2 from './shruti-lenka/shrutiButton2'
9 | import ShrutiButton3 from './shruti-lenka/shrutiButton3'
10 | import ShrutiButton4 from './shruti-lenka/shrutiButton4'
11 | import ShrutiButton5 from './shruti-lenka/shrutiButton5'
12 | import ShrutiButton6 from './shruti-lenka/shrutiButton6'
13 | import ShrutiButton7 from './shruti-lenka/shrutiButton7'
14 | import ShrutiButton8 from './shruti-lenka/shrutiButton8'
15 | import ShrutiButton9 from './shruti-lenka/shrutiButton9'
16 | import ShrutiButton10 from './shruti-lenka/shrutiButton10'
17 |
18 |
19 | const Buttons = () => {
20 | return (
21 |
8 | Info alert! Change a few things up and try submitting again.
9 |
10 |
11 | Danger alert! Change a few things up and try submitting again.
12 |
13 |
14 | Success alert! Change a few things up and try submitting again.
15 |
16 |
17 | Warning alert! Change a few things up and try submitting again.
18 |
19 |
20 | Dark alert! Change a few things up and try submitting again.
21 |
22 |
23 |
24 |
6 |
7 |
34 |
35 | )
36 | }
37 |
38 | export default ShrutiAlerts3
39 |
--------------------------------------------------------------------------------
/src/cards/sai-kiran/card.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { styled } from '@mui/material/styles';
3 | import Card from '@mui/material/Card';
4 | import CardHeader from '@mui/material/CardHeader';
5 | import CardMedia from '@mui/material/CardMedia';
6 | import CardContent from '@mui/material/CardContent';
7 | import CardActions from '@mui/material/CardActions';
8 | import Collapse from '@mui/material/Collapse';
9 | import Avatar from '@mui/material/Avatar';
10 | import IconButton from '@mui/material/IconButton';
11 | import Typography from '@mui/material/Typography';
12 | import { blue, red } from '@mui/material/colors';
13 | import FavoriteIcon from '@mui/icons-material/Favorite';
14 | import ShareIcon from '@mui/icons-material/Share';
15 | import MoreVertIcon from '@mui/icons-material/MoreVert';
16 |
17 | export default function RecipeReviewCard() {
18 | return (
19 |
8 |
9 | Info
10 |
19 |
11 | Ensure that these requirements are met:
12 |
18 | -
13 |
- At least 10 characters (and up to 100 characters) 14 |
- At least one lowercase character 15 |
- Inclusion of at least one special character, e.g., ! @ # ? 16 |
20 |
21 | Danger
22 |
31 |
32 |
33 |
23 | Ensure that these requirements are met:
24 |
30 | -
25 |
- At least 10 characters (and up to 100 characters) 26 |
- At least one lowercase character 27 |
- Inclusion of at least one special character, e.g., ! @ # ? 28 |
7 |
11 |
15 |
19 |
20 |
21 |
22 |
23 |
24 | )
25 | }
26 |
27 | export default ShrutiButtonGroups3
--------------------------------------------------------------------------------
/src/alerts/shruti-lenka/shrutiAlerts1.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const ShrutiAlerts1 = () => {
4 | return (
5 |
6 |
42 |
43 | )
44 | }
45 |
46 | export default ShrutiAlerts1
--------------------------------------------------------------------------------
/src/icons/MaterialUI.js:
--------------------------------------------------------------------------------
1 | import { Box } from '@mui/material'
2 | import { Stack } from '@mui/system'
3 | import React from 'react'
4 | import HomeIcon from '@mui/icons-material/Home';
5 | import ShowerIcon from '@mui/icons-material/Shower';
6 | import AbcIcon from '@mui/icons-material/Abc';
7 | import AgricultureIcon from '@mui/icons-material/Agriculture';
8 | import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
9 | import AddCircleIcon from '@mui/icons-material/AddCircle';
10 | import AddReactionIcon from '@mui/icons-material/AddReaction';
11 | import AddModeratorIcon from '@mui/icons-material/AddModerator';
12 | import AddBusinessIcon from '@mui/icons-material/AddBusiness';
13 | import AirlineSeatLegroomExtraIcon from '@mui/icons-material/AirlineSeatLegroomExtra';
14 | import AirlineSeatLegroomNormalIcon from '@mui/icons-material/AirlineSeatLegroomNormal';
15 | import BlurLinearIcon from '@mui/icons-material/BlurLinear';
16 | import AdbIcon from '@mui/icons-material/Adb';
17 | import AcUnitIcon from '@mui/icons-material/AcUnit';
18 | import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled';
19 | import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
20 |
21 | const MaterialUI = () => {
22 | return (
23 |
7 |
8 | Info
9 |
13 |
10 | Info alert! Change a few things up and try submitting again.
11 |
12 |
14 |
15 | Info
16 |
20 |
17 | Danger alert! Change a few things up and try submitting again.
18 |
19 |
21 |
22 | Info
23 |
27 |
24 | Success alert! Change a few things up and try submitting again.
25 |
26 |
28 |
29 | Info
30 |
34 |
31 | Warning alert! Change a few things up and try submitting again.
32 |
33 |
35 |
36 | Info
37 |
41 |
38 | Dark alert! Change a few things up and try submitting again.
39 |
40 | 
37 | 
38 | 
39 |
42 |
43 |
44 | -
99 | {menuItems.map((item, index) => (
100 |
6 |
7 |
65 |
66 | )
67 | }
68 |
69 | export default ShrutiAlerts4
--------------------------------------------------------------------------------
/src/alerts/shruti-lenka/shrutiAlerts5.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const ShrutiAlerts5 = () => {
4 | return (
5 |
8 |
9 | Info
10 |
18 |
11 | A simple info alert with an example link. Give it a click if you like.
12 |
13 |
17 |
19 |
20 | Info
21 |
29 |
22 | A simple info alert with an example link. Give it a click if you like.
23 |
24 |
28 |
30 |
31 | Info
32 |
40 |
33 | A simple info alert with an example link. Give it a click if you like.
34 |
35 |
39 |
41 |
42 | Info
43 |
51 |
44 | A simple info alert with an example link. Give it a click if you like.
45 |
46 |
50 |
52 |
53 | Info
54 |
62 |
63 |
64 |
55 | A simple dark alert with an example link. Give it a click if you like.
56 |
57 |
61 |
6 |
7 |
105 |
106 | )
107 | }
108 |
109 | export default ShrutiAlerts5
--------------------------------------------------------------------------------
8 |
26 |
9 |
10 | Info
11 |
13 | This is a info alert
12 |
14 | More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
15 |
16 |
17 |
21 |
24 |
25 |
27 |
45 |
28 |
29 | Info
30 |
32 | This is a danger alert
31 |
33 | More info about this info danger goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
34 |
35 |
36 |
40 |
43 |
44 |
46 |
64 |
47 |
48 | Info
49 |
51 | This is a success alert
50 |
52 | More info about this info success goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
53 |
54 |
55 |
59 |
62 |
63 |
65 |
83 |
66 |
67 | Info
68 |
70 | This is a warning alert
69 |
71 | More info about this info warning goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
72 |
73 |
74 |
78 |
81 |
82 |
84 |
102 |
103 |
104 |
85 |
86 | Info
87 |
89 | This is a dark alert
88 |
90 | More info about this info dark goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
91 |
92 |
93 |
97 |
100 |
101 |