media block border made configurable

Author: Rajat

packages/page-blocks/src/blocks/media/admin-widget.tsx

@@ -16,9 +16,11 @@ import {
     Select,
     MaxWidthSelector,
     VerticalPaddingSelector,
+    Tooltip,
 } from "@courselit/components-library";
 import { isVideo } from "@courselit/utils";
 import type { Theme, ThemeStyle } from "@courselit/page-models";
+import { Help } from "@courselit/icons";
 
 interface AdminWidgetProps {
     name: string;
@@ -58,6 +60,9 @@ export default function AdminWidget({
     const [objectFit, setObjectFit] = useState<ImageObjectFit>(
         settings.objectFit || "cover",
     );
+    const [hasBorder, setHasBorder] = useState<boolean>(
+        settings.hasBorder || true,
+    );
 
     const onSettingsChanged = () =>
         onChange({
@@ -70,6 +75,7 @@ export default function AdminWidget({
             playVideoInModal,
             aspectRatio,
             objectFit,
+            hasBorder,
         });
 
     useEffect(() => {
@@ -84,6 +90,7 @@ export default function AdminWidget({
         playVideoInModal,
         aspectRatio,
         objectFit,
+        hasBorder,
     ]);
 
     return (
@@ -188,6 +195,18 @@ export default function AdminWidget({
                     }
                     onChange={setVerticalPadding}
                 />
+                <div className="flex justify-between">
+                    <div className="flex grow items-center gap-1">
+                        <p>Border</p>
+                        <Tooltip title="Media will have a border">
+                            <Help />
+                        </Tooltip>
+                    </div>
+                    <Checkbox
+                        checked={hasBorder}
+                        onChange={(value: boolean) => setHasBorder(value)}
+                    />
+                </div>
             </AdminWidgetPanel>
             <AdminWidgetPanel title="Advanced" value="advanced">
                 <CssIdField value={cssId} onChange={setCssId} />

packages/page-blocks/src/blocks/media/settings.ts

@@ -8,4 +8,5 @@ export default interface Settings extends WidgetDefaultSettings {
     playVideoInModal?: boolean;
     aspectRatio?: AspectRatio;
     objectFit?: ImageObjectFit;
+    hasBorder?: boolean;
 }

packages/page-blocks/src/blocks/media/widget.tsx

@@ -30,6 +30,7 @@ export default function Widget({
         objectFit,
         maxWidth,
         verticalPadding,
+        hasBorder = true,
     },
     state: { theme },
 }: WidgetProps<Settings>) {
@@ -44,49 +45,34 @@ export default function Widget({
     return (
         <Section theme={overiddenTheme} id={cssId}>
             <div className={`flex flex-col gap-4`}>
-                {hasHeroGraphic && (
-                    <div>
-                        <div
-                            className={clsx(
-                                "w-full text-center overflow-hidden border",
-                                twRoundedMap[mediaRadius],
-                            )}
-                            style={{
-                                width: "100%",
-                            }}
-                        >
-                            {isVideo(youtubeLink, media) ? (
-                                <VideoWithPreview
-                                    videoUrl={youtubeLink || media?.file || ""}
-                                    aspectRatio={aspectRatio}
-                                    title={media?.caption || ""}
-                                    thumbnailUrl={media?.thumbnail || ""}
-                                    modal={playVideoInModal}
-                                />
-                            ) : (
-                                <Image
-                                    src={media?.file || ""}
-                                    alt={media?.caption || ""}
-                                    borderRadius={mediaRadius}
-                                    objectFit={objectFit}
-                                />
-                            )}
-                        </div>
-                    </div>
-                )}
-                {!hasHeroGraphic && (
-                    <div
-                        className={clsx(
-                            "w-full text-center overflow-hidden border",
-                            twRoundedMap[mediaRadius],
-                        )}
-                        style={{
-                            width: "100%",
-                        }}
-                    >
-                        <Image src="" borderRadius={0} />
-                    </div>
-                )}
+                <div
+                    className={clsx(
+                        "w-full text-center overflow-hidden",
+                        hasBorder &&
+                            overiddenTheme.interactives.card.border.width,
+                        twRoundedMap[mediaRadius],
+                    )}
+                    style={{
+                        width: "100%",
+                    }}
+                >
+                    {isVideo(youtubeLink, media) ? (
+                        <VideoWithPreview
+                            videoUrl={youtubeLink || media?.file || ""}
+                            aspectRatio={aspectRatio}
+                            title={media?.caption || ""}
+                            thumbnailUrl={media?.thumbnail || ""}
+                            modal={playVideoInModal}
+                        />
+                    ) : (
+                        <Image
+                            src={media?.file || ""}
+                            alt={media?.caption || ""}
+                            borderRadius={mediaRadius}
+                            objectFit={objectFit}
+                        />
+                    )}
+                </div>
             </div>
         </Section>
     );