mirror of
https://github.com/aljazceru/landscape-template.git
synced 2025-12-30 20:44:21 +01:00
refactor: page-container class structure
This commit is contained in:
MTG2000
@@ -39,113 +39,114 @@ export default function NavDesktop() {
|
||||
|
||||
return (
|
||||
<nav className="bg-white py-16 flex items-center w-full min-w-full">
|
||||
<div className="content-container flex items-center">
|
||||
<Link to="/">
|
||||
<h2 className="text-h5 font-bold mr-40 lg:mr-64">
|
||||
<img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
|
||||
</h2>
|
||||
</Link>
|
||||
<ul className="flex gap-32 xl:gap-64">
|
||||
<li className="relative">
|
||||
<Link to={'/projects'} className='text-body4 font-bold hover:text-primary-600'>
|
||||
Projects
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Menu
|
||||
offsetY={28}
|
||||
menuButton={
|
||||
<MenuButton
|
||||
className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" />
|
||||
</MenuButton>
|
||||
}
|
||||
menuClassName='!rounded-12 !p-8 !border-gray-200'
|
||||
menuStyle={{ border: '1px solid' }}
|
||||
>
|
||||
<MenuItem
|
||||
href="/blog"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/blog");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 '
|
||||
<div className="content-container">
|
||||
<div className="flex items-center">
|
||||
<Link to="/">
|
||||
<h2 className="text-h5 font-bold mr-40 lg:mr-64">
|
||||
<img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
|
||||
</h2>
|
||||
</Link>
|
||||
<ul className="flex gap-32 xl:gap-64">
|
||||
<li className="relative">
|
||||
<Link to={'/projects'} className='text-body4 font-bold hover:text-primary-600'>
|
||||
Projects
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Menu
|
||||
offsetY={28}
|
||||
menuButton={
|
||||
<MenuButton
|
||||
className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" />
|
||||
</MenuButton>
|
||||
}
|
||||
menuClassName='!rounded-12 !p-8 !border-gray-200'
|
||||
menuStyle={{ border: '1px solid' }}
|
||||
>
|
||||
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
|
||||
{/* <FiFeather className={`text-body1 inline-block text-primary-600 `} /> */}
|
||||
<span className="text-body2">✍🏼</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-body4 text-black font-medium">
|
||||
Stories
|
||||
</p>
|
||||
<p className="text-body5 text-gray-600 mt-4">
|
||||
Tales from the maker community
|
||||
</p>
|
||||
</div>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
<MenuItem
|
||||
href="/blog"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/blog");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 '
|
||||
>
|
||||
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
|
||||
{/* <FiFeather className={`text-body1 inline-block text-primary-600 `} /> */}
|
||||
<span className="text-body2">✍🏼</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-body4 text-black font-medium">
|
||||
Stories
|
||||
</p>
|
||||
<p className="text-body5 text-gray-600 mt-4">
|
||||
Tales from the maker community
|
||||
</p>
|
||||
</div>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 opacity-40'
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 opacity-40'
|
||||
>
|
||||
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
|
||||
<span className="text-body2">💬</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-body4 text-black font-medium">
|
||||
Discussions
|
||||
</p>
|
||||
<p className="text-body5 text-gray-600 mt-4">
|
||||
Coming soon
|
||||
</p>
|
||||
</div>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/hackathons"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/hackathons");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
|
||||
<span className="text-body2">🏆</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-body4 text-black font-medium">
|
||||
Hackathons
|
||||
</p>
|
||||
<p className="text-body5 text-gray-600 mt-4">
|
||||
Take part in hackathons & tournaments
|
||||
</p>
|
||||
</div>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</li>
|
||||
<li className="relative">
|
||||
<a
|
||||
href={'https://bolt.fun/guide/'}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className='text-body4 font-bold hover:text-primary-600'
|
||||
>
|
||||
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
|
||||
<span className="text-body2">💬</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-body4 text-black font-medium">
|
||||
Discussions
|
||||
</p>
|
||||
<p className="text-body5 text-gray-600 mt-4">
|
||||
Coming soon
|
||||
</p>
|
||||
</div>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/hackathons"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/hackathons");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
|
||||
<span className="text-body2">🏆</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-body4 text-black font-medium">
|
||||
Hackathons
|
||||
</p>
|
||||
<p className="text-body5 text-gray-600 mt-4">
|
||||
Take part in hackathons & tournaments
|
||||
</p>
|
||||
</div>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</li>
|
||||
<li className="relative">
|
||||
<a
|
||||
href={'https://bolt.fun/guide/'}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className='text-body4 font-bold hover:text-primary-600'
|
||||
>
|
||||
Guide
|
||||
</a>
|
||||
</li>
|
||||
<li className="relative">
|
||||
<Link to={'/donate'} className='text-body4 font-bold hover:text-primary-600'>
|
||||
Donate
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
Guide
|
||||
</a>
|
||||
</li>
|
||||
<li className="relative">
|
||||
<Link to={'/donate'} className='text-body4 font-bold hover:text-primary-600'>
|
||||
Donate
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="flex-1"></div>
|
||||
<div className="flex-1"></div>
|
||||
|
||||
<motion.div
|
||||
animate={searchOpen ? { opacity: 0 } : { opacity: 1 }}
|
||||
className="flex"
|
||||
>
|
||||
<motion.div
|
||||
animate={searchOpen ? { opacity: 0 } : { opacity: 1 }}
|
||||
className="flex"
|
||||
>
|
||||
|
||||
{/* <Button
|
||||
{/* <Button
|
||||
color="primary"
|
||||
size="md"
|
||||
className="lg:px-40"
|
||||
@@ -154,87 +155,88 @@ export default function NavDesktop() {
|
||||
>
|
||||
Submit App️
|
||||
</Button> */}
|
||||
{/* {isWalletConnected ?
|
||||
{/* {isWalletConnected ?
|
||||
<Button className="ml-16 py-12 px-16 lg:px-20">Connected <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /></Button>
|
||||
: <Button className="ml-16 py-12 px-16 lg:px-20" onClick={onConnectWallet}><AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet </Button>
|
||||
} */}
|
||||
|
||||
{currentSection === 'apps' && <IconButton className='mr-16 self-center' onClick={openSearch}>
|
||||
<BsSearch className='scale-125 text-gray-400' />
|
||||
</IconButton>}
|
||||
</motion.div>
|
||||
{curUser !== undefined &&
|
||||
(curUser ?
|
||||
<Menu
|
||||
align="end"
|
||||
offsetY={4}
|
||||
menuClassName='!p-8 !rounded-12'
|
||||
menuButton={<MenuButton ><Avatar src={curUser.avatar} width={40} /> </MenuButton>}>
|
||||
<MenuItem
|
||||
href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
👾 Profile
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/edit-profile"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/edit-profile");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
⚙️ Settings
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/logout"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/logout");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
👋 Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
|
||||
:
|
||||
<Button size="sm" color="white" href="/login">
|
||||
Connect ⚡
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
<div className="relative h-36">
|
||||
<motion.div
|
||||
initial={{
|
||||
opacity: 0,
|
||||
y: '0'
|
||||
}}
|
||||
animate={searchOpen ? {
|
||||
opacity: 1,
|
||||
y: '0',
|
||||
transition: { type: "spring", stiffness: 70 }
|
||||
|
||||
} : {
|
||||
opacity: 0,
|
||||
y: '-120px',
|
||||
transition: {
|
||||
ease: "easeIn"
|
||||
}
|
||||
}}
|
||||
className='absolute top-0 right-0 flex items-center h-full'
|
||||
>
|
||||
<Search
|
||||
width={326}
|
||||
isOpen={searchOpen}
|
||||
onClose={() => setSearchOpen(false)}
|
||||
onResultClick={() => setSearchOpen(false)}
|
||||
/>
|
||||
{currentSection === 'apps' && <IconButton className='mr-16 self-center' onClick={openSearch}>
|
||||
<BsSearch className='scale-125 text-gray-400' />
|
||||
</IconButton>}
|
||||
</motion.div>
|
||||
{curUser !== undefined &&
|
||||
(curUser ?
|
||||
<Menu
|
||||
align="end"
|
||||
offsetY={4}
|
||||
menuClassName='!p-8 !rounded-12'
|
||||
menuButton={<MenuButton ><Avatar src={curUser.avatar} width={40} /> </MenuButton>}>
|
||||
<MenuItem
|
||||
href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
👾 Profile
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/edit-profile"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/edit-profile");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
⚙️ Settings
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/logout"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/logout");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
👋 Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
|
||||
:
|
||||
<Button size="sm" color="white" href="/login">
|
||||
Connect ⚡
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
<div className="relative h-36">
|
||||
<motion.div
|
||||
initial={{
|
||||
opacity: 0,
|
||||
y: '0'
|
||||
}}
|
||||
animate={searchOpen ? {
|
||||
opacity: 1,
|
||||
y: '0',
|
||||
transition: { type: "spring", stiffness: 70 }
|
||||
|
||||
} : {
|
||||
opacity: 0,
|
||||
y: '-120px',
|
||||
transition: {
|
||||
ease: "easeIn"
|
||||
}
|
||||
}}
|
||||
className='absolute top-0 right-0 flex items-center h-full'
|
||||
>
|
||||
<Search
|
||||
width={326}
|
||||
isOpen={searchOpen}
|
||||
onClose={() => setSearchOpen(false)}
|
||||
onResultClick={() => setSearchOpen(false)}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -73,68 +73,70 @@ export default function NavMobile() {
|
||||
return (
|
||||
<div className={`${styles.navMobile}`}>
|
||||
<nav className={`bg-white h-[67px] w-full py-16`}>
|
||||
<div className="content-container flex justify-between items-center">
|
||||
<div className="content-container">
|
||||
<div className="flex justify-between items-center">
|
||||
|
||||
<div className="flex-1 flex content-start">
|
||||
<IconButton className='auto text-2xl w-[50px] h-[50px] hover:bg-gray-200 self-center' onClick={() => toggleDrawerOpen()}>
|
||||
{!drawerOpen ? (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='menuHide' animate='menuShow'><FiMenu /></motion.div>)
|
||||
: (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='closeHide' animate='closeShow'><GrClose /></motion.div>)}
|
||||
</IconButton>
|
||||
<div className="flex-1 flex content-start">
|
||||
<IconButton className='auto text-2xl w-[50px] h-[50px] hover:bg-gray-200 self-center' onClick={() => toggleDrawerOpen()}>
|
||||
{!drawerOpen ? (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='menuHide' animate='menuShow'><FiMenu /></motion.div>)
|
||||
: (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='closeHide' animate='closeShow'><GrClose /></motion.div>)}
|
||||
</IconButton>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex-[2] flex justify-center">
|
||||
<Link to="/">
|
||||
<img className='max-h-32' src={ASSETS.Logo} alt="Bolt fun logo" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex justify-end">
|
||||
{curUser ?
|
||||
|
||||
<Menu
|
||||
align="end"
|
||||
offsetY={4}
|
||||
menuClassName='!p-8 !rounded-12'
|
||||
menuButton={<MenuButton ><Avatar src={curUser.avatar} width={32} /> </MenuButton>}>
|
||||
<MenuItem
|
||||
href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
👾 Profile
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/edit-profile"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/edit-profile");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
⚙️ Settings
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/logout"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/logout");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
👋 Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
:
|
||||
<Button size="sm" color="none" className="!text-body5 whitespace-nowrap" href="/login">
|
||||
Connect ⚡
|
||||
</Button>
|
||||
|
||||
}</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex-[2] flex justify-center">
|
||||
<Link to="/">
|
||||
<img className='max-h-32' src={ASSETS.Logo} alt="Bolt fun logo" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex justify-end">
|
||||
{curUser ?
|
||||
|
||||
<Menu
|
||||
align="end"
|
||||
offsetY={4}
|
||||
menuClassName='!p-8 !rounded-12'
|
||||
menuButton={<MenuButton ><Avatar src={curUser.avatar} width={32} /> </MenuButton>}>
|
||||
<MenuItem
|
||||
href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
👾 Profile
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/edit-profile"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/edit-profile");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
⚙️ Settings
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/logout"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/logout");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
👋 Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
:
|
||||
<Button size="sm" color="none" className="!text-body5 whitespace-nowrap" href="/login">
|
||||
Connect ⚡
|
||||
</Button>
|
||||
|
||||
}</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -28,36 +28,38 @@ export default function HackathonsPage() {
|
||||
<meta property="og:title" content={'Hackathons'} />
|
||||
</Helmet>
|
||||
<div
|
||||
className={`page-container pt-16 w-full ${styles.grid}`}
|
||||
className={`page-container`}
|
||||
>
|
||||
<aside className='no-scrollbar'>
|
||||
<div className="flex flex-col gap-24 md:overflow-y-scroll sticky-side-element">
|
||||
<h1 id='title' className="text-body1 lg:text-h2 font-bolder">Hackathons 🏆</h1>
|
||||
<SortByFilter
|
||||
filterChanged={setSortByFilter}
|
||||
/>
|
||||
{/* <TopicsFilter
|
||||
<div className={`pt-16 w-full ${styles.grid}`}>
|
||||
<aside className='no-scrollbar'>
|
||||
<div className="flex flex-col gap-24 md:overflow-y-scroll sticky-side-element">
|
||||
<h1 id='title' className="text-body1 lg:text-h2 font-bolder">Hackathons 🏆</h1>
|
||||
<SortByFilter
|
||||
filterChanged={setSortByFilter}
|
||||
/>
|
||||
{/* <TopicsFilter
|
||||
filterChanged={setTopicsFilter}
|
||||
/> */}
|
||||
<Button
|
||||
href='https://airtable.com/shrgXKynON8YWeyyE'
|
||||
newTab
|
||||
color='primary'
|
||||
fullWidth
|
||||
>
|
||||
List Your Hackathon
|
||||
</Button>
|
||||
<div className="hidden md:block">
|
||||
<Fulgur />
|
||||
<Button
|
||||
href='https://airtable.com/shrgXKynON8YWeyyE'
|
||||
newTab
|
||||
color='primary'
|
||||
fullWidth
|
||||
>
|
||||
List Your Hackathon
|
||||
</Button>
|
||||
<div className="hidden md:block">
|
||||
<Fulgur />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main className="self-start">
|
||||
<HackathonsList
|
||||
currentFilter={sortByFilter}
|
||||
isLoading={hackathonsQuery.loading}
|
||||
items={hackathonsQuery.data?.getAllHackathons} />
|
||||
</main>
|
||||
</aside>
|
||||
<main className="self-start">
|
||||
<HackathonsList
|
||||
currentFilter={sortByFilter}
|
||||
isLoading={hackathonsQuery.loading}
|
||||
items={hackathonsQuery.data?.getAllHackathons} />
|
||||
</main>
|
||||
</div>
|
||||
</div></>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -43,78 +43,80 @@ export default function FeedPage() {
|
||||
<meta property="og:title" content={`Bolt.Fun Stories`} />
|
||||
</Helmet>
|
||||
<div
|
||||
className={`page-container pt-16 w-full ${styles.grid}`}
|
||||
className={`page-container`}
|
||||
>
|
||||
<div id="title">
|
||||
{tagFilter && <p className="text-body6 text-gray-500 font-medium mb-8">
|
||||
<span className='cursor-pointer' onClick={() => setTagFilter(null)}>Stories </span>
|
||||
<FiArrowRight />
|
||||
<span> {tagFilter.title}</span>
|
||||
</p>}
|
||||
<h1 className="text-h2 font-bolder">{
|
||||
tagFilter ?
|
||||
<>{tagFilter.icon} {capitalize(tagFilter.title)}</>
|
||||
:
|
||||
"Stories ✍🏼"
|
||||
}</h1>
|
||||
</div>
|
||||
<div id="sort-by">
|
||||
<SortBy
|
||||
filterChanged={setSortByFilter}
|
||||
/>
|
||||
</div>
|
||||
<div id="content">
|
||||
<PostsList
|
||||
isLoading={feedQuery.loading}
|
||||
items={feedQuery.data?.getFeed}
|
||||
isFetching={isFetchingMore}
|
||||
onReachedBottom={fetchMore}
|
||||
/>
|
||||
</div>
|
||||
<aside id='categories' className='no-scrollbar'>
|
||||
<div className="pb-16 md:overflow-y-scroll sticky-side-element">
|
||||
<Button
|
||||
href='/blog/create-post'
|
||||
color='primary'
|
||||
fullWidth
|
||||
>
|
||||
Write a story
|
||||
</Button>
|
||||
<div className="my-24"></div>
|
||||
<div className="my-24"></div>
|
||||
<PopularTagsFilter
|
||||
value={tagFilter}
|
||||
onChange={setTagFilter as any}
|
||||
/>
|
||||
|
||||
<div className={`w-full ${styles.grid}`}>
|
||||
<div id="title">
|
||||
{tagFilter && <p className="text-body6 text-gray-500 font-medium mb-8">
|
||||
<span className='cursor-pointer' onClick={() => setTagFilter(null)}>Stories </span>
|
||||
<FiArrowRight />
|
||||
<span> {tagFilter.title}</span>
|
||||
</p>}
|
||||
<h1 className="text-h2 font-bolder">{
|
||||
tagFilter ?
|
||||
<>{tagFilter.icon} {capitalize(tagFilter.title)}</>
|
||||
:
|
||||
"Stories ✍🏼"
|
||||
}</h1>
|
||||
</div>
|
||||
</aside>
|
||||
<aside id='side' className='no-scrollbar'>
|
||||
<div className="pb-16 flex flex-col gap-24 overflow-y-auto sticky-side-element" >
|
||||
<TrendingCard />
|
||||
<div className='min-h-[300px] text-white flex flex-col justify-end p-24 rounded-12 relative overflow-hidden'
|
||||
style={{
|
||||
backgroundImage: "url(/assets/images/stw2.jfif)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute bg-black inset-0 opacity-10"></div>
|
||||
<div className="relative flex flex-col gap-24">
|
||||
<div className="flex flex-col gap-8">
|
||||
<p className="text-body1 font-bolder">Shock the Web 2 ⚡️</p>
|
||||
<p className="text-body3 font-medium">16th - 18th June, 2022</p>
|
||||
<div id="sort-by">
|
||||
<SortBy
|
||||
filterChanged={setSortByFilter}
|
||||
/>
|
||||
</div>
|
||||
<div id="content">
|
||||
<PostsList
|
||||
isLoading={feedQuery.loading}
|
||||
items={feedQuery.data?.getFeed}
|
||||
isFetching={isFetchingMore}
|
||||
onReachedBottom={fetchMore}
|
||||
/>
|
||||
</div>
|
||||
<aside id='categories' className='no-scrollbar'>
|
||||
<div className="pb-16 md:overflow-y-scroll sticky-side-element">
|
||||
<Button
|
||||
href='/blog/create-post'
|
||||
color='primary'
|
||||
fullWidth
|
||||
>
|
||||
Write a story
|
||||
</Button>
|
||||
<div className="my-24"></div>
|
||||
<div className="my-24"></div>
|
||||
<PopularTagsFilter
|
||||
value={tagFilter}
|
||||
onChange={setTagFilter as any}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
<aside id='side' className='no-scrollbar'>
|
||||
<div className="pb-16 flex flex-col gap-24 overflow-y-auto sticky-side-element" >
|
||||
<TrendingCard />
|
||||
<div className='min-h-[300px] text-white flex flex-col justify-end p-24 rounded-12 relative overflow-hidden'
|
||||
style={{
|
||||
backgroundImage: "url(/assets/images/stw2.jfif)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute bg-black inset-0 opacity-10"></div>
|
||||
<div className="relative flex flex-col gap-24">
|
||||
<div className="flex flex-col gap-8">
|
||||
<p className="text-body1 font-bolder">Shock the Web 2 ⚡️</p>
|
||||
<p className="text-body3 font-medium">16th - 18th June, 2022</p>
|
||||
</div>
|
||||
<Button
|
||||
color='white'
|
||||
fullWidth
|
||||
href='https://discord.gg/HFqtxavb7x'
|
||||
newTab
|
||||
>
|
||||
<FaDiscord className='scale-125 mr-8' /> <span className="align-middle">Join in Discord</span>
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
color='white'
|
||||
fullWidth
|
||||
href='https://discord.gg/HFqtxavb7x'
|
||||
newTab
|
||||
>
|
||||
<FaDiscord className='scale-125 mr-8' /> <span className="align-middle">Join in Discord</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -45,29 +45,31 @@ export default function PostDetailsPage() {
|
||||
</Helmet>
|
||||
<ScrollToTop />
|
||||
<div
|
||||
className={`page-container grid pt-16 w-full gap-32 ${styles.grid}`}
|
||||
className={`page-container`}
|
||||
>
|
||||
<aside id='actions' className='no-scrollbar'>
|
||||
<div className="sticky-side-element">
|
||||
<PostActions post={post} />
|
||||
</div>
|
||||
</aside>
|
||||
<div className={`grid w-full gap-32 ${styles.grid}`}>
|
||||
<aside id='actions' className='no-scrollbar'>
|
||||
<div className="sticky-side-element">
|
||||
<PostActions post={post} />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<PageContent post={post} />
|
||||
<aside id='author' className='no-scrollbar min-w-0'>
|
||||
<div className="flex flex-col gap-24 overflow-y-auto sticky-side-element">
|
||||
<AuthorCard author={post.author} />
|
||||
<div className="hidden md:block"><TrendingCard /></div>
|
||||
<PageContent post={post} />
|
||||
<aside id='author' className='no-scrollbar min-w-0'>
|
||||
<div className="flex flex-col gap-24 overflow-y-auto sticky-side-element">
|
||||
<AuthorCard author={post.author} />
|
||||
<div className="hidden md:block"><TrendingCard /></div>
|
||||
</div>
|
||||
</aside>
|
||||
<div id="comments">
|
||||
<Suspense fallback={
|
||||
<div className="flex justify-center py-32"><RotatingLines strokeColor='#ddd' width="64" /></div>
|
||||
}>
|
||||
<CommentsSection id={post.id} type={type as Post_Type} />
|
||||
</Suspense>
|
||||
<div className="md:hidden mt-24"><TrendingCard /></div>
|
||||
</div>
|
||||
</aside>
|
||||
<div id="comments">
|
||||
<Suspense fallback={
|
||||
<div className="flex justify-center py-32"><RotatingLines strokeColor='#ddd' width="64" /></div>
|
||||
}>
|
||||
<CommentsSection id={post.id} type={type as Post_Type} />
|
||||
</Suspense>
|
||||
<div className="md:hidden mt-24"><TrendingCard /></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -45,55 +45,57 @@ export default function EditProfilePage() {
|
||||
<title>Settings</title>
|
||||
<meta property="og:title" content='Settings' />
|
||||
</Helmet>
|
||||
<div className="page-container grid grid-cols-1 md:grid-cols-4 gap-24">
|
||||
<aside>
|
||||
{isMediumScreen ?
|
||||
<Card className="sticky-side-element">
|
||||
<p className="text-body2 font-bolder text-black mb-16">Edit maker profile</p>
|
||||
<ul className=' flex flex-col gap-8'>
|
||||
{links.map((link, idx) =>
|
||||
<li key={idx}>
|
||||
<NavLink
|
||||
to={link.path}
|
||||
className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
|
||||
<div className="page-container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-24">
|
||||
<aside>
|
||||
{isMediumScreen ?
|
||||
<Card className="sticky-side-element">
|
||||
<p className="text-body2 font-bolder text-black mb-16">Edit maker profile</p>
|
||||
<ul className=' flex flex-col gap-8'>
|
||||
{links.map((link, idx) =>
|
||||
<li key={idx}>
|
||||
<NavLink
|
||||
to={link.path}
|
||||
className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
|
||||
active:scale-95 transition-transform
|
||||
${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
|
||||
`}
|
||||
>
|
||||
{link.text}
|
||||
</NavLink>
|
||||
</li>)}
|
||||
</ul>
|
||||
</Card>
|
||||
:
|
||||
<div className="border-b-2 border-gray-200">
|
||||
<Slider>
|
||||
{links.map((link, idx) =>
|
||||
<NavLink
|
||||
to={link.path}
|
||||
key={idx}
|
||||
className={`flex items-start cursor-pointer font-bold py-12
|
||||
active:scale-95 transition-transform`}
|
||||
style={({ isActive }) => ({
|
||||
boxShadow: isActive ? '0px 2px var(--primary)' : 'none'
|
||||
})}
|
||||
>
|
||||
{link.text}
|
||||
</NavLink>
|
||||
</li>)}
|
||||
</ul>
|
||||
</Card>
|
||||
:
|
||||
<div className="border-b-2 border-gray-200">
|
||||
<Slider>
|
||||
{links.map((link, idx) =>
|
||||
<NavLink
|
||||
to={link.path}
|
||||
key={idx}
|
||||
className={`flex items-start cursor-pointer font-bold py-12
|
||||
active:scale-95 transition-transform`}
|
||||
style={({ isActive }) => ({
|
||||
boxShadow: isActive ? '0px 2px var(--primary)' : 'none'
|
||||
})}
|
||||
>
|
||||
{link.text}
|
||||
</NavLink>
|
||||
)}
|
||||
</Slider>
|
||||
</div>
|
||||
}
|
||||
</aside>
|
||||
<main className="md:col-span-3">
|
||||
<Routes>
|
||||
<Route index element={<Navigate to='basic-info' />} />
|
||||
<Route path='basic-info' element={<BasicProfileInfoTab />} />
|
||||
<Route path='roles-skills' element={<RolesSkillsTab />} />
|
||||
<Route path='preferences' element={<PreferencesTab />
|
||||
} />
|
||||
</Routes>
|
||||
</main>
|
||||
)}
|
||||
</Slider>
|
||||
</div>
|
||||
}
|
||||
</aside>
|
||||
<main className="md:col-span-3">
|
||||
<Routes>
|
||||
<Route index element={<Navigate to='basic-info' />} />
|
||||
<Route path='basic-info' element={<BasicProfileInfoTab />} />
|
||||
<Route path='roles-skills' element={<RolesSkillsTab />} />
|
||||
<Route path='preferences' element={<PreferencesTab />
|
||||
} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -48,9 +48,10 @@ export default function ProfilePage() {
|
||||
}
|
||||
<meta property="og:image" content={profileQuery.data.profile.avatar} />
|
||||
</Helmet>
|
||||
<div className={`page-container ${styles.grid}`}
|
||||
<div className={`page-container`}
|
||||
>
|
||||
{isMediumScreen ?
|
||||
<div className={`${styles.grid}`}
|
||||
>{isMediumScreen ?
|
||||
<>
|
||||
<aside>
|
||||
|
||||
@@ -76,7 +77,7 @@ export default function ProfilePage() {
|
||||
<StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
|
||||
</main>
|
||||
</>
|
||||
}
|
||||
}</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -11,10 +11,8 @@ export default function ExplorePage() {
|
||||
<title>{`Explore Lightning Products`}</title>
|
||||
<meta property="og:title" content={`Explore Lightning Products`} />
|
||||
</Helmet>
|
||||
<div className="page-container pt-16">
|
||||
|
||||
<div className="page-container">
|
||||
<Header />
|
||||
|
||||
<div className="my-32">
|
||||
<Categories />
|
||||
</div>
|
||||
|
||||
@@ -26,21 +26,27 @@ body {
|
||||
@include gt-md {
|
||||
--padding: 32px;
|
||||
}
|
||||
width: calc(min(100% - 2 * var(--padding), 1440px));
|
||||
margin: 0 auto;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: minmax(var(--padding), 1fr) minmax(auto, 1440px) minmax(
|
||||
var(--padding),
|
||||
1fr
|
||||
);
|
||||
|
||||
> * {
|
||||
grid-column: 2/3;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
> .full-width {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
// @media screen and (min-width: 780px) {
|
||||
// .page-container {
|
||||
// width: calc(min(100% - 64px, 1440px));
|
||||
// margin: 0 auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user