fix tampilan html view

src/app/api/event/status/[name]/route.ts

@@ -13,7 +13,7 @@ export async function GET(
     const { name } = params;
     const { searchParams } = new URL(request.url);
     const page = searchParams.get("page");
-    const takeData = 6;
+    const takeData = 10;
     const skipData = Number(page) * takeData - takeData;
 
     const userLoginId = await funGetUserIdByToken();
@@ -51,7 +51,7 @@ export async function GET(
         take: takeData,
         skip: skipData,
         orderBy: {
-          tanggal: "asc",
+          updatedAt: "desc",
         },
         where: {
           active: true,

src/app_modules/_global/component/comp_card_box_and_background.tsx

@@ -4,7 +4,7 @@ import React from "react";
 
 /**
  * ComponentGlobal_CardStyles
- * 
+ *
  * A React component that renders a customizable card element.
  *
  * Props:
@@ -24,6 +24,7 @@ export function ComponentGlobal_CardStyles({
   height,
   color,
   onClickHandler,
+  style,
 }: {
   children: React.ReactNode;
   backgroundColor?: string;
@@ -32,11 +33,13 @@ export function ComponentGlobal_CardStyles({
   height?: string | number;
   color?: string;
   onClickHandler?: React.MouseEventHandler<HTMLDivElement>;
+  style?: React.CSSProperties;
 }) {
   return (
     <>
       <Card
         style={{
+          ...style,
           backgroundColor: backgroundColor
             ? backgroundColor
             : AccentColor.darkblue,

src/app_modules/_global/component/new/comp_V3_set_html_with_stiker.css

@@ -0,0 +1,4 @@
+.sticker-content .chat-content img {
+  max-width: 70px;
+  max-height: 70px;
+}

src/app_modules/_global/component/new/comp_V3_set_html_with_stiker.tsx

@@ -1,18 +1,21 @@
-
 export function Comp_V3_SetHtmlWithSticker({
   props,
   className,
   color,
+  style,
 }: {
   props: string;
-  className: string;
+  className?: string;
   color?: string;
+  style?: React.CSSProperties;
 }) {
   return (
     <>
-      <div className={className} style={{
+      <div
-        color: color ? color : "white"
+        className={className}
-      }} dangerouslySetInnerHTML={{ __html: props }} />
+        style={{ ...style, color: color ? color : "white" }}
+        dangerouslySetInnerHTML={{ __html: props }}
+      />
     </>
   );
 }

src/app_modules/_global/component/new/comp_set_inner_html.tsx

@@ -1,23 +1,30 @@
 import { MainColor } from "../../color";
 
-export const Comp_DangerouslySetInnerHTML= ({
+export const Comp_DangerouslySetInnerHTML = ({
   props,
   color,
+  style,
 }: {
   props: string | undefined;
   color?: string;
-}) =>  {
+  style?: React.CSSProperties;
+}) => {
+  const baseStyle: React.CSSProperties = {
+    color: color ?? MainColor.white,
+  };
+
   return (
     <>
       <div
         style={{
-          color: color ? color : MainColor.white,
+          ...baseStyle,
+          ...style,
+          // wordBreak: "break-word",
         }}
-        // className="chat-content"
         dangerouslySetInnerHTML={{
           __html: props ?? "",
         }}
       />
     </>
   );
-}
+};

src/app_modules/event/component/box_list_status.tsx

@@ -5,7 +5,7 @@ import {
   ComponentGlobal_CardLoadingOverlay,
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
-import { Group, Stack, Text, Title } from "@mantine/core";
+import { Box, Group, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_EVENT } from "../_lib/interface";
@@ -31,6 +31,11 @@ export default function ComponentEvent_BoxListStatus({
           setVisible(true);
           router.push(path + data.id);
         }}
+        // style={{
+        //   maxHeight: 200,
+        //   overflow: "hidden",
+        //   position: "relative",
+        // }}
       >
         <Stack>
           <Group w={"100%"} position="apart" grow>
@@ -43,17 +48,52 @@ export default function ComponentEvent_BoxListStatus({
               }).format(new Date(data.tanggal))}
             </Text>
           </Group>
-
+          <Text fz={"sm"} lineClamp={2}>
-          <Text c={MainColor.white} fz={"sm"} lineClamp={4}>
+            <Comp_DangerouslySetInnerHTML
-            <Comp_DangerouslySetInnerHTML props={data.deskripsi} />
+              props={data.deskripsi}
+              style={{ height: 50 }}
+            />
           </Text>
         </Stack>
-        {visible && eventId !== "" ? (
+        {visible && eventId !== "" && <ComponentGlobal_CardLoadingOverlay />}
-          <ComponentGlobal_CardLoadingOverlay />
-        ) : (
-          ""
-        )}
       </ComponentGlobal_CardStyles>
+
+      {/* <Box
+        pos="relative"
+        mah={200}
+        mx="auto"
+        p="md"
+        bg="#002860"
+        style={{
+          overflow: "hidden",
+          borderRadius: 12,
+          border: "1px solid #1346a1",
+        }}
+      >
+        <div
+          style={{
+            color: "white",
+            wordBreak: "break-word",
+          }}
+          dangerouslySetInnerHTML={{
+            __html: data.deskripsi.trim(),
+          }}
+        />
+
+
+        <Box
+        pos="absolute"
+        bottom={0}
+        left={0}
+        right={0}
+        h={50}
+        style={{
+          background:
+            "linear-gradient(to bottom, rgba(0,0,0,0) 0%, #002860 100%)", // warna fade cocokkan dengan background box
+          pointerEvents: "none",
+        }}
+      />
+      </Box> */}
     </>
   );
 }

src/app_modules/event/component/card_view/card_beranda.tsx

@@ -17,7 +17,9 @@ export function ComponentEvent_CardBeranda({ data }: { data: any }) {
 
   return (
     <>
-      <ComponentGlobal_CardStyles marginBottom={"15px"}>
+      <ComponentGlobal_CardStyles
+        marginBottom={"15px"}
+      >
         <Stack>
           <ComponentGlobal_AvatarAndUsername
             profile={data?.Author?.Profile as any}
@@ -36,15 +38,13 @@ export function ComponentEvent_CardBeranda({ data }: { data: any }) {
               <Title c={MainColor.white} order={5} lineClamp={1}>
                 {data.title}
               </Title>
-              {/* <Text align="right" fz={"sm"} lineClamp={1}>
-                {new Intl.DateTimeFormat("id-ID", {
-                  dateStyle: "medium",
-                }).format(data?.tanggal)}
-              </Text> */}
             </Group>
 
             <Text c={MainColor.white} fz={"sm"} lineClamp={4}>
-              <Comp_DangerouslySetInnerHTML props={data.deskripsi} />
+              <Comp_DangerouslySetInnerHTML
+                props={data.deskripsi}
+                style={{ height: 50 }}
+              />
             </Text>
           </Stack>
 

src/app_modules/event/component/card_view/card_riwayat.tsx

@@ -44,7 +44,10 @@ export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
             </Group>
 
             <Text fz={"sm"} lineClamp={4}>
-              <Comp_DangerouslySetInnerHTML props={data.deskripsi}/>
+              <Comp_DangerouslySetInnerHTML
+                props={data.deskripsi}
+                style={{ height: 50 }}
+              />
             </Text>
           </Stack>
 

src/app_modules/forum/component/forumku_component/forumku_view.tsx

@@ -68,6 +68,9 @@ export default function ComponentForum_ForumkuMainCardView({
               <Comp_V3_SetHtmlWithSticker
                 props={data?.diskusi}
                 className="chat-content"
+                style={{
+                  height: 100,
+                }}
               />
             </Text>
           </Box>

src/app_modules/forum/component/main_component/card_view.tsx

@@ -67,6 +67,9 @@ export default function ComponentForum_BerandaCardView({
               <Comp_V3_SetHtmlWithSticker
                 props={data?.diskusi}
                 className="chat-content"
+                style={{
+                  height: 100,
+                }}
               />
             </Text>
           </Box>