feat: better layout
This commit is contained in:
Nevo David
parent
943acec8e4
commit
45294e07b5
|
|
@ -142,37 +142,39 @@ export const DayView = () => {
|
|||
}, [integrations, posts]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-[10px] flex-1">
|
||||
{options.map((option) => (
|
||||
<Fragment key={option[0].time}>
|
||||
<div className="text-center text-[14px]">
|
||||
{newDayjs()
|
||||
.utc()
|
||||
.startOf('day')
|
||||
.add(option[0].time, 'minute')
|
||||
.local()
|
||||
.format(isUSCitizen() ? 'hh:mm A' : 'LT')}
|
||||
</div>
|
||||
<div
|
||||
key={option[0].time}
|
||||
className="min-h-[60px] rounded-[10px] flex justify-center items-center gap-[10px] mb-[20px]"
|
||||
>
|
||||
<CalendarContext.Provider
|
||||
value={{
|
||||
...calendar,
|
||||
integrations: option.flatMap((p) => p.integration),
|
||||
}}
|
||||
<div className="flex flex-col gap-[10px] flex-1 relative">
|
||||
<div className="absolute start-0 top-0 w-full h-full flex flex-col overflow-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor">
|
||||
{options.map((option) => (
|
||||
<Fragment key={option[0].time}>
|
||||
<div className="text-center text-[14px] min-h-[21px]">
|
||||
{newDayjs()
|
||||
.utc()
|
||||
.startOf('day')
|
||||
.add(option[0].time, 'minute')
|
||||
.local()
|
||||
.format(isUSCitizen() ? 'hh:mm A' : 'LT')}
|
||||
</div>
|
||||
<div
|
||||
key={option[0].time}
|
||||
className="min-h-[60px] rounded-[10px] flex justify-center items-center gap-[10px] mb-[20px]"
|
||||
>
|
||||
<CalendarColumn
|
||||
getDate={currentDay
|
||||
.startOf('day')
|
||||
.add(option[0].time, 'minute')
|
||||
.local()}
|
||||
/>
|
||||
</CalendarContext.Provider>
|
||||
</div>
|
||||
</Fragment>
|
||||
))}
|
||||
<CalendarContext.Provider
|
||||
value={{
|
||||
...calendar,
|
||||
integrations: option.flatMap((p) => p.integration),
|
||||
}}
|
||||
>
|
||||
<CalendarColumn
|
||||
getDate={currentDay
|
||||
.startOf('day')
|
||||
.add(option[0].time, 'minute')
|
||||
.local()}
|
||||
/>
|
||||
</CalendarContext.Provider>
|
||||
</div>
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -200,13 +202,13 @@ export const WeekView = () => {
|
|||
|
||||
return (
|
||||
<div className="flex flex-col text-textColor flex-1">
|
||||
<div className="flex-1">
|
||||
<div className="grid [grid-template-columns:136px_repeat(7,_minmax(0,_1fr))] gap-[4px] rounded-[10px]">
|
||||
<div className="z-10 bg-newTableHeader flex justify-center items-center flex-col h-[62px] rounded-[8px]"></div>
|
||||
<div className="flex-1 relative">
|
||||
<div className="grid [grid-template-columns:136px_repeat(7,_minmax(0,_1fr))] gap-[4px] rounded-[10px] absolute h-full start-0 top-0 w-full overflow-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor">
|
||||
<div className="z-10 bg-newTableHeader flex justify-center items-center flex-col h-[62px] rounded-[8px] sticky top-0"></div>
|
||||
{localizedDays.map((day, index) => (
|
||||
<div
|
||||
key={day.name}
|
||||
className="z-10 p-2 text-center bg-newTableHeader flex justify-center items-center flex-col h-[62px] rounded-[8px]"
|
||||
className="z-10 p-2 text-center bg-newTableHeader flex justify-center items-center flex-col h-[62px] rounded-[8px] sticky top-0"
|
||||
>
|
||||
<div className="text-[14px] font-[500] text-newTableText">
|
||||
{day.name}
|
||||
|
|
@ -299,12 +301,12 @@ export const MonthView = () => {
|
|||
|
||||
return (
|
||||
<div className="flex flex-col text-textColor flex-1">
|
||||
<div className="flex-1 flex">
|
||||
<div className="grid grid-cols-7 grid-rows-[62px_auto] gap-[4px] rounded-[10px] flex-1">
|
||||
<div className="flex-1 flex relative">
|
||||
<div className="grid grid-cols-7 grid-rows-[62px_auto] gap-[4px] rounded-[10px] absolute start-0 top-0 overflow-auto w-full h-full scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary">
|
||||
{localizedDays.map((day) => (
|
||||
<div
|
||||
key={day}
|
||||
className="z-10 p-2 bg-newTableHeader flex justify-center items-center flex-col h-[62px] rounded-[8px]"
|
||||
className="z-10 p-2 bg-newTableHeader flex justify-center items-center flex-col h-[62px] rounded-[8px] sticky top-0"
|
||||
>
|
||||
<div>{day}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -493,84 +493,92 @@ export const LaunchesComponent = () => {
|
|||
<CalendarWeekProvider integrations={sortedIntegrations}>
|
||||
<div
|
||||
className={clsx(
|
||||
'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all',
|
||||
'flex relative flex-col',
|
||||
collapseMenu === '1' ? 'group sidebar w-[100px]' : 'w-[260px]'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<h2 className="group-[.sidebar]:hidden flex-1 text-[20px] font-[500]">
|
||||
{t('channels')}
|
||||
</h2>
|
||||
<div
|
||||
onClick={() => setCollapseMenu(collapseMenu === '1' ? '0' : '1')}
|
||||
className="group-[.sidebar]:rotate-[180deg] group-[.sidebar]:mx-auto text-btnText bg-btnSimple rounded-[6px] w-[24px] h-[24px] flex items-center justify-center cursor-pointer select-none"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="7"
|
||||
height="13"
|
||||
viewBox="0 0 7 13"
|
||||
fill="none"
|
||||
<div
|
||||
className={clsx(
|
||||
'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all absolute start-0 top-0 w-full h-full overflow-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<h2 className="group-[.sidebar]:hidden flex-1 text-[20px] font-[500]">
|
||||
{t('channels')}
|
||||
</h2>
|
||||
<div
|
||||
onClick={() =>
|
||||
setCollapseMenu(collapseMenu === '1' ? '0' : '1')
|
||||
}
|
||||
className="group-[.sidebar]:rotate-[180deg] group-[.sidebar]:mx-auto text-btnText bg-btnSimple rounded-[6px] w-[24px] h-[24px] flex items-center justify-center cursor-pointer select-none"
|
||||
>
|
||||
<path
|
||||
d="M6 11.5L1 6.5L6 1.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[8px] group-[.sidebar]:mx-auto group-[.sidebar]:w-[44px]">
|
||||
<AddProviderButton update={() => update(true)} />
|
||||
<div className="flex gap-[8px] group-[.sidebar]:flex-col">
|
||||
{sortedIntegrations?.length > 0 && <NewPost />}
|
||||
{sortedIntegrations?.length > 0 &&
|
||||
user?.tier?.ai &&
|
||||
billingEnabled && <GeneratorComponent />}
|
||||
</div>
|
||||
</div>
|
||||
<div className="gap-[32px] flex flex-col select-none flex-1">
|
||||
{sortedIntegrations.length === 0 && collapseMenu === '0' && (
|
||||
<div className="flex-1 max-h-[500px] justify-center items-center flex">
|
||||
<div className="flex flex-col gap-[12px] text-center">
|
||||
<img
|
||||
src={
|
||||
mode === 'dark'
|
||||
? '/no-channels.svg'
|
||||
: '/no-channels-colors.svg'
|
||||
}
|
||||
alt="No channels"
|
||||
className="mx-auto min-w-[100%]"
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="7"
|
||||
height="13"
|
||||
viewBox="0 0 7 13"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M6 11.5L1 6.5L6 1.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<div className="font-[600] text-[20px]">
|
||||
{t('no_channels', 'No channels yet')}
|
||||
</div>
|
||||
<div className="text-[14px]">
|
||||
{t('connect_your_accounts')}
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[8px] group-[.sidebar]:mx-auto group-[.sidebar]:w-[44px]">
|
||||
<AddProviderButton update={() => update(true)} />
|
||||
<div className="flex gap-[8px] group-[.sidebar]:flex-col">
|
||||
{sortedIntegrations?.length > 0 && <NewPost />}
|
||||
{sortedIntegrations?.length > 0 &&
|
||||
user?.tier?.ai &&
|
||||
billingEnabled && <GeneratorComponent />}
|
||||
</div>
|
||||
</div>
|
||||
<div className="gap-[32px] flex flex-col select-none flex-1">
|
||||
{sortedIntegrations.length === 0 && collapseMenu === '0' && (
|
||||
<div className="flex-1 max-h-[500px] justify-center items-center flex">
|
||||
<div className="flex flex-col gap-[12px] text-center">
|
||||
<img
|
||||
src={
|
||||
mode === 'dark'
|
||||
? '/no-channels.svg'
|
||||
: '/no-channels-colors.svg'
|
||||
}
|
||||
alt="No channels"
|
||||
className="mx-auto min-w-[100%]"
|
||||
/>
|
||||
<div className="font-[600] text-[20px]">
|
||||
{t('no_channels', 'No channels yet')}
|
||||
</div>
|
||||
<div className="text-[14px]">
|
||||
{t('connect_your_accounts')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{menuIntegrations.map((menu) => (
|
||||
<MenuGroupComponent
|
||||
collapsed={collapseMenu === '1'}
|
||||
changeItemGroup={changeItemGroup}
|
||||
key={menu.name}
|
||||
group={menu}
|
||||
mutate={mutate}
|
||||
continueIntegration={continueIntegration}
|
||||
update={update}
|
||||
refreshChannel={refreshChannel}
|
||||
totalNonDisabledChannels={totalNonDisabledChannels}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-[5px] text-center">
|
||||
{process.env.NEXT_PUBLIC_VERSION
|
||||
? process.env.NEXT_PUBLIC_VERSION
|
||||
: ''}
|
||||
)}
|
||||
{menuIntegrations.map((menu) => (
|
||||
<MenuGroupComponent
|
||||
collapsed={collapseMenu === '1'}
|
||||
changeItemGroup={changeItemGroup}
|
||||
key={menu.name}
|
||||
group={menu}
|
||||
mutate={mutate}
|
||||
continueIntegration={continueIntegration}
|
||||
update={update}
|
||||
refreshChannel={refreshChannel}
|
||||
totalNonDisabledChannels={totalNonDisabledChannels}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-[5px] text-center">
|
||||
{process.env.NEXT_PUBLIC_VERSION
|
||||
? process.env.NEXT_PUBLIC_VERSION
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
|
||||
|
|
|
|||
Loading…
Reference in New Issue