Skip to content

Commit

Permalink
Merge pull request #122 from Ayushmaanagarwal1211/main
Browse files Browse the repository at this point in the history 
Added Search Functionality
  • Loading branch information
@AbhiDiva96
AbhiDiva96 authored Jun 14, 2024
2 parents df5abf7 + cbf3107 commit 90109cb
Show file tree
Hide file tree
Showing 7 changed files with 459 additions and 879 deletions.
186 changes: 56 additions & 130 deletions src/components/page4/lecture.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import React, { useState } from 'react';
import Header from '../../pages/header';
import '../page4/lecture.css'
import '../page4/lecture.css';
import cn from '../../assets/computerNetwork.jpg';
import da from '../../assets/dataAnalytics.jpg';
import dbms from '../../assets/dbms.jpg';
Expand All @@ -11,138 +11,64 @@ import oops from '../../assets/oops.jpg';
import wt from '../../assets/wt.jpg';
import se from '../../assets/se.jpg';
import bd from '../../assets/bd.jpg';

function lecture() {
return (
<div>
<Header/>
<div className="lecturetrd">
<h1> Lecture</h1>
</div>

{/* <div className="lecturelink"> */}


<div class="container">

{/* compiler Design */}
<div class="box">
<div className="upper">
<img src={cd} alt="img" />
</div>
<span class='text-box-in'>Compiler Design</span>
<a href="https://www.youtube.com/watch?v=zaZU4zSdQ1U&list=PL_obO5Qb5QTEZrWlX_B19OV5nJViKGnnC">
View Content
</a>
</div>

{/* data analytics */}
<div class="box">
<div className="upper">
<img src={da} alt="img" />
</div>
<span class='text-box-in'>Data analytics</span>
<a href="https://www.youtube.com/watch?v=FyxA8JsKn90&list=PL1uhi2_UdvkDp2KlegPmEjmF70O3WUODA">
View Content
</a>
</div>


{/* daa */}
<div class="box">
<div className="upper">
<img src={daa} alt="img" />
</div>
<span class='text-box-in'>Design Analysis and Algorithm </span>
<a href="https://www.youtube.com/watch?v=twE1eiO7gEE&list=PL-JvKqQx2Atd--1Gs3WB8nmWOWRbEM7WW">
View Content
</a>
</div>

{/* machine learning */}
<div class="box">
<div className="upper">
<img src={mlt} alt="img" />
</div>
<span class='text-box-in'>Machine Learning</span>
<a href="https://www.youtube.com/watch?v=OZkYkWYNTRo&list=PL5vhyNmOQ5ORE-wzDcfhQZiRM7jESvzhD">
View Content
</a>
</div>
import {FaMagnifyingGlass } from 'react-icons/fa6'


{/* dbms */}
<div class="box">
<div className="upper">
<img src={dbms} alt="img" />
</div>
<span class='text-box-in'>DataBase Management system</span>
<a href="https://www.youtube.com/watch?v=Agz0dyRu2uI&list=PL_obO5Qb5QTGDsMsl16VLKAxtaTqJRjER">
View Content
</a>
</div>
function Lecture() {
// State for search query
const [searchQuery, setSearchQuery] = useState('');

{/* computer network */}
<div class="box">
<div className="upper">
<img src={cn} alt="img" />
</div>
<span class='text-box-in'>Computer Network</span>
<a href="https://www.youtube.com/watch?v=04A4PRikkCY&list=PL-JvKqQx2AteLNR8UO4UQiDmQF-Wotu5G">
View Content
</a>
</div>
// Array of lecture items
const lectureItems = [
{ title: 'Compiler Design', image: cd, link: 'https://www.youtube.com/watch?v=zaZU4zSdQ1U&list=PL_obO5Qb5QTEZrWlX_B19OV5nJViKGnnC' },
{ title: 'Data analytics', image: da, link: 'https://www.youtube.com/watch?v=FyxA8JsKn90&list=PL1uhi2_UdvkDp2KlegPmEjmF70O3WUODA' },
{ title: 'Design Analysis and Algorithm', image: daa, link: 'https://www.youtube.com/watch?v=twE1eiO7gEE&list=PL-JvKqQx2Atd--1Gs3WB8nmWOWRbEM7WW' },
{ title: 'Machine Learning', image: mlt, link: 'https://www.youtube.com/watch?v=OZkYkWYNTRo&list=PL5vhyNmOQ5ORE-wzDcfhQZiRM7jESvzhD' },
{ title: 'DataBase Management system', image: dbms, link: 'https://www.youtube.com/watch?v=Agz0dyRu2uI&list=PL_obO5Qb5QTGDsMsl16VLKAxtaTqJRjER' },
{ title: 'Computer Network', image: cn, link: 'https://www.youtube.com/watch?v=04A4PRikkCY&list=PL-JvKqQx2AteLNR8UO4UQiDmQF-Wotu5G' },
{ title: 'OOPs', image: oops, link: 'https://www.youtube.com/watch?v=82ba_at_TkM&list=PLDt-fuLi9lO9cej3TpU6_umkt_KSM8H7b' },
{ title: 'Web Technology', image: wt, link: 'https://www.youtube.com/watch?v=M8i-1oeHaDw&list=PL-JvKqQx2Atf5w_httliQrmqPpL7oLc-W' },
{ title: 'Big Data', image: bd, link: 'https://www.youtube.com/watch?v=I_ku0D4uQzQ&list=PLPIwNooIb9vi4f8tVkzLnr1tll6Pubbqhi' },
{ title: 'Software Engineering', image: se, link: 'https://www.youtube.com/watch?v=imzSpM_5R6k&list=PL-JvKqQx2AtdZ7m5Nui3RwqEnNcZZ9N1L' },
// Add more items here
];

{/* oops */}
<div class="box">
<div className="upper">
<img src={oops} alt="img" />
</div>
<span class='text-box-in'> OOPs</span>
<a href="https://www.youtube.com/watch?v=82ba_at_TkM&list=PLDt-fuLi9lO9cej3TpU6_umkt_KSM8H7b">
View Content
</a>
</div>

{/* web technology */}
<div class="box">
<div className="upper">
<img src={wt} alt="img" />
</div>
<span class='text-box-in'> Web Technology</span>
<a href="https://www.youtube.com/watch?v=M8i-1oeHaDw&list=PL-JvKqQx2Atf5w_httliQrmqPpL7oLc-W">
View Content
</a>
</div>

{/* Big data */}
<div class="box">
<div className="upper">
<img src={bd} alt="img" />
</div>
<span class='text-box-in'>Big Data</span>
<a href="https://www.youtube.com/watch?v=I_ku0D4uQzQ&list=PLPIwNooIb9vi4f8tVkzLnr1tll6Pubbqhi">
View Content
</a>
</div>

{/* software engineering */}

<div class="box">
<div className="upper">
<img src={se} alt="img" />
</div>
<span class='text-box-in'>Software Engineering</span>
<a href="https://www.youtube.com/watch?v=imzSpM_5R6k&list=PL-JvKqQx2AtdZ7m5Nui3RwqEnNcZZ9N1L">
View Content
</a>
</div>
// Filtered lecture items based on search query
const filteredItems = lectureItems.filter(item =>
item.title.toLowerCase().includes(searchQuery.toLowerCase())
);

return (
<div>
<Header />
<div className="lecturetrd">
<h1>Lecture</h1>
</div>
{/* Input field for search */}
<div class='inputDiv'>
<FaMagnifyingGlass className='left'/>

</div>
</div>
// </div>
)
<input
type='text'
className='inputField'
placeholder='Search For Lectures ...'
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
{/* Display filtered lecture items */}
<div className="container">
{filteredItems.map((item, index) => (
<div className="box" key={index}>
<div className="upper">
<img src={item.image} alt={item.title} />
</div>
<span className="text-box-in">{item.title}</span>
<a href={item.link}>View Content</a>
</div>
))}
</div>
</div>
);
}

export default lecture
export default Lecture;
65 changes: 65 additions & 0 deletions src/components/page4/quantum.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,77 @@
align-items: center;

}
.inputField{
outline: none;
border-radius: 15px;
height: 31px;
width: 70%;
max-width: 400px;
display: flex;
justify-content: center;
align-items: center;
padding-left: 40px;
position: relative;
right: 25px;
}
.left{
position: relative ;
z-index: 99;
color: gray;
}
.inputDiv {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 40px;
}
.inputDiv1 {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 5px;
margin-top: 40px;
}
.inputField {
padding-right: 20px; /* Adjust as needed */
}

.searchIcon {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: #555; /* Adjust the color as needed */
pointer-events: none; /* So it doesn't interfere with input */
}

/* Responsive Styles */

input::placeholder{
font-size: medium;
}
.inputDiv{
width: 100%;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.link1{

text-decoration: none;
color: black;

}
@media only screen and (max-width:400px){
.inputDiv{
padding-left: 15px;
}
}
.quantum-head{

border-bottom: 2px solid #9a5959;
Expand Down
Loading

0 comments on commit 90109cb

Please sign in to comment.