hero card layout; (untested) hero layouts

Author: Rajat

apps/web/components/public/base-layout/template/index.tsx

@@ -73,7 +73,7 @@ const Template = (props: TemplateProps) => {
     );
 
     return (
-        <div className="flex flex-col courselit-theme">
+        <div className="flex flex-col bg-background courselit-theme">
             {header && (
                 <EditableWidget
                     item={header}

packages/page-blocks/src/blocks/header/admin-widget/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import Settings, { Link } from "../settings";
+import Settings, { Layout, Link } from "../settings";
 import LinkEditor from "./link-editor";
 import {
     AdminWidgetPanel,
@@ -57,6 +57,10 @@ export default function AdminWidget({
     const [showGithubStars, setShowGithubStars] = useState<boolean | undefined>(
         settings.showGithubStars || false,
     );
+    const [layout, setLayout] = useState<Layout>(settings.layout || "fixed");
+    const [backdropBlur, setBackdropBlur] = useState<boolean | undefined>(
+        settings.backdropBlur || false,
+    );
 
     useEffect(() => {
         onChange({
@@ -68,6 +72,8 @@ export default function AdminWidget({
             maxWidth,
             githubRepo,
             showGithubStars,
+            layout,
+            backdropBlur,
         });
     }, [
         links,
@@ -78,6 +84,8 @@ export default function AdminWidget({
         maxWidth,
         githubRepo,
         showGithubStars,
+        layout,
+        backdropBlur,
     ]);
 
     const onLinkChanged = (index: number, link: Link) => {
@@ -151,6 +159,15 @@ export default function AdminWidget({
                 </div>
             </AdminWidgetPanel>
             <AdminWidgetPanel title="Design" value="design">
+                <Select
+                    title="Layout"
+                    value={layout}
+                    options={[
+                        { label: "Fixed", value: "fixed" },
+                        { label: "Floating", value: "floating" },
+                    ]}
+                    onChange={(value: Layout) => setLayout(value)}
+                />
                 <Select
                     title="Link font weight"
                     value={linkFontWeight}
@@ -186,6 +203,18 @@ export default function AdminWidget({
                     value={maxWidth || theme.theme.structure.page.width}
                     onChange={setMaxWidth}
                 />
+                <div className="flex justify-between">
+                    <div className="flex grow items-center gap-1">
+                        <p>Backdrop blur</p>
+                        <Tooltip title="Applies a backdrop blur effect to the header background">
+                            <Help />
+                        </Tooltip>
+                    </div>
+                    <Checkbox
+                        checked={backdropBlur}
+                        onChange={(value: boolean) => setBackdropBlur(value)}
+                    />
+                </div>
             </AdminWidgetPanel>
             <AdminWidgetPanel title="Other settings" value="other-settings">
                 <div className="flex justify-between">

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

@@ -1,5 +1,7 @@
 import { WidgetDefaultSettings } from "@courselit/common-models";
 
+export type Layout = "fixed" | "floating";
+
 export interface Link {
     label: string;
     href: string;
@@ -10,15 +12,12 @@ export interface Link {
 
 export default interface Settings extends WidgetDefaultSettings {
     links: Link[];
-    // appBarBackground: string;
-    // logoColor: string;
-    // loginBtnColor: string;
-    // loginBtnBgColor: string;
-    // linkColor: string;
     linkAlignment: "left" | "right" | "center";
     showLoginControl: boolean;
     linkFontWeight: "font-normal" | "font-light" | "font-bold";
     spacingBetweenLinks: number;
     githubRepo?: string;
     showGithubStars?: boolean;
+    layout?: Layout;
+    backdropBlur?: boolean;
 }