Skip to content

Commit ad87b19

Browse files
manvith12manvith12
committed
search algos changed
1 parent 17aaf3b commit ad87b19

File tree

1 file changed

+77
-53
lines changed

1 file changed

+77
-53
lines changed

‎src/features/searchAlgos/components/SearchAlgos.jsx‎

Lines changed: 77 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react';
22
import { motion } from 'framer-motion';
3-
import { FaHome, FaSearch, FaRocket, FaChartLine } from 'react-icons/fa';
3+
import { FaHome,FaCode,FaArrowRight, FaSearch, FaRocket, FaChartLine } from 'react-icons/fa';
44
import { Link } from 'react-router-dom';
55
import BinarySearchVisualizer from './BinarySearchVisualizer';
66
import LinearSearchVisualizer from './LinearSearchVisualizer';
@@ -10,32 +10,36 @@ import '../styles/SearchAlgos.css';
1010
const SearchAlgos = () => {
1111
const [selectedAlgorithm, setSelectedAlgorithm] = useState('overview');
1212

13-
console.log('Current selected algorithm:', selectedAlgorithm);
14-
1513
const algorithms = [
1614
{
1715
id: 'binary',
18-
name: 'Binary Search',
16+
title: 'Binary Search',
1917
description: 'Efficient search for sorted arrays using divide-and-conquer',
2018
complexity: 'O(log n)',
2119
icon: <FaRocket />,
22-
color: '#8b5cf6'
20+
color: '#8b5cf6',
21+
features: ['Divide and conquer', 'Sorted arrays', 'Fast lookup'],
22+
gradient: 'linear-gradient(135deg, #667eea 0%, #8b5cf6 100%)'
2323
},
2424
{
2525
id: 'linear',
26-
name: 'Linear Search',
26+
title: 'Linear Search',
2727
description: 'Simple sequential search through array elements',
2828
complexity: 'O(n)',
2929
icon: <FaSearch />,
30-
color: '#06b6d4'
30+
color: '#06b6d4',
31+
features: ['Sequential scan', 'Works on any array', 'Simple logic'],
32+
gradient: 'linear-gradient(135deg, #06b6d4 0%, #10b981 100%)'
3133
},
3234
{
3335
id: 'jump',
34-
name: 'Jump Search',
36+
title: 'Jump Search',
3537
description: 'Block-based search with √n optimal jump size',
3638
complexity: 'O(√n)',
3739
icon: <FaChartLine />,
38-
color: '#10b981'
40+
color: '#10b981',
41+
features: ['Block jumps', 'Optimized for sorted arrays', 'Hybrid approach'],
42+
gradient: 'linear-gradient(135deg, #10b981 0%, #8b5cf6 100%)'
3943
}
4044
];
4145

@@ -50,64 +54,86 @@ const SearchAlgos = () => {
5054
default:
5155
return (
5256
<motion.div
53-
className="hero-section"
57+
className="linkedlist-home-container"
5458
initial={{ opacity: 0, y: 20 }}
5559
animate={{ opacity: 1, y: 0 }}
5660
transition={{ duration: 0.6 }}
5761
>
58-
<div className="hero-content">
59-
<h2>Choose a Search Algorithm to Visualize</h2>
60-
<p>Explore different search algorithms and understand their performance characteristics through interactive visualizations.</p>
61-
</div>
62-
63-
<div className="algorithm-grid">
62+
<div className="linkedlist-home-bg-overlay"></div>
63+
<motion.header
64+
className="linkedlist-home-header"
65+
initial={{ opacity: 0, y: -20 }}
66+
animate={{ opacity: 1, y: 0 }}
67+
transition={{ duration: 0.8 }}
68+
>
69+
<Link to="/" className="home-button">
70+
<FaHome size={18} />
71+
<span>Home</span>
72+
</Link>
73+
<div className="header-content">
74+
<h1>Search Algorithms Visualizer</h1>
75+
<p>Interactive visualizations for different search algorithms</p>
76+
</div>
77+
</motion.header>
78+
<motion.div
79+
className="linkedlist-cards-grid"
80+
initial="hidden"
81+
animate="visible"
82+
>
6483
{algorithms.map((algo, index) => (
6584
<motion.div
6685
key={algo.id}
67-
className="algorithm-card"
68-
initial={{ opacity: 0, y: 30 }}
69-
animate={{ opacity: 1, y: 0 }}
70-
transition={{ delay: index * 0.1, duration: 0.5 }}
71-
whileHover={{ y: -5, scale: 1.02 }}
72-
onClick={() => {
73-
console.log('Clicking on algorithm:', algo.id);
74-
setSelectedAlgorithm(algo.id);
75-
}}
76-
style={{ '--accent-color': algo.color }}
86+
className="linkedlist-card"
87+
whileHover={{ y: -8, scale: 1.02 }}
88+
whileTap={{ scale: 0.98 }}
89+
style={{ background: algo.gradient }}
90+
onClick={() => setSelectedAlgorithm(algo.id)}
7791
>
78-
<div className="card-icon" style={{ color: algo.color }}>
79-
{algo.icon}
80-
</div>
81-
<h3>{algo.name}</h3>
82-
<p>{algo.description}</p>
83-
<div className="complexity-badge" style={{ borderColor: algo.color, color: algo.color }}>
84-
{algo.complexity}
92+
<div className="linkedlist-card-link" style={{ height: '100%' }}>
93+
<div className="linkedlist-card-header">
94+
<div className="linkedlist-card-icon" style={{ color: '#f8fafc', textShadow: '0 2px 8px rgba(0,0,0,0.18)' }}>
95+
{React.cloneElement(algo.icon, { color: '#f8fafc', size: 48 })}
96+
</div>
97+
<div className="linkedlist-card-badges">
98+
<span className="difficulty-badge">Search</span>
99+
<span className="complexity-badge">{algo.complexity}</span>
100+
</div>
101+
</div>
102+
<div className="linkedlist-card-body">
103+
<h3 className="linkedlist-card-title">{algo.title}</h3>
104+
<p className="linkedlist-card-description">{algo.description}</p>
105+
<div className="linkedlist-card-features">
106+
{algo.features.map((feature, idx) => (
107+
<span key={idx} className="feature-tag">{feature}</span>
108+
))}
109+
</div>
110+
</div>
111+
<div className="linkedlist-card-footer">
112+
<div className="learn-more-btn">
113+
<FaCode size={14} />
114+
Learn & Visualize
115+
<FaArrowRight size={12} />
116+
</div>
117+
</div>
85118
</div>
86119
</motion.div>
87120
))}
88-
</div>
121+
</motion.div>
122+
<motion.div
123+
className="linkedlist-home-footer"
124+
initial={{ opacity: 0 }}
125+
animate={{ opacity: 1 }}
126+
transition={{ duration: 0.8, delay: 0.6 }}
127+
>
128+
<p>Choose a search algorithm to start your interactive learning journey</p>
129+
</motion.div>
89130
</motion.div>
90131
);
91132
}
92133
};
93134

94135
return (
95-
<div className="search-algos-container">
96-
<div className="search-bg-overlay"></div>
97-
98-
<motion.header
99-
className="search-header"
100-
initial={{ opacity: 0, y: -20 }}
101-
animate={{ opacity: 1, y: 0 }}
102-
transition={{ duration: 0.8 }}
103-
>
104-
<Link to="/" className="home-button">
105-
<FaHome size={18} />
106-
<span>Home</span>
107-
</Link>
108-
<h1>Search Algorithms Visualizer</h1>
109-
</motion.header>
110-
136+
<div>
111137
{selectedAlgorithm !== 'overview' && (
112138
<motion.div
113139
className="algorithm-nav"
@@ -121,7 +147,6 @@ const SearchAlgos = () => {
121147
>
122148
← Back to Overview
123149
</button>
124-
125150
<div className="algorithm-tabs">
126151
{algorithms.map(algo => (
127152
<button
@@ -131,13 +156,12 @@ const SearchAlgos = () => {
131156
style={{ '--accent-color': algo.color }}
132157
>
133158
{algo.icon}
134-
{algo.name}
159+
{algo.title}
135160
</button>
136161
))}
137162
</div>
138163
</motion.div>
139164
)}
140-
141165
<main className="main-content">
142166
{renderAlgorithmView()}
143167
</main>

0 commit comments

Comments
 (0)