pleb/flockstr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cool opacity changes

Browse Source
This commit is contained in:
zmeyer44 2023-10-27 14:35:10 -04:00
parent c583eb9a6d
commit 092a262653
2 changed files with 7 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/(app)/explore/_components/CalendarSection.tsx
View File

@ -50,14 +50,14 @@ function CalendarIcon({ date }: { date: Date }) {
"flex overflow-hidden rounded-md border bg-background shadow", "flex overflow-hidden rounded-md border bg-background shadow",
)} )}
> >
<div className="w-fit shrink-0 bg-primary p-1.5 px-3 text-primary-foreground @xl:p-2 @xl:px-3.5"> <div className="center w-fit shrink-0 bg-primary p-1.5 px-3 text-primary-foreground @xl:p-2 @xl:px-3.5">
{/* <span className="text-2xl font-bold">24</span> */} {/* <span className="text-2xl font-bold">24</span> */}
<span className="font-semibold">{formatDate(date, "ddd")}</span> <span className="font-semibold">{formatDate(date, "ddd")}</span>
</div> </div>
<div className="center flex whitespace-nowrap px-3 text-sm font-medium text-muted-foreground @lg:text-base @xl:px-3.5"> <div className="center flex whitespace-nowrap px-3 text-sm font-medium text-muted-foreground @lg:text-base @xl:p-1 @xl:px-3.5">
<div className=""> <div className="">
{formatDate(date, "MMMM Do")} {formatDate(date, "MMMM Do")}
<span className="-mt-2 block text-[10px] font-normal"> <span className="-mt-2 hidden text-[10px] font-normal @xl:block">
{relativeTime(date)} {relativeTime(date)}
</span> </span>
</div> </div>
@ -76,7 +76,7 @@ function CalendarIconOpacity({ date }: { date: Date }) {
// Get the position of the div relative to the viewport // Get the position of the div relative to the viewport
const divRect = ref.current.getBoundingClientRect(); const divRect = ref.current.getBoundingClientRect();
// Change the opacity when the div reaches the top of the screen // Change the opacity when the div reaches the top of the screen
if (divRect.top <= 110) { if (divRect.top <= 145) {
setTop(true); setTop(true);
} else { } else {
setTop(false); setTop(false);
@ -92,8 +92,9 @@ function CalendarIconOpacity({ date }: { date: Date }) {
}; };
}, []); }, []);
return ( return (
<div ref={ref} className={cn(top && "opacity-50")}> <div className={cn(top && "opacity-50")}>
<CalendarIcon date={date} /> <CalendarIcon date={date} />
<div ref={ref}></div>
</div> </div>
); );
} }

17
lib/utils/dates.ts
View File

@ -41,22 +41,7 @@ export function relativeTimeUnix(timestamp: number) {
return dayjs(timestamp * 1000).fromNow(); return dayjs(timestamp * 1000).fromNow();
} }
export function relativeTime(timestamp: Date) { export function relativeTime(timestamp: Date) {
const config = {
thresholds: [
{ l: "s", r: 1 },
{ l: "m", r: 1 },
{ l: "mm", r: 59, d: "minute" },
{ l: "h", r: 1 },
{ l: "hh", r: 23, d: "hour" },
{ l: "d", r: 1 },
{ l: "dd", r: 364, d: "day" },
{ l: "y", r: 1 },
{ l: "yy", d: "year" },
],
rounding: Math.floor,
};
dayjs.extend(updateLocale); dayjs.extend(updateLocale);
dayjs.updateLocale("en", { dayjs.updateLocale("en", {
relativeTime: { relativeTime: {
future: "in %s", future: "in %s",
@ -74,7 +59,7 @@ export function relativeTime(timestamp: Date) {
yy: "%d years", yy: "%d years",
}, },
}); });
dayjs.extend(relative, config); dayjs.extend(relative);
return dayjs(timestamp).fromNow(); return dayjs(timestamp).fromNow();
} }
export function daysOffset(targetDate: Date) { export function daysOffset(targetDate: Date) {