Skip to content

Commit 65111af

Browse files
rajat1saxenarajat1saxena
committed
fixed border style not working in cards
1 parent 6b69e9d commit 65111af

File tree

3 files changed

+50
-133
lines changed

3 files changed

+50
-133
lines changed

‎apps/web/components/admin/page-editor/theme-editor/interactive-selector.tsx‎

Lines changed: 38 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { Input } from "@/components/ui/input";
1010
import { Label } from "@/components/ui/label";
1111
import { cn } from "@/lib/shadcn-utils";
1212
import { Info } from "lucide-react";
13-
import { ThemeStyle } from "@courselit/page-models";
13+
import { Border, ThemeStyle } from "@courselit/page-models";
1414
import {
1515
paddingOptions,
1616
borderWidthOptions,
@@ -36,7 +36,6 @@ import {
3636
} from "@/components/ui/dialog";
3737

3838
interface InteractiveSelectorProps {
39-
title: string;
4039
type: "button" | "link" | "card" | "input";
4140
theme: ThemeStyle;
4241
onChange: (theme: ThemeStyle) => void;
@@ -50,7 +49,6 @@ const interactiveDisplayNames: Record<string, string> = {
5049
} as const;
5150

5251
function InteractiveSelector({
53-
title,
5452
type,
5553
theme,
5654
onChange,
@@ -233,113 +231,9 @@ function InteractiveSelector({
233231
</SelectContent>
234232
</Select>
235233
</div>
236-
{/* <div className="space-y-2">
237-
<Label>Border Style</Label>
238-
<Select
239-
value={value?.border?.style || ""}
240-
onValueChange={(newValue) => {
241-
onChange({
242-
...theme,
243-
interactives: {
244-
...theme.interactives,
245-
[type]: {
246-
...value,
247-
border: {
248-
...value?.border,
249-
style: newValue,
250-
},
251-
},
252-
},
253-
});
254-
}}
255-
>
256-
<SelectTrigger>
257-
<SelectValue placeholder="Select style" />
258-
</SelectTrigger>
259-
<SelectContent>
260-
{borderStyleOptions.map((option) => (
261-
<SelectItem key={option.value} value={option.value}>
262-
{option.label}
263-
</SelectItem>
264-
))}
265-
</SelectContent>
266-
</Select>
267-
</div> */}
268234
</div>
269235
);
270236

271-
// const renderDisabledConfig = () => (
272-
// <div className="space-y-4">
273-
// <Label className="text-sm font-medium">Disabled State</Label>
274-
// <div className="grid grid-cols-2 gap-4">
275-
// <div className="space-y-2">
276-
// <Label>Opacity</Label>
277-
// <Select
278-
// value={value?.disabled?.opacity || ""}
279-
// onValueChange={(newValue) => {
280-
// onChange({
281-
// ...theme,
282-
// interactives: {
283-
// ...theme.interactives,
284-
// [type]: {
285-
// ...value,
286-
// disabled: {
287-
// ...value?.disabled,
288-
// opacity: newValue,
289-
// },
290-
// },
291-
// },
292-
// });
293-
// }}
294-
// >
295-
// <SelectTrigger>
296-
// <SelectValue placeholder="Select opacity" />
297-
// </SelectTrigger>
298-
// <SelectContent>
299-
// {opacityOptions.map((option) => (
300-
// <SelectItem key={option.value} value={option.value}>
301-
// {option.label}
302-
// </SelectItem>
303-
// ))}
304-
// </SelectContent>
305-
// </Select>
306-
// </div>
307-
// <div className="space-y-2">
308-
// <Label>Cursor</Label>
309-
// <Select
310-
// value={value?.disabled?.cursor || ""}
311-
// onValueChange={(newValue) => {
312-
// onChange({
313-
// ...theme,
314-
// interactives: {
315-
// ...theme.interactives,
316-
// [type]: {
317-
// ...value,
318-
// disabled: {
319-
// ...value?.disabled,
320-
// cursor: newValue,
321-
// },
322-
// },
323-
// },
324-
// });
325-
// }}
326-
// >
327-
// <SelectTrigger>
328-
// <SelectValue placeholder="Select cursor" />
329-
// </SelectTrigger>
330-
// <SelectContent>
331-
// {cursorOptions.map((option) => (
332-
// <SelectItem key={option.value} value={option.value}>
333-
// {option.label}
334-
// </SelectItem>
335-
// ))}
336-
// </SelectContent>
337-
// </Select>
338-
// </div>
339-
// </div>
340-
// </div>
341-
// );
342-
343237
const renderHoverInput = () => (
344238
<div className="space-y-2">
345239
<Label>Hover Effect</Label>
@@ -675,7 +569,7 @@ function InteractiveSelector({
675569
...value,
676570
border: {
677571
...value?.border,
678-
radius: newValue,
572+
radius: newValue as Border["radius"],
679573
},
680574
},
681575
},
@@ -788,7 +682,7 @@ function InteractiveSelector({
788682
...value,
789683
border: {
790684
...value?.border,
791-
style: newValue,
685+
style: newValue as Border["style"],
792686
},
793687
},
794688
},
@@ -812,6 +706,41 @@ function InteractiveSelector({
812706
</div>
813707
</div>
814708
<div className="grid grid-cols-2 gap-4">
709+
<div className="space-y-2">
710+
<Label>Border Width</Label>
711+
<Select
712+
value={value?.border?.width || ""}
713+
onValueChange={(newValue) => {
714+
onChange({
715+
...theme,
716+
interactives: {
717+
...theme.interactives,
718+
[type]: {
719+
...value,
720+
border: {
721+
...value?.border,
722+
width: newValue as Border["width"],
723+
},
724+
},
725+
},
726+
});
727+
}}
728+
>
729+
<SelectTrigger>
730+
<SelectValue placeholder="Select width" />
731+
</SelectTrigger>
732+
<SelectContent>
733+
{borderWidthOptions.map((option) => (
734+
<SelectItem
735+
key={option.value}
736+
value={option.value}
737+
>
738+
{option.label}
739+
</SelectItem>
740+
))}
741+
</SelectContent>
742+
</Select>
743+
</div>
815744
<div className="space-y-2">
816745
<Label>Shadow</Label>
817746
<Select

‎apps/web/components/admin/page-editor/theme-editor/tailwind-to-human-readable.ts‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -48,29 +48,19 @@ export const paddingOptions = {
4848

4949
export const borderWidthOptions: TailwindOption[] = [
5050
{ label: "None", value: "border-0" },
51-
{ label: "Thin", value: "border-1" },
52-
{ label: "Light", value: "border-2" },
53-
{ label: "Medium", value: "border-3" },
54-
{ label: "Regular", value: "border-4" },
55-
{ label: "Heavy", value: "border-5" },
56-
{ label: "Extra Heavy", value: "border-6" },
57-
{ label: "2X Heavy", value: "border-7" },
58-
{ label: "3X Heavy", value: "border-8" },
59-
{ label: "4X Heavy", value: "border-9" },
60-
{ label: "5X Heavy", value: "border-10" },
51+
{ label: "Light", value: "border" },
52+
{ label: "Medium", value: "border-2" },
53+
{ label: "Heavy", value: "border-4" },
54+
{ label: "Extra Heavy", value: "border-8" },
6155
];
6256

6357
export const borderStyleOptions: TailwindOption[] = [
64-
{ label: "Solid", value: "solid" },
65-
{ label: "Dashed", value: "dashed" },
66-
{ label: "Dotted", value: "dotted" },
67-
{ label: "Double", value: "double" },
68-
{ label: "Groove", value: "groove" },
69-
{ label: "Ridge", value: "ridge" },
70-
{ label: "Inset", value: "inset" },
71-
{ label: "Outset", value: "outset" },
72-
{ label: "Hidden", value: "hidden" },
73-
{ label: "None", value: "none" },
58+
{ label: "None", value: "border-none" },
59+
{ label: "Solid", value: "border-solid" },
60+
{ label: "Dashed", value: "border-dashed" },
61+
{ label: "Dotted", value: "border-dotted" },
62+
{ label: "Double", value: "border-double" },
63+
{ label: "Hidden", value: "border-hidden" },
7464
];
7565

7666
export const borderRadiusOptions: TailwindOption[] = [

‎packages/page-primitives/src/card.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,8 @@ export const PageCard: React.FC<PageCardProps> = ({
5656
return (
5757
<div
5858
style={{
59-
border: `1px solid ${theme?.colors?.border}`,
60-
backgroundColor: theme?.colors?.background
61-
? theme?.colors?.background
62-
: undefined,
59+
borderColor: theme?.colors?.border,
60+
backgroundColor: theme?.colors?.background || undefined,
6361
}}
6462
className={classes}
6563
{...props}

0 commit comments

Comments
 (0)