Image component fixed

codelitdev · Oct 9, 2023 · 4b4f530 · 4b4f530
1 parent 11b8436
commit 4b4f530
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 70 deletions.
diff --git a/apps/web/components/public/article.tsx b/apps/web/components/public/article.tsx
@@ -48,14 +48,15 @@ const Article = (props: ArticleProps) => {
                 )}
             </header>
             {course.featuredImage && (
-                <div className="mt-4 mb-8">
-                    <Image
-                        alt={course.featuredImage.caption}
-                        src={course.featuredImage.file!}
-                        loading="eager"
-                        sizes="80vw"
-                        height={360}
-                    />
+                <div className="flex justify-center">
+                    <div className="mt-4 mb-8 w-full md:max-w-screen-md">
+                        <Image
+                            alt={course.featuredImage.caption}
+                            src={course.featuredImage.file!}
+                            loading="eager"
+                            sizes="50vw"
+                        />
+                    </div>
                 </div>
             )}
             {options.showEnrollmentArea &&

diff --git a/packages/common-widgets/src/header/widget.tsx b/packages/common-widgets/src/header/widget.tsx
@@ -17,6 +17,7 @@ interface WidgetProps {
 
 export default function Widget({ state, settings }: WidgetProps) {
     const linkClasses = "flex w-full";
+    console.log(state.siteinfo);
 
     return (
         <header
@@ -31,9 +32,9 @@ export default function Widget({ state, settings }: WidgetProps) {
                         <div className="mr-2">
                             <Image
                                 src={state.siteinfo.logo.file}
-                                height={{ xs: 32, lg: 36 }}
-                                width={{ xs: 32, lg: 36 }}
                                 borderRadius={2}
+                                width="w-[32px]"
+                                height="h-[32px]"
                             />
                         </div>
                     )}

diff --git a/packages/common-widgets/src/hero/admin-widget.tsx b/packages/common-widgets/src/hero/admin-widget.tsx
@@ -128,33 +128,40 @@ export default function AdminWidget({
                 </Form>
             </div>
             <div className="mb-4">
-                <AdminWidgetPanel title="Media">
-                    <MediaSelector
-                        title=""
-                        src={media && media.thumbnail}
-                        srcTitle={media && media.originalFileName}
-                        dispatch={dispatch}
-                        auth={auth}
-                        profile={profile}
-                        address={address}
-                        onSelection={(media: Media) => {
-                            if (media) {
-                                setMedia(media);
-                            }
-                        }}
-                        strings={{}}
-                        access="public"
-                    />
-                    <Select
-                        title="alignment"
-                        value={alignment}
-                        options={[
-                            { label: "Left", value: "left" },
-                            { label: "Right", value: "right" },
-                        ]}
-                        onChange={(value) => setAlignment(value)}
-                    />
-                </AdminWidgetPanel>
+                <Form>
+                    <AdminWidgetPanel title="Media">
+                        <FormField
+                            label="YouTube Video Link"
+                            value={youtubeLink}
+                            onChange={(e) => setYoutubeLink(e.target.value)}
+                        />
+                        <MediaSelector
+                            title=""
+                            src={media && media.thumbnail}
+                            srcTitle={media && media.originalFileName}
+                            dispatch={dispatch}
+                            auth={auth}
+                            profile={profile}
+                            address={address}
+                            onSelection={(media: Media) => {
+                                if (media) {
+                                    setMedia(media);
+                                }
+                            }}
+                            strings={{}}
+                            access="public"
+                        />
+                        <Select
+                            title="alignment"
+                            value={alignment}
+                            options={[
+                                { label: "Left", value: "left" },
+                                { label: "Right", value: "right" },
+                            ]}
+                            onChange={(value) => setAlignment(value)}
+                        />
+                    </AdminWidgetPanel>
+                </Form>
             </div>
             <div className="mb-4">
                 <AdminWidgetPanel title="Call to action">

diff --git a/packages/common-widgets/src/hero/widget.tsx b/packages/common-widgets/src/hero/widget.tsx
@@ -36,7 +36,7 @@ export default function Widget({
     return (
         <div className={`${style === "card" ? "p-4" : "p-0"}`}>
             <div
-                className={`flex gap-2 justify-between items-center p-4 flex-col ${direction}`}
+                className={`flex gap-4 justify-between items-center p-4 flex-col ${direction}`}
                 style={{
                     backgroundColor:
                         style === "card"
@@ -48,7 +48,7 @@ export default function Widget({
             >
                 {hasHeroGraphic && (
                     <div
-                        className={`sm:w-full sm:mb-2 sm:pr-0 sm:pl-0 md:w-1/2 md:mb-0 ${
+                        className={`w-full sm:mb-2 sm:pr-0 sm:pl-0 md:w-1/2 md:mb-0 ${
                             hasHeroGraphic && alignment === "right"
                                 ? "md:pl-1"
                                 : "md:pl-0"
@@ -59,20 +59,16 @@ export default function Widget({
                         }`}
                     >
                         {youtubeLink && (
-                            <div
-                                className="relative overflow-hidden"
-                                style={{
-                                    paddingBottom: "56.25%",
-                                    borderRadius: `${mediaRadius}px`,
-                                }}
-                            >
-                                <iframe
-                                    className="related left-0 top-0 w-full h-full"
-                                    src={`https://www.youtube.com/embed/${youtubeLink}`}
-                                    frameBorder="0"
-                                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                                    allowFullScreen
-                                />
+                            <div className="flex justify-center">
+                                <div className="w-full relative h-0 overflow-hidden rounded-md pb-[56.25%]">
+                                    <iframe
+                                        src={`https://www.youtube.com/embed/${youtubeLink}`}
+                                        frameBorder="0"
+                                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                                        allowFullScreen
+                                        className="absolute top-0 left-0 w-full h-full"
+                                    />
+                                </div>
                             </div>
                         )}
                         {!youtubeLink && media && media.mediaId && (
@@ -89,7 +85,7 @@ export default function Widget({
                     </div>
                 )}
                 <div
-                    className={`sm:w-full ${
+                    className={`w-full ${
                         hasHeroGraphic ? "md:w-1/2" : "md:w-full"
                     } sm:pr-0 sm:pl-0 ${
                         hasHeroGraphic && alignment === "right"

diff --git a/packages/components-library/src/chip.tsx b/packages/components-library/src/chip.tsx
@@ -10,7 +10,7 @@ const Chip = React.forwardRef(
     ({ children, style, className }: ChipProps, forwardedRef: any) => {
         return (
             <span
-                className={`text-xs text-white bg-slate-400 rounded px-2 py-1 ${className}`}
+                className={`text-xs text-slate-500 border-[1px] border-slate-500 rounded px-[4px] py-[2px] ${className}`}
                 style={{ ...style }}
             >
                 {children}

diff --git a/packages/components-library/src/image.tsx b/packages/components-library/src/image.tsx
@@ -13,10 +13,11 @@ interface ImgProps {
     width?: any;
     borderRadius?: number;
     noDefaultImage?: boolean;
+    className?: string;
 }
 
 // Copied from: https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/shimmer.js
-const shimmer = (w: number, h: number) => `
+const shimmer = (w: number | `${number}%`, h: number | "auto") => `
 <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <linearGradient id="g">
@@ -41,10 +42,12 @@ const Image = (props: ImgProps) => {
         alt,
         defaultImage,
         loading = "lazy",
-        height = 200,
         sizes = "100vw",
-        borderRadius,
+        borderRadius = "8px",
         noDefaultImage = false,
+        className = "",
+        width = "w-full",
+        height = "h-auto",
     } = props;
     const source = src || defaultImage || "/courselit_backdrop.webp";
 
@@ -54,24 +57,19 @@ const Image = (props: ImgProps) => {
 
     return (
         <div
-            className="relative overflow-hidden"
-            style={{
-                height,
-                borderRadius: borderRadius || "8px",
-            }}
+            className={`relative ${width} ${height} aspect-video overflow-hidden ${className}`}
+            style={{ borderRadius }}
         >
-            {/* @ts-ignore */}
             <NextImage
-                layout="fill"
-                objectFit="cover"
                 src={source}
                 placeholder="blur"
                 blurDataURL={`data:image/svg+xml;base64,${toBase64(
-                    shimmer(700, 475),
+                    shimmer("100%", "auto"),
                 )}`}
                 alt={alt}
                 priority={loading === "eager" ? true : false}
                 sizes={sizes}
+                layout="fill"
             />
         </div>
     );

diff --git a/packages/components-library/src/media-selector/index.tsx b/packages/components-library/src/media-selector/index.tsx
@@ -144,7 +144,7 @@ const MediaSelector = (props: MediaSelectorProps) => {
                 <Dialog2
                     title={strings.dialogTitle || "Select media"}
                     trigger={
-                        <Button component="button">
+                        <Button component="button" variant="soft">
                             {strings.buttonCaption || "Select media"}
                         </Button>
                     }

diff --git a/packages/components-library/src/styles.css b/packages/components-library/src/styles.css
@@ -7,8 +7,8 @@
         @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600;
     }
 
-    :is(ul) {
-        @apply list-disc;
+    :is(ul, ol) {
+        @apply list-disc ml-6;
     }
 
     :is(ol) {