{
className?: string;
diff --git a/src/common/components/Sidebar/Sidebar.tsx b/src/common/components/Sidebar/Sidebar.tsx
index 233a508e..0f001ac5 100644
--- a/src/common/components/Sidebar/Sidebar.tsx
+++ b/src/common/components/Sidebar/Sidebar.tsx
@@ -13,7 +13,7 @@ import { Icon } from "@iconify-icon/react";
import { SidebarItem } from "@/common/components/SidebarItem";
import { Logo } from "@/common/components/Logo";
import { Input } from "@/common/components/Input";
-import { cn } from "@/common/functions/cn";
+import { cn } from "@/common/functions";
const SIDEBAR_ITEMS = [
{
diff --git a/src/common/components/SidebarItem/SidebarItem.tsx b/src/common/components/SidebarItem/SidebarItem.tsx
index 6b944e50..d50bb249 100644
--- a/src/common/components/SidebarItem/SidebarItem.tsx
+++ b/src/common/components/SidebarItem/SidebarItem.tsx
@@ -1,5 +1,5 @@
import { type SidebarItemType } from "@/common/components/Sidebar/Sidebar";
-import { cn } from "@/common/functions/cn";
+import { cn } from "@/common/functions";
import Link from "next/link";
export type SidebarListItem = SidebarItemType & {
diff --git a/src/common/functions/getHumanReadableTimestampDelta.ts b/src/common/functions/getHumanReadableTimestampDelta.ts
new file mode 100644
index 00000000..dddfd60b
--- /dev/null
+++ b/src/common/functions/getHumanReadableTimestampDelta.ts
@@ -0,0 +1,38 @@
+/**
+ * Calculates the human-readable time delta between two Unix epoch timestamps.
+ *
+ * @param t0 - The Unix epoch timestamp to compare against (in seconds).
+ * @param t1 - [optional] The Unix epoch timestamp to compare with (in seconds).
+ * If omitted, the current time is used.
+ * @returns A human-readable representation of the time delta. eg `1d`, `2h`, `just now`.
+ *
+ * @example
+ * const t0 = 1642694400; // Unix timestamp for 2022-01-21 00:00:00
+ * const t1 = 1642780800; // Unix timestamp for 2022-01-22 00:00:00
+ * const delta = getHumanReadableTimestampDelta(t0, t1);
+ * console.log(delta); // Output: '1d'
+ *
+ * @example
+ * const delta = getHumanReadableTimestampDelta(Date.now() / 1000);
+ * console.log(delta); // Output: 'just now'
+ */
+export function getHumanReadableTimestampDelta(
+ t0: number,
+ t1: number = Date.now() / 1000,
+) {
+ const deltaSeconds = Math.abs(t1 - t0);
+ const denominators = [
+ { unit: "y", seconds: 365 * 24 * 60 * 60 },
+ { unit: "mo", seconds: 30 * 24 * 60 * 60 },
+ { unit: "w", seconds: 7 * 24 * 60 * 60 },
+ { unit: "d", seconds: 24 * 60 * 60 },
+ { unit: "h", seconds: 60 * 60 },
+ { unit: "m", seconds: 60 },
+ { unit: "s", seconds: 1 },
+ ];
+ for (const denominator of denominators) {
+ const value = Math.floor(deltaSeconds / denominator.seconds);
+ if (value > 0) return `${value}${denominator.unit}`;
+ }
+ return "just now"; // If the delta is less than a second
+}
diff --git a/src/common/functions/index.ts b/src/common/functions/index.ts
new file mode 100644
index 00000000..914281ba
--- /dev/null
+++ b/src/common/functions/index.ts
@@ -0,0 +1,3 @@
+export * from "./cn";
+export * from "./formatPercentage";
+export * from "./getHumanReadableTimestampDelta";
From b2c66fb44b216e5ad943670fe534e6c51e7c00d1 Mon Sep 17 00:00:00 2001
From: David Lin <13061926+DavidLHW@users.noreply.github.com>
Date: Sun, 21 Jan 2024 17:02:45 +0800
Subject: [PATCH 3/9] chore: add variant to lock cta overlay component
---
.../LockCtaOverlay/LockCtaOverlay.theme.ts | 38 +++++++++++++------
.../LockCtaOverlay/LockCtaOverlay.tsx | 32 +++++++++++++---
.../RatingSection/RatingSection.tsx | 2 +-
3 files changed, 54 insertions(+), 18 deletions(-)
diff --git a/src/common/components/LockCtaOverlay/LockCtaOverlay.theme.ts b/src/common/components/LockCtaOverlay/LockCtaOverlay.theme.ts
index fb445d6d..ef9671a8 100644
--- a/src/common/components/LockCtaOverlay/LockCtaOverlay.theme.ts
+++ b/src/common/components/LockCtaOverlay/LockCtaOverlay.theme.ts
@@ -19,26 +19,42 @@ export const lockCtaOverlayTheme = tv(
],
wrapper: [
"inline-flex",
+ "absolute",
+ "left-0",
+ "top-0",
"items-center",
"justify-center",
"h-full",
"w-full",
- "gap-1",
"text-text-em-low",
+ "z-10",
],
- icon: ["h-6", "w-6"],
- ctaTextContainer: [
- "flex",
- "items-center",
- "gap-1",
- "text-lg",
- "font-medium",
- ],
+ icon: [],
+ ctaTextContainer: ["flex", "items-center", "gap-1", "font-medium"],
},
variants: {
size: {
- md: {},
- sm: {},
+ md: {
+ wrapper: ["gap-2"],
+ icon: ["h-6", "w-6"],
+ ctaTextContainer: ["text-lg"],
+ },
+ sm: {
+ wrapper: ["gap-[0.375rem]"],
+ icon: ["h-4", "w-4"],
+ ctaTextContainer: ["text-sm"],
+ },
+ },
+ variant: {
+ border: {
+ overlay: ["hidden"],
+ wrapper: [
+ "rounded-lg",
+ "border-2",
+ "border-solid",
+ "border-border-default",
+ ],
+ },
},
},
},
diff --git a/src/common/components/LockCtaOverlay/LockCtaOverlay.tsx b/src/common/components/LockCtaOverlay/LockCtaOverlay.tsx
index 16cf9ded..3b7819a4 100644
--- a/src/common/components/LockCtaOverlay/LockCtaOverlay.tsx
+++ b/src/common/components/LockCtaOverlay/LockCtaOverlay.tsx
@@ -1,20 +1,40 @@
import { Button } from "@/common/components/Button";
import { LockIcon } from "@/common/components/CustomIcon/LockIcon";
-import { lockCtaOverlayTheme } from "./LockCtaOverlay.theme";
+import {
+ lockCtaOverlayTheme,
+ type LockCtaOverlayVariants,
+} from "./LockCtaOverlay.theme";
-export const LockCtaOverlay = () => {
- const { wrapper, overlay, ctaTextContainer, icon } = lockCtaOverlayTheme();
+const ctaTextMap = {
+ rating: "to see rating",
+ review: "to see review",
+} as const;
+
+export type LockCtaOverlayProps = LockCtaOverlayVariants & {
+ ctaType?: keyof typeof ctaTextMap;
+};
+
+export const LockCtaOverlay = ({
+ variant,
+ size = "md",
+ ctaType = "rating",
+}: LockCtaOverlayProps) => {
+ const { wrapper, overlay, ctaTextContainer, icon } = lockCtaOverlayTheme({
+ variant,
+ size,
+ });
return (
-
+ <>
+
- to see rating
+ {ctaTextMap[ctaType]}
-
+
);
};
diff --git a/src/common/components/RatingSection/RatingSection.tsx b/src/common/components/RatingSection/RatingSection.tsx
index fae3a6bf..12ebea95 100644
--- a/src/common/components/RatingSection/RatingSection.tsx
+++ b/src/common/components/RatingSection/RatingSection.tsx
@@ -3,7 +3,7 @@ import {
type RatingSectionVariants,
} from "./RatingSection.theme";
import { HeartIcon } from "@/common/components/CustomIcon";
-import { LockCtaOverlay } from "@/common/components/LockCtaOverlay/LockCtaOverlay";
+import { LockCtaOverlay } from "@/common/components/LockCtaOverlay";
import { StatItem, type StatItemProps } from "@/common/components/StatItem";
export type RatingSectionProps = RatingSectionVariants & {
From 385adbaf07fc97f833836dd64bcbc302776c2898 Mon Sep 17 00:00:00 2001
From: David Lin <13061926+DavidLHW@users.noreply.github.com>
Date: Sun, 21 Jan 2024 17:03:28 +0800
Subject: [PATCH 4/9] feat: review item component
---
src/app/components/page.tsx | 41 ++++++
.../components/ReviewItem/ReviewItem.theme.ts | 71 ++++++++++
.../components/ReviewItem/ReviewItem.tsx | 125 ++++++++++++++++++
src/common/components/ReviewItem/index.ts | 2 +
4 files changed, 239 insertions(+)
create mode 100644 src/common/components/ReviewItem/ReviewItem.theme.ts
create mode 100644 src/common/components/ReviewItem/ReviewItem.tsx
create mode 100644 src/common/components/ReviewItem/index.ts
diff --git a/src/app/components/page.tsx b/src/app/components/page.tsx
index ca6a9573..17dff613 100644
--- a/src/app/components/page.tsx
+++ b/src/app/components/page.tsx
@@ -25,6 +25,7 @@ import { Combobox } from "@/modules/reviews/Combobox";
import { exampleListCountries } from "./exampleCountryList";
import { Modal } from "@/common/components/Modal";
import Heading from "@/common/components/Heading";
+import { type Label, ReviewItem } from "@/common/components/ReviewItem";
import { Tag } from "@/common/components/Tag";
const exampleListObj = exampleListCountries.map((el) => ({
@@ -83,6 +84,40 @@ const CommandContent = () => (
);
+const review = {
+ body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor nunc a velit congue, et faucibus sapien iaculis. Quisque id felis non sapien egestas ultricies vulputate posuere quam. Vestibulum scelerisque arcu leo, sit amet interdum enim suscipit ut. Sed dolor turpis, tincidunt sed elementum at, posuere ac justo. Curabitur sem turpis, porttitor at ante sed, laoreet condimentum magna. Suspendisse ex orci, laoreet in cursus nec, rhoncus quis eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam lacinia varius quam, ut blandit quam suscipit nec. Morbi facilisis mauris erat, quis porttitor purus consequat id. Maecenas.",
+ courseCode: "COR-MGMT1302",
+ username: "Anonymous",
+ likeCount: 10,
+ createdAt: 1705745162,
+ labels: [
+ {
+ name: "Engaging",
+ typeof: "professor",
+ },
+ {
+ name: "Fair Grading",
+ typeof: "professor",
+ },
+ {
+ name: "Effective Teaching",
+ typeof: "professor",
+ },
+ {
+ name: "Interesting",
+ typeof: "course",
+ },
+ {
+ name: "Practical",
+ typeof: "course",
+ },
+ {
+ name: "Gained New Skills",
+ typeof: "course",
+ },
+ ] as Label[],
+};
+
export default function Components() {
const [isMounted, setIsMounted] = useState(false);
const { theme, setTheme } = useTheme();
@@ -480,6 +515,12 @@ export default function Components() {