Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hover effect of AboutUSPage and conflict resolved again finally #315

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Hover effect of AboutUSPage and conflict resolved again finally #315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
511f80e
Hover effect of AboutUSPage and conflict resolved again finally
sakshi-nimje Oct 22, 2024
264ec54
Hover effect of AboutUSPage and conflict resolved again finally......
sakshi-nimje Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 15 additions & 28 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import React from 'react';

import {
BrowserRouter as Router,
Route,
Routes,
useLocation,
} from 'react-router-dom';

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import ScrollProgressBar from './components/ScrollProgress'; // Import your ScrollProgressBar component
import ScrollProgressBar from './components/ScrollProgress'; // Ensure this import path is correct
import PricingDetailPage from './components/PricingDetailPage';

import GlassyUILandingPage from './components/GlassyUILandingPage';
import GlassyUIComponentsPage from './components/GlassyUIComponentsPage';
import ButtonDetailsPage from './components/ButtonDetailsPage';
Expand Down Expand Up @@ -39,14 +36,13 @@ import ContactUsDetailsPage from './components/ContactUsDetailsPage';
import PaginationDetails from './components/PaginationDetails';
import TestimonialDetails from './components/TestimonialDetails';
import Footer from './components/Footer';
import ProductCardDetailsPage from './components/ProductCardDetailsPage';
import Statistic from './components/StatisticDetails';
import GalleryDetailsPage from './components/GalleryDetailsPage';
import Checkbox from './components/Checkbox';

import SpinnerDetailsPage from './components/SpinnerDetailsPage';
import Statistic from './components/StatisticDetails';
import GalleryDetailsPage from './components/GalleryDetailsPage';
import Checkbox from './components/Checkbox';
import ProductCardDetailsPage from './components/ProductCardDetailsPage';
import SpinnerDetailsPage from './components/SpinnerDetailsPage';

const App: React.FC = () => {
const App: React.FC = () => {
return (
<Router>
<Header />
Expand Down Expand Up @@ -76,35 +72,26 @@ import Footer from './components/Footer';
<Route path='/authentication-card' element={<AuthenticationCard />} />
<Route path='/accordion-details' element={<AccordionDetails />} />
<Route path='/contributors' element={<ContributorsPage />} />

<Route path='/donate' element={<DonationPage />} />
<Route path='/about' element={<AboutUsPage />} />
<Route path='/contact-details' element={<ContactUsDetailsPage />} />
<Route path='/pagination-details' element={<PaginationDetails />} />
<Route path='/testimonial-details' element={<TestimonialDetails />} />
<Route path='/product-details' element={<ProductCardDetailsPage />} />
<Route path='/gallery-details' element={<GalleryDetailsPage />} />


<Route path='/statistic-details' element={<Statistic />} />
<Route path='/gallery-details' element={<GalleryDetailsPage />} />


<Route path='/checkbox' element={<Checkbox />} />

<Route path='/spinner' element={<SpinnerDetailsPage />} />

<Route path='*' element={<NotFoundPage />} />
<Route path='/gallery-details' element={<GalleryDetailsPage />} />
<Route path='/statistic-details' element={<Statistic />} />
<Route path='/checkbox' element={<Checkbox />} />
<Route path='/product-details' element={<ProductCardDetailsPage />} />
<Route path='/spinner' element={<SpinnerDetailsPage />} />
<Route path='*' element={<NotFoundPage />} />
</Routes>

<ConditionalFooter />

</Router>
);
};

const ConditionalFooter: React.FC = () => {
const location = useLocation();

return location.pathname === '/' ? <Footer /> : null;
};

export default App;
7 changes: 5 additions & 2 deletions src/components/AboutUsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,8 @@ const AboutUsHeader = styled.div`
}

h1:hover {
transform: scale(1.1); // Scale up the heading on hover
transform: scale(1.2) rotate(0deg); // Scale and rotate for dynamic effect
text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5); // Stronger glow
}

p {
Expand Down Expand Up @@ -111,7 +112,9 @@ const AboutUsContent = styled.section`
}

h2:hover {
color: #2980b9; // Change color on hover
color: #ffffff; // Slightly darker blue on hover
transform: translateX(5px); // Slide right slightly
text-shadow: 1px 1px 5px rgba(52, 152, 219, 0.8); // Glow effect
}

p {
Expand Down
6 changes: 3 additions & 3 deletions src/components/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
// Checkbox.tsx
import React, { useState } from 'react';

import CheckboxDetails from './CheckboxDetails';

const Checkbox: React.FC = () => {
const [isChecked, setIsChecked] = useState(false);
const [isChecked, setIsChecked] = useState<boolean>(false);

return (
<div>
<CheckboxDetails
checked={isChecked}
onChange={checked => setIsChecked(checked)}
onChange={(checked: boolean) => setIsChecked(checked)}
label='I agree to the terms'
size='medium'
borderColor='#4A90E2'
Expand Down
209 changes: 22 additions & 187 deletions src/components/CheckboxDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,200 +1,35 @@
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { ArrowLeft, Copy, Check } from 'lucide-react';
import BackToTopButton from './BackToTop';
// CheckboxDetails.tsx
import React from 'react';

// Custom Checkbox component
const Checkbox = ({
// Define the prop types for CheckboxDetails
interface CheckboxDetailsProps {
checked: boolean;
onChange: (checked: boolean) => void;
label: string;
size?: string;
borderColor?: string;
backgroundColor?: string;
checkColor?: string;
}

const CheckboxDetails: React.FC<CheckboxDetailsProps> = ({
checked,
onChange,
label,
}: {
checked: boolean;
onChange: () => void;
label: string;
size = 'medium',
borderColor = '#4A90E2',
backgroundColor = '#E5F1FB',
checkColor = '#007bff',
}) => (
<label className='inline-flex items-center'>
<input
type='checkbox'
checked={checked}
onChange={onChange}
className='form-checkbox h-5 w-5 text-blue-600 rounded'
onChange={e => onChange(e.target.checked)}
className={`form-checkbox ${size} border-${borderColor} bg-${backgroundColor} text-${checkColor} rounded`}
/>
<span className='ml-2 text-white'>{label}</span>
<span className='ml-2'>{label}</span>
</label>
);

const CheckboxDetailsPage: React.FC = () => {
const navigate = useNavigate();
const [copiedStates, setCopiedStates] = useState<{ [key: string]: boolean }>(
{},
);
const [isChecked, setIsChecked] = useState<any>(false);

const getGlassyClasses = (opacity = 20) => {
return `backdrop-filter backdrop-blur-lg bg-white bg-opacity-${opacity}
border border-white border-opacity-20 rounded-lg shadow-lg transition-all duration-300`;
};

const copyToClipboard = (text: string, key: string) => {
navigator.clipboard.writeText(text).then(() => {
setCopiedStates(prev => ({ ...prev, [key]: true }));
setTimeout(
() => setCopiedStates(prev => ({ ...prev, [key]: false })),
2000,
);
});
};

const CopyButton: React.FC<{ text: string; codeKey: string }> = ({
text,
codeKey,
}) => (
<button
onClick={() => copyToClipboard(text, codeKey)}
className={`absolute top-2 right-2 ${getGlassyClasses()} p-2 hover:bg-white/40 transition-all duration-300 z-10`}
title='Copy to clipboard'
>
{copiedStates[codeKey] ? (
<Check size={16} className='text-white' />
) : (
<Copy size={16} className='text-white' />
)}
</button>
);

const basicUsageCode = `function ExampleCheckbox() {
const [isChecked, setIsChecked] = useState(false);

return (
<Checkbox
checked={isChecked}
onChange={() => setIsChecked(!isChecked)}
label="Accept Terms"
/>
);
}`;

const customizableCheckboxCode = `<Checkbox
checked={isChecked}
onChange={() => setIsChecked(!isChecked)}
label="Custom Styled Checkbox"
className={getGlassyClasses()}
/>`;

const propsTable = (
<table className='w-full'>
<thead>
<tr className='bg-white bg-opacity-20'>
<th className='text-left p-2 text-white'>Prop</th>
<th className='text-left p-2 text-white'>Type</th>
<th className='text-left p-2 text-white'>Default</th>
<th className='text-left p-2 text-white'>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td className='p-2 text-white'>checked</td>
<td className='p-2 text-white'>boolean</td>
<td className='p-2 text-white'>false</td>
<td className='p-2 text-white'>
Determines if the checkbox is checked
</td>
</tr>
<tr className='bg-white bg-opacity-10'>
<td className='p-2 text-white'>onChange</td>
<td className='p-2 text-white'>function</td>
<td className='p-2 text-white'>-</td>
<td className='p-2 text-white'>
Callback when checkbox state changes
</td>
</tr>
<tr>
<td className='p-2 text-white'>label</td>
<td className='p-2 text-white'>string</td>
<td className='p-2 text-white'>""</td>
<td className='p-2 text-white'>Text label next to the checkbox</td>
</tr>
</tbody>
</table>
);

return (
<div className='min-h-screen p-8 font-sans bg-gradient-to-r from-gray-800 via-gray-900 to-black text-white relative'>
<BackToTopButton />
<div className='relative z-10'>
<button
onClick={() => navigate(-1)}
className={`mb-8 flex items-center ${getGlassyClasses(10)} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-white`}
>
<ArrowLeft size={20} className='mr-2' />
Back to Components
</button>

<h1 className='text-6xl font-bold mb-8 text-white'>Checkbox</h1>
<p className='text-xl mb-8 text-white'>
A customizable, glassmorphism-styled checkbox component.
</p>

{/* Basic Usage */}
<div className={`${getGlassyClasses()} p-6 mb-14 relative`}>
<h2 className='text-3xl font-bold mb-6 text-white'>Basic Usage</h2>
<div className='relative'>
<pre className='bg-gray-800 text-white p-6 rounded-lg overflow-x-auto whitespace-pre-wrap max-sm:text-[0.55rem]'>
{basicUsageCode}
</pre>
<CopyButton text={basicUsageCode} codeKey='basicUsage' />
</div>
</div>

{/* Props */}
<div className={`${getGlassyClasses()} p-6 mb-14`}>
<h2 className='text-3xl font-bold mb-6 text-white'>Props</h2>
<div className='overflow-x-auto'>{propsTable}</div>
</div>

{/* Customizable Checkbox */}
<div className={`${getGlassyClasses()} p-6 mb-14`}>
<h2 className='text-3xl font-bold mb-6 text-white'>
Customizable Checkbox
</h2>
<p className='mb-6 text-lg text-white'>
A customizable checkbox that allows you to adjust its background,
border, and text colors.
</p>
<div className='relative mt-8'>
<Checkbox
checked={isChecked}
onChange={() => setIsChecked(!isChecked)}
label='Custom Styled Checkbox'
/>
<pre className='bg-gray-800 text-white p-6 rounded-lg mt-4 overflow-x-auto whitespace-pre-wrap max-sm:text-[0.55rem]'>
{customizableCheckboxCode}
</pre>
<CopyButton
text={customizableCheckboxCode}
codeKey='customizableCheckbox'
/>
</div>
</div>

{/* Disabled Checkbox */}
<div className={`${getGlassyClasses()} p-6 mb-14`}>
<h2 className='text-3xl font-bold mb-6 text-white'>
Disabled Checkbox
</h2>
<p className='mb-6 text-lg text-white'>
A checkbox that is disabled and cannot be clicked.
</p>
<Checkbox
checked={false}
onChange={() => {}}
label='Disabled Checkbox'
/>
</div>
</div>
</div>
);
};

export default CheckboxDetailsPage;
export default CheckboxDetails;
Loading