Skip to content

Commit

Permalink
Modified trending side bar design
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaaa760
aaaa760 committed Mar 28, 2024
1 parent 8d579c0 commit 5d1392e
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 69 deletions.
81 changes: 18 additions & 63 deletions src/components/HashtagTool/TrendingSideBar.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import React, { useState } from 'react';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { ReactComponent as SearchSVG } from '../../Icons/SearchIconBlack.svg';

function TrendingSidebar() {
const suggestions = [
'bitcoin',
'meme',
'nostr',
'grownstr',
'bitcoin',
'plebchain',
'siamstr',
'btc',
'meme',
'privacy',
'security',
'memes',
Expand Down Expand Up @@ -50,71 +49,27 @@ function TrendingSidebar() {
'us',
'dance',
];

const [searchQuery, setSearchQuery] = useState('');
const handleSearchChange = event => {
setSearchQuery(event.target.value);
};

const handleSearchSubmit = event => {
event.preventDefault();
if (searchQuery.trim().length > 0) {
navigate(`/search/${searchQuery.trim()}`);
setSearchQuery('');
}
};
const [showAll, setShowAll] = useState(false);
const navigate = useNavigate();
const handleTagClick = tag => {
navigate(`/search/${tag}`);
const handleTagClick = suggestions => {
navigate(`/search/${suggestions}`);
};
const displayedSuggestions = showAll
? suggestions
: suggestions.slice(0, 5);

return (
<aside className="hidden lg:block w-1/4 bg-white p-4 sticky top-0 h-screen overflow-y-auto border-l border-gray-200 z-50 ">
<form
onSubmit={handleSearchSubmit}
className="md:flex items-center w-full px-2 ">
<div className="relative w-full">
<input
type="search"
className="pl-4 pr-8 py-2 w-full border border-gray-200 bg-slate-50 rounded-full focus:outline-none focus:border-grey-400 transition-shadow"
placeholder="Search..."
value={searchQuery}
onChange={handleSearchChange}
/>
<aside className="hidden lg:block w-1/4 bg-white p-2 sticky top-0 h-screen overflow-y-auto border-l border-gray-200 z-40 ">
<h2 className="text-2xl font-bold text-center pt-14 text-gray-900 mb-4 ">
Trending Memes
</h2>

<div className="flex flex-wrap gap-2 p-2 mt-2 overflow-x-auto justify-center">
{suggestions.map((suggestion, index) => (
<button
type="submit"
className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-transparent text-gray-600 hover:text-gray-500 focus:text-gray-500 outline-none">
<SearchSVG className="h-6 w-6" />
key={index}
onClick={() => handleTagClick(suggestion)}
className="bg-gray-200 text-black rounded-full px-4 py-1 text-lg focus:outline-none "
style={{ flex: '0 0 auto' }}>
{suggestion}
</button>
</div>
</form>
<div className="my-4 p-4 bg-customGray rounded-md shadow">
<h2 className="text-2xl font-bold text-gray-900 mb-4">
Trending Memes
</h2>
<nav>
{displayedSuggestions.map((suggestion, index) => (
<div
key={index}
onClick={() => handleTagClick(suggestion)}
className={`flex items-center justify-between py-2 px-3 my-2 transition duration-150 ease-in-out ${
index !== 0 ? 'border-t border-gray-50' : ''
} rounded-lg cursor-pointer hover:shadow-lg`}>
<span className="font-semibold text-black">
#{suggestion}
</span>
</div>
))}
</nav>
<p
onClick={() => setShowAll(!showAll)}
className="mt-4 text-blue-600 hover:text-blue-700 cursor-pointer text-sm transition duration-150 ease-in-out">
{showAll ? 'Show less' : 'Show more'}
</p>
))}
</div>
</aside>
);
Expand Down
49 changes: 43 additions & 6 deletions src/components/Login/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './profile.css';
import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools';
import Menu from '../Menu';
import DropdownComponent from '../LoginDropDownComponent/DropDownComponent';
import { ReactComponent as Memestr } from '../../Icons/MemestrLogo.svg';
import { ReactComponent as SearchSVG } from '../../Icons/SearchIconBlack.svg';

export function generateNewKeys() {
const pk = generatePrivateKey();
Expand All @@ -20,6 +22,20 @@ function HeaderBar({ isSearchVisible }) {
const [prevScrollY, setPrevScrollY] = useState(0);
const scrollThreshold = 100;

const navigate = useNavigate();
const [searchQuery, setSearchQuery] = useState('');
const handleSearchChange = event => {
setSearchQuery(event.target.value);
};

const handleSearchSubmit = event => {
event.preventDefault();
if (searchQuery.trim().length > 0) {
navigate(`/search/${searchQuery.trim()}`);
setSearchQuery('');
}
};

useEffect(() => {
const handleScroll = () => {
const scrollY = window.scrollY;
Expand All @@ -41,27 +57,48 @@ function HeaderBar({ isSearchVisible }) {
};
}, [prevScrollY]);

const headerClasses = `fixed w-full top-0 h-14 bg-white z-50 text-gray-700 border-b border-gray-200 ${
const headerClasses = `fixed w-full top-0 h-14 bg-white z-50 text-gray-700 border-b border-gray-200 ${
!isScrolled || isSearchVisible
? 'transition-transform transform -translate-y-full ease-in-out duration-300'
: ''
}`;

return (
<div className={headerClasses}>
<header className="flex flex-row items-center justify-between h-14 px-3">
<div className="flex basis-1/4 justify-start">
<header
className={
'flex flex-row items-center justify-between h-14 px-3'
}>
<div className="flex basis-1/3 justify-start ">
<Menu />
</div>

<div className="flex basis-1/2 justify-center">
<div className="flex basis-1/3 pl-32 ">
<Memestr />
</div>

<div className="flex basis-1/4 justify-end items-center pr-4 lg:pr-96">
<button className="hidden md:block">
<div className="flex basis-1/3 justify-end items-center">
<button className="hidden md:block pr-8">
<DropdownComponent />
</button>
<form
onSubmit={handleSearchSubmit}
className="hidden md:flex items-center w-80 px-2 ">
<div className="relative w-full">
<input
type="search"
className="pl-4 pr-8 py-2 w-full border border-gray-200 bg-slate-50 rounded-full focus:outline-none focus:border-grey-400 transition-shadow"
placeholder="Search..."
value={searchQuery}
onChange={handleSearchChange}
/>
<button
type="submit"
className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-transparent text-gray-600 hover:text-gray-500 focus:text-gray-500 outline-none">
<SearchSVG className="h-6 w-6" />
</button>
</div>
</form>
</div>
</header>
</div>
Expand Down

0 comments on commit 5d1392e

Please sign in to comment.