f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-11-04 22:38:43 +00:00
Code Wiki Activity

adding theme ui

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-10-07 10:50:32 +02:00
parent 84295ac833
commit e4043736a4
1 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/listPage.jsx
+32 -22
View File
@@ -113,12 +113,12 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
const renderSortOption = (sortTitle, sortValue)=>{ const renderSortOption = (sortTitle, sortValue)=>{
return ( return (
<div className={`sort-option ${sortType == sortValue ? 'active' : ''}`}> <label className={`option ${sortType == sortValue ? 'active' : ''}`}>
<button value={`${sortValue}`} onClick={sortType == sortValue ? handleSortDirChange : handleSortOptionChange}> <button value={`${sortValue}`} onClick={sortType == sortValue ? handleSortDirChange : handleSortOptionChange}>
{`${sortTitle}`} {`${sortTitle}`}
</button> </button>
{sortType == sortValue && <i className={`sortDir fas ${sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i>} {sortType == sortValue && <i className={`sortDir fas ${sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i>}
</div> </label>
); );
}; };
@@ -201,7 +201,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
const renderSortOptions = ()=>{ const renderSortOptions = ()=>{
return ( return (
<div className='sort-container'> <div className='radio-toggle sort-container'>
<h6>Sort by :</h6> <h6>Sort by :</h6>
{renderSortOption('Title', 'alpha')} {renderSortOption('Title', 'alpha')}
{renderSortOption('Created Date', 'created')} {renderSortOption('Created Date', 'created')}
@@ -289,29 +289,38 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
const renderLayoutModeOptions = ()=>{ const renderLayoutModeOptions = ()=>{
return ( return (
<div className='layout-container'> <div className='radio-toggle layout-container'>
View: <h6>View:</h6>
<div className='layout-option' title='grid'> <label className='option' title='grid'>
<label>
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} /> <input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} />
<i className='fac compressed-grid'></i> <i className='fac compressed-grid'></i>
</label> </label>
</div> <label className='option' title='list'>
<div className='layout-option' title='list'> <input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} />
<label> <i className='fas fa-bars'></i>
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} /> </label>
<i className='fas fa-bars'></i> <label className='option' title='card'>
</label> <input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'card')} checked={layoutMode === 'card'} />
</div> <i className='fac format-card'></i>
<div className='layout-option' title='card'> </label>
<label> </div>
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'card')} checked={layoutMode === 'card'} />
<i className='fac format-card'></i>
</label>
</div>
</div>
); );
}; };
const renderThemePicker = ()=>{
return (
<div className="radio-toggle theme-container">
<h6>Theme:</h6>
<label className="option">
<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'light')}/>
<i className="fas fa-sun"/>
</label>
<label className="option">
<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'light')}/>
<i className="fas fa-moon"/>
</label>
</div>
)
};
const renderNav = () =>{ const renderNav = () =>{
@@ -321,6 +330,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
{renderFilterOption()} {renderFilterOption()}
{renderTagsOptions()} {renderTagsOptions()}
{renderLayoutModeOptions()} {renderLayoutModeOptions()}
{renderThemePicker()}
</div> </div>
); );