Fixed cards UI

rajat1saxena · rajat1saxena · commit 44eb04328574 · 2025-04-08T19:50:29.000+05:30
diff --git a/apps/web/app/(with-contexts)/(with-layout)/blog/content-card.tsx b/apps/web/app/(with-contexts)/(with-layout)/blog/content-card.tsx
@@ -1,48 +1,40 @@
-import { Card, CardContent } from "@/components/ui/card";
 import { Course } from "@courselit/common-models";
-import { Link } from "@courselit/components-library";
+import {
+    ContentCard,
+    ContentCardContent,
+    ContentCardHeader,
+    ContentCardImage,
+    Image,
+} from "@courselit/components-library";
 import { truncate } from "@ui-lib/utils";
-import Image from "next/image";
 
 export function BlogContentCard({ product }: { product: Course }) {
     return (
-        <Link href={`/blog/${product.slug}/${product.courseId}`}>
-            <Card className="overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
-                <div className="relative aspect-video">
-                    <Image
-                        src={
-                            product.featuredImage?.thumbnail ||
-                            "/courselit_backdrop_square.webp"
-                        }
-                        alt={product.title}
-                        fill
-                        className="object-cover"
-                        priority
-                    />
-                </div>
-                <CardContent className="p-4">
-                    <h3 className="text-xl font-semibold mb-3">
-                        {product.title}
-                    </h3>
-                    <div className="flex items-center justify-between text-sm text-muted-foreground">
-                        <div className="flex items-center gap-1 ascp">
-                            <Image
-                                src={
-                                    product.user?.avatar?.thumbnail ||
-                                    "/courselit_backdrop_square.webp"
-                                }
-                                alt={product.user?.name || "User Avatar"}
-                                width={24}
-                                height={24}
-                                className="rounded-full"
-                            />
-                            <span>
-                                {truncate(product.user?.name || "Unnamed", 30)}
-                            </span>
-                        </div>
+        <ContentCard href={`/blog/${product.slug}/${product.courseId}`}>
+            <ContentCardImage
+                src={product.featuredImage?.file || ""}
+                alt={product.title}
+            />
+            <ContentCardContent>
+                <ContentCardHeader>
+                    {truncate(product.title, 32)}
+                </ContentCardHeader>
+                <div className="flex items-center justify-between text-sm text-muted-foreground">
+                    <div className="flex items-center gap-1 ascp">
+                        <Image
+                            src={product.user?.avatar?.thumbnail}
+                            alt={product.user?.name || "User Avatar"}
+                            loading="lazy"
+                            className="!aspect-square rounded-full"
+                            width="w-6"
+                            height="h-6"
+                        />
+                        <span>
+                            {truncate(product.user?.name || "Unnamed", 30)}
+                        </span>
                     </div>
-                </CardContent>
-            </Card>
-        </Link>
+                </div>
+            </ContentCardContent>
+        </ContentCard>
     );
 }
diff --git a/apps/web/app/(with-contexts)/(with-layout)/communities/content-card.tsx b/apps/web/app/(with-contexts)/(with-layout)/communities/content-card.tsx
@@ -29,7 +29,7 @@ export function CommunityContentCard({
                 <div className="relative aspect-video">
                     <Image
                         src={
-                            community.featuredImage?.thumbnail ||
+                            community.featuredImage?.file ||
                             "/courselit_backdrop_square.webp"
                         }
                         alt={community.name}
diff --git a/apps/web/app/(with-contexts)/(with-layout)/products/content-card.tsx b/apps/web/app/(with-contexts)/(with-layout)/products/content-card.tsx
@@ -21,7 +21,7 @@ export function ProductContentCard({ product }: { product: Course }) {
                 <div className="relative aspect-video">
                     <Image
                         src={
-                            product.featuredImage?.thumbnail ||
+                            product.featuredImage?.file ||
                             "/courselit_backdrop_square.webp"
                         }
                         alt={product.title}
diff --git a/apps/web/app/(with-contexts)/(with-layout)/products/products-list.tsx b/apps/web/app/(with-contexts)/(with-layout)/products/products-list.tsx
@@ -9,6 +9,7 @@ import { EmptyState } from "./empty-state";
 import { Button } from "@components/ui/button";
 import { SkeletonCard, ProductCard } from "@courselit/components-library";
 import { SiteInfoContext } from "@components/contexts";
+import { truncate } from "@ui-lib/utils";
 const ITEMS_PER_PAGE = 9;
 
 export function ProductsList({
@@ -61,7 +62,9 @@ export function ProductsList({
                     : products.map((product: Course) => (
                           <ProductCard
                               key={product.courseId}
-                              product={product}
+                              product={Object.assign({}, product, {
+                                  title: truncate(product.title, 32),
+                              })}
                               siteinfo={siteinfo}
                           />
                       ))}
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/my-content/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/my-content/page.tsx
@@ -42,7 +42,6 @@ const breadcrumbs = [{ label: MY_CONTENT_HEADER, href: "#" }];
 
 export default function Page() {
     const [data, setData] = useState<ContentItem[]>([]);
-    const [dataLoaded, setDataLoaded] = useState(false);
     const [loading, setLoading] = useState(true);
     const { profile } = useContext(ProfileContext);
     const address = useContext(AddressContext);
@@ -83,7 +82,6 @@ export default function Page() {
             } catch (e: any) {
             } finally {
                 setLoading(false);
-                setDataLoaded(true);
             }
         };
 
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/products/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/products/page.tsx
@@ -66,7 +66,7 @@ function ProductCard({ product }: { product: Course }) {
     return (
         <ContentCard href={`/dashboard/product/${product.courseId}`}>
             <ContentCardImage
-                src={product.featuredImage?.thumbnail}
+                src={product.featuredImage?.file}
                 alt={product.title}
             />
             <ContentCardContent>
diff --git a/apps/web/components/admin/my-content/content-card.tsx b/apps/web/components/admin/my-content/content-card.tsx
@@ -34,7 +34,7 @@ export function MyContentCard({ item }: ContentCardProps) {
             }
         >
             <ContentCardImage
-                src={item.entity.featuredImage?.thumbnail}
+                src={item.entity.featuredImage?.file}
                 alt={item.entity.title}
             />
             <ContentCardContent>
diff --git a/apps/web/components/public/items.tsx b/apps/web/components/public/items.tsx
diff --git a/apps/web/pages/communities2.tsx b/apps/web/pages/communities2.tsx
diff --git a/packages/common-widgets/src/featured/widget.tsx b/packages/common-widgets/src/featured/widget.tsx
@@ -164,17 +164,6 @@ export default function Widget({
                                         product={course}
                                         siteinfo={state.siteinfo}
                                     />
-                                    // <div
-                                    //     key={course.courseId}
-                                    //     className="basis-full md:basis-[49.5%] lg:basis-[32.6666%] mb-6"
-                                    // >
-                                    //     <CourseItem
-                                    //         course={course}
-                                    //         siteInfo={state.siteinfo}
-                                    //         freeCostCaption={"FREE"}
-                                    //         key={index}
-                                    //     />
-                                    // </div>
                                 ))}
                             </>
                         )}
diff --git a/packages/components-library/src/product-card.tsx b/packages/components-library/src/product-card.tsx
@@ -25,7 +25,7 @@ export function ProductCard({
     return (
         <ContentCard href={`/p/${product.pageId}`}>
             <ContentCardImage
-                src={product.featuredImage?.thumbnail}
+                src={product.featuredImage?.file}
                 alt={product.title}
             />
             <ContentCardContent>
@@ -36,7 +36,7 @@ export function ProductCard({
                             src={product.user?.avatar?.thumbnail}
                             alt={product.user?.name || "User Avatar"}
                             loading="lazy"
-                            className="!aspect-square"
+                            className="!aspect-square rounded-full"
                             width="w-6"
                             height="h-6"
                         />

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ export function CommunityContentCard({`
`29`	`29`	`<div className="relative aspect-video">`
`30`	`30`	`<Image`
`31`	`31`	`src={`
`32`		`- community.featuredImage?.thumbnail \|\|`
	`32`	`+ community.featuredImage?.file \|\|`
`33`	`33`	`"/courselit_backdrop_square.webp"`
`34`	`34`	`}`
`35`	`35`	`alt={community.name}`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ export function ProductContentCard({ product }: { product: Course }) {`
`21`	`21`	`<div className="relative aspect-video">`
`22`	`22`	`<Image`
`23`	`23`	`src={`
`24`		`- product.featuredImage?.thumbnail \|\|`
	`24`	`+ product.featuredImage?.file \|\|`
`25`	`25`	`"/courselit_backdrop_square.webp"`
`26`	`26`	`}`
`27`	`27`	`alt={product.title}`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export function MyContentCard({ item }: ContentCardProps) {`
`34`	`34`	`}`
`35`	`35`	`>`
`36`	`36`	`<ContentCardImage`
`37`		`- src={item.entity.featuredImage?.thumbnail}`
	`37`	`+ src={item.entity.featuredImage?.file}`
`38`	`38`	`alt={item.entity.title}`
`39`	`39`	`/>`
`40`	`40`	`<ContentCardContent>`