mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Updated search components
This commit is contained in:
Rishabh
parent
0a347e112f
commit
093fd604ed
2 changed files with 79 additions and 40 deletions
|
|
@ -566,20 +566,20 @@ video {
|
|||
}
|
||||
|
||||
.-mx-7 {
|
||||
margin-left: -1.75rem;
|
||||
margin-right: -1.75rem;
|
||||
margin-left: -2.8rem;
|
||||
margin-right: -2.8rem;
|
||||
}
|
||||
|
||||
.mr-3 {
|
||||
margin-right: 0.75rem;
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
.ml-3 {
|
||||
margin-left: 0.75rem;
|
||||
margin-left: 1.2rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.mt-0 {
|
||||
|
|
@ -607,7 +607,7 @@ video {
|
|||
}
|
||||
|
||||
.max-w-lg {
|
||||
max-width: 32rem;
|
||||
max-width: 51.2rem;
|
||||
}
|
||||
|
||||
.grow {
|
||||
|
|
@ -629,7 +629,7 @@ video {
|
|||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
|
||||
.border-t {
|
||||
|
|
@ -655,22 +655,22 @@ video {
|
|||
}
|
||||
|
||||
.py-6 {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
padding-top: 2.4rem;
|
||||
padding-bottom: 2.4rem;
|
||||
}
|
||||
|
||||
.px-7 {
|
||||
padding-left: 1.75rem;
|
||||
padding-right: 1.75rem;
|
||||
padding-left: 2.8rem;
|
||||
padding-right: 2.8rem;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.pt-20 {
|
||||
padding-top: 5rem;
|
||||
padding-top: 8rem;
|
||||
}
|
||||
|
||||
.text-\[1\.65rem\] {
|
||||
|
|
@ -678,13 +678,11 @@ video {
|
|||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
|
|
|
|||
|
|
@ -84,22 +84,76 @@ class PopupContent extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
function PostListItem({title, excerpt}) {
|
||||
return (
|
||||
<div className="py-2 -mx-7 px-7 hover:bg-gray-100 cursor-pointer">
|
||||
<h2 className="text-[1.65rem] font-medium leading-tight text-gray-900">{title}</h2>
|
||||
<p className="text-gray-400 leading-normal text-sm mt-0 mb-0 truncate">{excerpt}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PostResults({posts}) {
|
||||
const PostItems = posts.map((d) => {
|
||||
return (
|
||||
<PostListItem
|
||||
key={d.title}
|
||||
title={d.title}
|
||||
excerpt={d.excerpt}
|
||||
/>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div className="border-t border-gray-200 py-6 px-7">
|
||||
<h1 className="uppercase text-xs text-gray-400 font-semibold mb-2">Posts</h1>
|
||||
{PostItems}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SearchResultBox() {
|
||||
const posts = [
|
||||
{
|
||||
title: 'The DNC’s Disastrous Post-Roe Message',
|
||||
excerpt: 'Democrats’ first stab at warning voters about the GOP threat with harpoons and guns and knives and rifles'
|
||||
},
|
||||
{
|
||||
title: 'Roberts Started A Revolution, Dems Enabled It',
|
||||
excerpt: 'New data show the end of pandemic relief coincided with a 49 percent increase in the number of families struggling to survive.'
|
||||
},
|
||||
{
|
||||
title: 'Ending Pandemic Aid Created A Disaster',
|
||||
excerpt: 'On this week’s Lever Time: David goes deep into SCOTUS, including exposing the dark money network that has been bankrolling conservative judicial nominees.'
|
||||
}
|
||||
];
|
||||
|
||||
if (posts?.length) {
|
||||
return (
|
||||
<PostResults posts={posts} />
|
||||
);
|
||||
}
|
||||
return <NoResultsBox />;
|
||||
}
|
||||
|
||||
function NoResultsBox() {
|
||||
return (
|
||||
<div>
|
||||
No results
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Search() {
|
||||
const {searchIndex, indexComplete} = useContext(AppContext);
|
||||
let pageClass = 'search';
|
||||
/* eslint-disable no-console */
|
||||
console.log(searchIndex);
|
||||
if (indexComplete) {
|
||||
const searchValue = searchIndex.search('dada');
|
||||
const searchValue = searchIndex.search('T');
|
||||
console.log(searchValue);
|
||||
}
|
||||
|
||||
let className = 'gh-portal-popup-container';
|
||||
|
||||
const containerClassName = `${className} ${pageClass}`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<>
|
||||
<div className='bg-[rgba(0,0,0,0.2)] h-screen w-screen pt-20'>
|
||||
<div className='bg-white max-w-lg rounded-lg shadow-xl m-auto'>
|
||||
<div className='flex items-center py-6 px-7'>
|
||||
|
|
@ -107,21 +161,8 @@ function Search() {
|
|||
<input className='grow text-[1.65rem] focus-visible:outline-none' placeholder='Search posts, tags, authors..' />
|
||||
<ClearIcon className='ml-3 fill-gray-400' alt='Clear' />
|
||||
</div>
|
||||
<div className="border-t border-gray-200 py-6 px-7">
|
||||
<h1 className="uppercase text-xs text-gray-400 font-semibold mb-2">Posts</h1>
|
||||
<div className="py-2 -mx-7 px-7 hover:bg-gray-100 cursor-pointer">
|
||||
<h2 className="text-[1.65rem] font-medium leading-tight text-gray-900">The DNC’s Disastrous Post-Roe Message</h2>
|
||||
<p className="text-gray-400 leading-normal text-sm mt-0 mb-0 truncate">Democrats’ first stab at warning voters about the GOP threat with harpoons and guns and knives and rifles</p>
|
||||
</div>
|
||||
<div className="py-2 -mx-7 px-7 hover:bg-gray-100 cursor-pointer">
|
||||
<h2 className="text-[1.65rem] font-medium leading-tight text-gray-900">Roberts Started A Revolution, Dems Enabled It</h2>
|
||||
<p className="text-gray-400 leading-normal text-sm mt-0 mb-0 truncate">New data show the end of pandemic relief coincided with a 49 percent increase in the number of families struggling to survive.</p>
|
||||
</div>
|
||||
<div className="py-2 -mx-7 px-7 hover:bg-gray-100 cursor-pointer">
|
||||
<h2 className="text-[1.65rem] font-medium leading-tight text-gray-900">Ending Pandemic Aid Created A Disaster</h2>
|
||||
<p className="text-gray-400 leading-normal text-sm mt-0 mb-0 truncate">On this week’s Lever Time: David goes deep into SCOTUS, including exposing the dark money network that has been bankrolling conservative judicial nominees.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SearchResultBox />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue