Skip to content

Commit ebc2201

Browse files
author
Rajat
committed
UI improvements for background component
1 parent fd6e2f8 commit ebc2201

4 files changed

Lines changed: 246 additions & 44 deletions

File tree

‎apps/web/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
"lucide-react": "^0.475.0",
6060
"mongodb": "^6.15.0",
6161
"mongoose": "^8.13.1",
62-
"next": "15.5.3",
62+
"next": "^15.5.4",
6363
"next-auth": "^5.0.0-beta.29",
6464
"next-themes": "^0.4.6",
6565
"nodemailer": "^6.7.2",
@@ -88,7 +88,7 @@
8888
"@types/pug": "^2.0.6",
8989
"@types/react": "19.1.13",
9090
"eslint": "8.48.0",
91-
"eslint-config-next": "15.5.3",
91+
"eslint-config-next": "^15.5.4",
9292
"eslint-config-prettier": "^9.0.0",
9393
"postcss": "^8.4.27",
9494
"prettier": "^3.0.2",

‎packages/components-library/src/color-selector.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ interface ColorSelectorProps
3232
tooltip?: string;
3333
className?: string;
3434
allowReset?: boolean;
35+
description?: string;
3536
}
3637

3738
export default function ColorSelector({
@@ -43,6 +44,7 @@ export default function ColorSelector({
4344
size,
4445
className,
4546
allowReset = true,
47+
description,
4648
}: ColorSelectorProps) {
4749
const [localValue, setLocalValue] = React.useState(value);
4850

@@ -76,12 +78,19 @@ export default function ColorSelector({
7678
<div
7779
className={cn(colorSelectorVariants({ variant, size, className }))}
7880
>
79-
<div className="flex grow items-center gap-1">
80-
<p className="text-sm font-medium leading-none">{title}</p>
81-
{tooltip && (
82-
<Tooltip title={tooltip}>
83-
<Help className="h-4 w-4 text-muted-foreground" />
84-
</Tooltip>
81+
<div className="flex grow flex-col gap-1">
82+
<div className="flex items-center gap-1">
83+
<p className="text-sm font-medium leading-none">{title}</p>
84+
{tooltip && (
85+
<Tooltip title={tooltip}>
86+
<Help className="h-4 w-4 text-muted-foreground" />
87+
</Tooltip>
88+
)}
89+
</div>
90+
{description && (
91+
<p className="text-xs text-muted-foreground">
92+
{description}
93+
</p>
8594
)}
8695
</div>
8796
<div className="flex items-center gap-2">

‎packages/components-library/src/section-background-panel.tsx‎

Lines changed: 86 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
} from "./components/ui/accordion";
2020
import MediaSelector from "./media-selector";
2121
import { Address, Media, Profile } from "@courselit/common-models";
22+
import { Lightbulb } from "lucide-react";
2223

2324
interface SectionBackgroundPanelProps {
2425
value: SectionBackground;
@@ -60,8 +61,15 @@ const BACKGROUND_REPEAT_OPTIONS: { label: string; value: BackgroundRepeat }[] =
6061
export function SectionBackgroundPanel({
6162
value = {
6263
type: "color",
63-
backgroundColor: "transparent",
64+
backgroundColor: "#ff0000",
6465
backgroundColorDark: undefined,
66+
blur: 5,
67+
overlay: {
68+
color: "#ff0000",
69+
colorDark: undefined,
70+
opacity: 3,
71+
blendMode: "normal",
72+
},
6573
},
6674
onChange,
6775
className,
@@ -107,7 +115,7 @@ export function SectionBackgroundPanel({
107115
<div className={className}>
108116
<Accordion type="single" collapsible className="w-full">
109117
<AccordionItem value="background" className="border-none">
110-
<AccordionTrigger className="py-2 text-sm font-medium hover:no-underline">
118+
<AccordionTrigger className="py-2 font-medium hover:no-underline">
111119
Background
112120
</AccordionTrigger>
113121
<AccordionContent className="space-y-6 pt-2">
@@ -125,7 +133,7 @@ export function SectionBackgroundPanel({
125133
Image
126134
</TabsTrigger>
127135
<TabsTrigger value="gradient">
128-
Gradient
136+
Pattern
129137
</TabsTrigger>
130138
</TabsList>
131139

@@ -134,7 +142,7 @@ export function SectionBackgroundPanel({
134142
className="space-y-4 mt-6"
135143
>
136144
<ColorSelector
137-
title="Background Color"
145+
title="Color"
138146
value={value.backgroundColor || ""}
139147
onChange={(color) =>
140148
handleColorBackgroundChange({
@@ -152,6 +160,7 @@ export function SectionBackgroundPanel({
152160
})
153161
}
154162
allowReset={true}
163+
description="Optional background color for dark mode"
155164
/>
156165
</TabsContent>
157166

@@ -251,6 +260,7 @@ export function SectionBackgroundPanel({
251260
})
252261
}
253262
allowReset={true}
263+
description="Optional overlay color for dark mode"
254264
/>
255265
<PageBuilderSlider
256266
title="Opacity"
@@ -366,7 +376,15 @@ export function SectionBackgroundPanel({
366376
{/* Mask Image */}
367377
<div className="space-y-2">
368378
<Label htmlFor="mask-image">
369-
Mask Image (Optional)
379+
Mask Image{" "}
380+
<a
381+
href="https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image"
382+
target="_blank"
383+
rel="noopener noreferrer"
384+
className="text-muted-foreground text-xs underline"
385+
>
386+
Learn more
387+
</a>
370388
</Label>
371389
<Input
372390
id="mask-image"
@@ -384,7 +402,7 @@ export function SectionBackgroundPanel({
384402
},
385403
)
386404
}
387-
placeholder="https://example.com/mask.svg"
405+
placeholder="linear-gradient(black, transparent)"
388406
/>
389407
</div>
390408
</AccordionContent>
@@ -396,10 +414,32 @@ export function SectionBackgroundPanel({
396414
value="gradient"
397415
className="space-y-4 mt-6"
398416
>
417+
<div>
418+
<p className="text-xs text-muted-foreground">
419+
For advanced users who know CSS.
420+
</p>
421+
{/* <p className="text-xs text-muted-foreground">
422+
You can find patterns on sites like {" "}
423+
<a
424+
href="https://patterncraft.fun"
425+
target="_blank"
426+
rel="noopener noreferrer"
427+
className="underline"
428+
>
429+
PatternCraft</a> and {" "}
430+
<a
431+
href="https://magicpattern.design/"
432+
target="_blank"
433+
rel="noopener noreferrer"
434+
className="underline"
435+
>
436+
MagicPattern</a>.
437+
</p> */}
438+
</div>
399439
{/* Gradient CSS */}
400440
<div className="space-y-2">
401441
<Label htmlFor="gradient-css">
402-
Gradient CSS
442+
Background Image
403443
</Label>
404444
<Input
405445
id="gradient-css"
@@ -412,16 +452,16 @@ export function SectionBackgroundPanel({
412452
}
413453
placeholder="linear-gradient(45deg, #ff0000, #0000ff)"
414454
/>
415-
<p className="text-xs text-muted-foreground">
455+
{/* <p className="text-xs text-muted-foreground">
416456
Enter CSS gradient syntax (e.g.,
417457
linear-gradient, radial-gradient)
418-
</p>
458+
</p> */}
419459
</div>
420460

421461
{/* Dark Mode Gradient */}
422462
<div className="space-y-2">
423463
<Label htmlFor="gradient-css-dark">
424-
Dark Mode Gradient (Optional)
464+
Dark Mode Background Image
425465
</Label>
426466
<Input
427467
id="gradient-css-dark"
@@ -523,8 +563,15 @@ export function SectionBackgroundPanel({
523563
{/* Mask Image */}
524564
<div className="space-y-2">
525565
<Label htmlFor="gradient-mask-image">
526-
Mask Image CSS
527-
(Optional)
566+
Mask Image{" "}
567+
<a
568+
href="https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image"
569+
target="_blank"
570+
rel="noopener noreferrer"
571+
className="text-muted-foreground text-xs underline"
572+
>
573+
Learn more
574+
</a>
528575
</Label>
529576
<Input
530577
id="gradient-mask-image"
@@ -543,12 +590,38 @@ export function SectionBackgroundPanel({
543590
} as any,
544591
)
545592
}
546-
placeholder="clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);"
593+
placeholder="linear-gradient(black, transparent)"
547594
/>
548595
</div>
549596
</AccordionContent>
550597
</AccordionItem>
551598
</Accordion>
599+
600+
<div className="flex items-center gap-1">
601+
<Lightbulb className="h-8 w-8 text-muted-foreground" />
602+
<p className="text-xs text-muted-foreground">
603+
You can find cool patterns on sites
604+
like{" "}
605+
<a
606+
href="https://patterncraft.fun"
607+
target="_blank"
608+
rel="noopener noreferrer"
609+
className="underline"
610+
>
611+
PatternCraft
612+
</a>{" "}
613+
and{" "}
614+
<a
615+
href="https://magicpattern.design/"
616+
target="_blank"
617+
rel="noopener noreferrer"
618+
className="underline"
619+
>
620+
MagicPattern
621+
</a>
622+
.
623+
</p>
624+
</div>
552625
</TabsContent>
553626
</Tabs>
554627
</div>

0 commit comments

Comments
 (0)