From 11e4eb0e3fd9a34d2e19ae59121ee2a5f9870572 Mon Sep 17 00:00:00 2001 From: Sasank123k Date: Tue, 2 Jul 2024 00:09:03 +0530 Subject: [PATCH] fas --- src/App.tsx | 2 + .../ProgressBar/ProgressBar.module.css | 166 +++++++++ src/components/ProgressBar/ProgressBar.tsx | 326 ++++++++++++++++++ src/pages/Components/Components.tsx | 3 +- 4 files changed, 496 insertions(+), 1 deletion(-) create mode 100644 src/components/ProgressBar/ProgressBar.module.css create mode 100644 src/components/ProgressBar/ProgressBar.tsx diff --git a/src/App.tsx b/src/App.tsx index 5c5dbea..4295e47 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -43,6 +43,7 @@ import LoginForm from './components/LoginForm/LoginForm'; import LoginForm1 from './components/LoginForm/LoginForm1'; import LoginForm2 from './components/LoginForm/LoginForm2'; import LoginForm3 from './components/LoginForm/LoginForm3'; +import ProgressBar from './components/ProgressBar/ProgressBar'; import Template1 from './pages/Examples/Template1/Template1'; import { AuthProvider } from './context/AuthContext'; @@ -89,6 +90,7 @@ const App: React.FC = () => { } /> } /> } /> + } />
diff --git a/src/components/ProgressBar/ProgressBar.module.css b/src/components/ProgressBar/ProgressBar.module.css new file mode 100644 index 0000000..9adfaaf --- /dev/null +++ b/src/components/ProgressBar/ProgressBar.module.css @@ -0,0 +1,166 @@ +.progressContainer { + display: flex; + justify-content: center; + margin: 20px 0; + } + + .progressBar { + display: flex; + justify-content: space-between; + width: 80%; + border: 1px solid #e0e0e0; + border-radius: 10px; + padding: 10px; + background-color: #f9f9f9; + } + + .stepContainer { + display: flex; + flex-direction: column; + align-items: center; + width: 33%; + } + + .step { + font-size: 14px; + padding: 10px 15px; + border: 2px solid #e0e0e0; + border-radius: 5px; + background-color: #f9f9f9; + margin-bottom: 5px; + transition: all 0.3s ease-in-out; + } + + .step.active { + border-color: #3b82f6; + color: white; + background-color: #3b82f6; + } + + .description { + font-size: 12px; + color: #555; + } + + .newProgressContainer { + display: flex; + justify-content: center; + margin: 20px 0; + } + + .newProgressBar { + display: flex; + justify-content: space-between; + width: 80%; + border: 1px solid #e0e0e0; + border-radius: 10px; + padding: 10px; + background-color: #f9f9f9; + } + + .newStep { + width: 30px; + height: 30px; + border: 2px solid #e0e0e0; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background-color: #f9f9f9; + transition: all 0.3s ease-in-out; + } + + .newStep.active { + border-color: #3b82f6; + color: white; + background-color: #3b82f6; + } + + .thirdProgressContainer { + display: flex; + flex-direction: column; + align-items: center; + margin: 20px 0; + } + + .thirdProgressBar { + width: 80%; + height: 5px; + background-color: #e0e0e0; + border-radius: 5px; + margin-bottom: 10px; + position: relative; + } + + .thirdProgress { + height: 100%; + background-color: #3b82f6; + width: 0; + border-radius: 5px; + position: absolute; + transition: width 1s ease-in-out; + } + + .thirdSteps { + display: flex; + justify-content: space-between; + width: 80%; + } + + .thirdStep { + font-size: 12px; + color: #555; + } + + .codeBox { + margin-top: 20px; + padding: 10px; + border: 1px solid #ddd; + border-radius: 5px; + background-color: #2d2d2d; + color: #fff; + max-height: 300px; + overflow-y: scroll; + position: relative; /* Add this line */ + } + + .toggleButtons { + display: flex; + justify-content: center; + gap: 10px; + margin-bottom: 10px; + } + + .toggleButton { + padding: 5px 10px; + cursor: pointer; + border: 1px solid #ddd; + background-color: #444; + color: #fff; + border-radius: 3px; + } + + .toggleButton.active { + background-color: #3b82f6; + border-color: #3b82f6; + } + + .copyButton { + padding: 5px 10px; + cursor: pointer; + border: 1px solid #ddd; + background-color: #444; + color: #fff; + border-radius: 3px; + position: absolute; /* Add this line */ + top: 10px; /* Add this line */ + right: 10px; + } + + .heading { + margin-top: 40px; + text-align: center; + font-size: 24px; + color: #333; + } + \ No newline at end of file diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx new file mode 100644 index 0000000..a7fb0b6 --- /dev/null +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -0,0 +1,326 @@ +import React, { useState, useEffect } from 'react'; +import styles from './ProgressBar.module.css'; + +const ProgressBar: React.FC = () => { + const [activeStep, setActiveStep] = useState(1); + const [codeType, setCodeType] = useState('tsx'); + + const tsxCode = `import React, { useState } from 'react'; +import styles from './ProgressBar.module.css'; + +const ProgressBar: React.FC = () => { + const [activeStep, setActiveStep] = useState(1); + + return ( +
+
+
+
= 1 ? styles.active : ''}\`}>Step 1
+
Job details
+
+
+
= 2 ? styles.active : ''}\`}>Step 2
+
Application form
+
+
+
= 3 ? styles.active : ''}\`}>Step 3
+
Preview
+
+
+
+ ); +}; + +export default ProgressBar;`; + + const cssCode = `.progressContainer { + display: flex; + justify-content: center; + margin: 20px 0; +} + +.progressBar { + display: flex; + justify-content: space-between; + width: 80%; + border: 1px solid #e0e0e0; + border-radius: 10px; + padding: 10px; + background-color: #f9f9f9; +} + +.stepContainer { + display: flex; + flex-direction: column; + align-items: center; + width: 33%; +} + +.step { + font-size: 14px; + padding: 10px 15px; + border: 2px solid #e0e0e0; + border-radius: 5px; + background-color: #f9f9f9; + margin-bottom: 5px; + transition: all 0.3s ease-in-out; +} + +.step.active { + border-color: #3b82f6; + color: white; + background-color: #3b82f6; +} + +.description { + font-size: 12px; + color: #555; +}`; + + const newProgressBarTSXCode = `import React, { useState } from 'react'; +import styles from './ProgressBar.module.css'; + +const NewProgressBar: React.FC = () => { + const [activeStep, setActiveStep] = useState(1); + + return ( +
+
+ {[...Array(5)].map((_, index) => ( +
index ? styles.active : ''}\`} + onClick={() => setActiveStep(index + 1)} + > + {activeStep > index ? '✓' : index + 1} +
+ ))} +
+
+ ); +}; + +export default NewProgressBar;`; + + const newProgressBarCSSCode = `.newProgressContainer { + display: flex; + justify-content: center; + margin: 20px 0; +} + +.newProgressBar { + display: flex; + justify-content: space-between; + width: 80%; + border: 1px solid #e0e0e0; + border-radius: 10px; + padding: 10px; + background-color: #f9f9f9; +} + +.newStep { + width: 30px; + height: 30px; + border: 2px solid #e0e0e0; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background-color: #f9f9f9; + transition: all 0.3s ease-in-out; +} + +.newStep.active { + border-color: #3b82f6; + color: white; + background-color: #3b82f6; +}`; + + const thirdProgressBarTSXCode = `import React, { useState, useEffect } from 'react'; +import styles from './ProgressBar.module.css'; + +const ThirdProgressBar: React.FC = () => { + const [activeStep, setActiveStep] = useState(1); + + useEffect(() => { + const interval = setInterval(() => { + setActiveStep((prevStep) => Math.min(prevStep + 1, 4)); + }, 1000); + + return () => clearInterval(interval); + }, []); + + return ( +
+
+
+
+
+
Copying files
+
Migrating database
+
Compiling assets
+
Deployed
+
+
+ ); +}; + +export default ThirdProgressBar;`; + + const thirdProgressBarCSSCode = `.thirdProgressContainer { + display: flex; + flex-direction: column; + align-items: center; + margin: 20px 0; +} + +.thirdProgressBar { + width: 80%; + height: 5px; + background-color: #e0e0e0; + border-radius: 5px; + margin-bottom: 10px; + position: relative; +} + +.thirdProgress { + height: 100%; + background-color: #3b82f6; + width: 0; + border-radius: 5px; + position: absolute; + transition: width 1s ease-in-out; +} + +.thirdSteps { + display: flex; + justify-content: space-between; + width: 80%; +} + +.thirdStep { + font-size: 12px; + color: #555; +}`; + + const handleCopyCode = (code: string) => { + navigator.clipboard.writeText(code).then(() => { + alert('Code copied to clipboard!'); + }); + }; + + return ( +
+

Progress Bar 1

+
+
+
= 1 ? styles.active : ''}`}> +
= 1 ? styles.active : ''}`}>Step 1
+
Job details
+
+
= 2 ? styles.active : ''}`}> +
= 2 ? styles.active : ''}`}>Step 2
+
Application form
+
+
= 3 ? styles.active : ''}`}> +
= 3 ? styles.active : ''}`}>Step 3
+
Preview
+
+
+
+
+
+ + +
+ + 
{codeType === 'tsx' ? tsxCode : cssCode}
+
+ +

Progress Bar 2

+
+
+ {[...Array(5)].map((_, index) => ( +
index ? styles.active : ''}`} + onClick={() => setActiveStep(index + 1)} + > + {activeStep > index ? '✓' : index + 1} +
+ ))} +
+
+
+
+ + +
+ + 
{codeType === 'tsx' ? newProgressBarTSXCode : newProgressBarCSSCode}
+
+ +

Progress Bar 3

+
+
+
+
+
+
Copying files
+
Migrating database
+
Compiling assets
+
Deployed
+
+
+
+
+ + +
+ + 
{codeType === 'tsx' ? thirdProgressBarTSXCode : thirdProgressBarCSSCode}
+
+
+ ); +}; + +export default ProgressBar; diff --git a/src/pages/Components/Components.tsx b/src/pages/Components/Components.tsx index 737d2c4..74080a6 100644 --- a/src/pages/Components/Components.tsx +++ b/src/pages/Components/Components.tsx @@ -51,7 +51,7 @@ import Alert from '../../components/Alert/Alert'; import Badge from '../../components/Badge/Badge';*/ // import Breadcrumb from '../../components/Breadcrumb/Breadcrumb'; // import Pagination from '../../components/Pagination/Pagination'; -// import ProgressBar from '../../components/ProgressBar/ProgressBar'; + import ProgressBar from '../../components/ProgressBar/ProgressBar'; // import Spinner from '../../components/Spinner/Spinner'; // import Table from '../../components/Table/Table'; // import List from '../../components/List/List'; @@ -126,6 +126,7 @@ const Components: React.FC = () => { const uiElements = [ { name: 'Button', category: 'Button', count: 8, component: Button }, { name: 'Card Section', category: 'Card Section', count: 12, component: CardSection }, + { name: 'Progress Bar', category: 'Progress Bar', count: 12, component: ProgressBar }, /*{ name: 'Modal', category: 'Modal', count: 5, component: Modal }, { name: 'Tab', category: 'Tab', count: 4, component: Tab }, { name: 'Accordion', category: 'Accordion', count: 6, component: Accordion },