@admin-layout/demo-tailwind-browser 10.1.1-alpha.22 → 10.1.1-alpha.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/ThemeShowCase/FeaturesSection.d.ts +2 -0
- package/lib/components/ThemeShowCase/FeaturesSection.d.ts.map +1 -0
- package/lib/components/ThemeShowCase/FeaturesSection.js +64 -0
- package/lib/components/ThemeShowCase/FeaturesSection.js.map +1 -0
- package/lib/components/ThemeShowCase/HeroSection.d.ts +2 -0
- package/lib/components/ThemeShowCase/HeroSection.d.ts.map +1 -0
- package/lib/components/ThemeShowCase/HeroSection.js +92 -0
- package/lib/components/ThemeShowCase/HeroSection.js.map +1 -0
- package/lib/components/ThemeShowCase/ThemeShowcase.d.ts +2 -0
- package/lib/components/ThemeShowCase/ThemeShowcase.d.ts.map +1 -0
- package/lib/components/ThemeShowCase/ThemeShowcase.js +188 -0
- package/lib/components/ThemeShowCase/ThemeShowcase.js.map +1 -0
- package/lib/components/ThemeShowCase/index.d.ts +3 -0
- package/lib/components/ThemeShowCase/index.d.ts.map +1 -0
- package/lib/components/ThemeShowCase/index.js +6 -0
- package/lib/components/ThemeShowCase/index.js.map +1 -0
- package/lib/compute.js +4 -4
- package/lib/compute.js.map +1 -1
- package/lib/routes.json +5 -5
- package/package.json +4 -4
- package/lib/components/ThemeExample.js +0 -436
- package/lib/components/ThemeExample.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FeaturesSection.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeShowCase/FeaturesSection.tsx"],"names":[],"mappings":"AAoCA,wBAAgB,eAAe,4CAgC9B"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import {jsx,jsxs}from'react/jsx-runtime';import {Palette,Zap,Code,Shield,Smartphone,Globe}from'lucide-react';import {Card,CardHeader,CardTitle,CardContent}from'@admin-layout/tailwind-ui';const features = [{
|
|
2
|
+
icon: Palette,
|
|
3
|
+
title: 'Multiple Themes',
|
|
4
|
+
description: 'Choose from Airbnb, Slack, GitHub, Spotify, and more professionally designed themes.'
|
|
5
|
+
}, {
|
|
6
|
+
icon: Zap,
|
|
7
|
+
title: 'Instant Switching',
|
|
8
|
+
description: 'Change themes instantly with CSS custom properties. No page reload required.'
|
|
9
|
+
}, {
|
|
10
|
+
icon: Code,
|
|
11
|
+
title: 'Developer Friendly',
|
|
12
|
+
description: 'Built with Tailwind CSS best practices. Easy to customize and extend.'
|
|
13
|
+
}, {
|
|
14
|
+
icon: Shield,
|
|
15
|
+
title: 'Production Ready',
|
|
16
|
+
description: 'Optimized for performance with minimal bundle size and fast loading.'
|
|
17
|
+
}, {
|
|
18
|
+
icon: Smartphone,
|
|
19
|
+
title: 'Responsive Design',
|
|
20
|
+
description: 'All themes are fully responsive and work perfectly on mobile devices.'
|
|
21
|
+
}, {
|
|
22
|
+
icon: Globe,
|
|
23
|
+
title: 'Modern Standards',
|
|
24
|
+
description: 'Built with modern web standards and accessibility in mind.'
|
|
25
|
+
}];
|
|
26
|
+
function FeaturesSection() {
|
|
27
|
+
return jsx("section", {
|
|
28
|
+
className: "py-20 px-4",
|
|
29
|
+
children: jsxs("div", {
|
|
30
|
+
className: "container mx-auto",
|
|
31
|
+
children: [jsxs("div", {
|
|
32
|
+
className: "text-center max-w-3xl mx-auto mb-16",
|
|
33
|
+
children: [jsx("h2", {
|
|
34
|
+
className: "text-3xl md:text-4xl font-bold mb-4",
|
|
35
|
+
children: "Why Choose Our Theme System?"
|
|
36
|
+
}), jsx("p", {
|
|
37
|
+
className: "text-lg text-muted-foreground",
|
|
38
|
+
children: "Built with the latest technologies and best practices for modern web development."
|
|
39
|
+
})]
|
|
40
|
+
}), jsx("div", {
|
|
41
|
+
className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
|
|
42
|
+
children: features.map((feature, index) => jsxs(Card, {
|
|
43
|
+
className: "group hover:shadow-lg transition-all duration-200 border-border/50",
|
|
44
|
+
children: [jsxs(CardHeader, {
|
|
45
|
+
children: [jsx("div", {
|
|
46
|
+
className: "h-12 w-12 rounded-lg bg-gradient-primary flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-200",
|
|
47
|
+
children: jsx(feature.icon, {
|
|
48
|
+
className: "h-6 w-6 text-primary-foreground"
|
|
49
|
+
})
|
|
50
|
+
}), jsx(CardTitle, {
|
|
51
|
+
className: "text-xl",
|
|
52
|
+
children: feature.title
|
|
53
|
+
})]
|
|
54
|
+
}), jsx(CardContent, {
|
|
55
|
+
children: jsx("p", {
|
|
56
|
+
className: "text-muted-foreground",
|
|
57
|
+
children: feature.description
|
|
58
|
+
})
|
|
59
|
+
})]
|
|
60
|
+
}, index))
|
|
61
|
+
})]
|
|
62
|
+
})
|
|
63
|
+
});
|
|
64
|
+
}export{FeaturesSection};//# sourceMappingURL=FeaturesSection.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FeaturesSection.js","sources":["../../../src/components/ThemeShowCase/FeaturesSection.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"2LAGA,MAAM,QAAQ,GAAG,CAAA;AACb,EAAA,IAAA,EAAA,OAAA;AACI,EAAA,KAAA,EAAA,iBAAa;AACb,EAAA,WAAK,EAAE;AACP,CAAA,EAAA;AACH,EAAA,IAAA,EAAA,GAAA;AACD,EAAA,KAAA,EAAA,mBAAA;AACI,EAAA,aAAS;AACT,CAAA,EAAA;AACA,EAAA,IAAA,EAAA,IAAA;AACH,EAAA,KAAA,EAAA,oBAAA;AACD,EAAA,WAAA,EAAA;AACI,CAAA,EAAA;AACA,EAAA,IAAA,EAAA;AACA,EAAA,KAAA,EAAA,kBAAoF;AACvF,EAAA,WAAA,EAAA;AACD,CAAA,EAAA;AACI,EAAA,IAAA,EAAA,UAAY;AACZ,EAAA,KAAA,EAAA,mBAAyB;AACzB,EAAA,WAAA,EAAA;AACH,CAAA,EAAA;AACD,EAAA,IAAA,EAAA,KAAA;AACI,EAAA,KAAA,EAAA,kBAAgB;AAChB,EAAA,WAAK,EAAE;AACP,CAAA,CAAA;AACH,SAAA,eAAA,GAAA;AACD,EAAA,OAAAA,GAAA,CAAA,SAAA,EAAA;AACI,IAAA,WAAW,YAAA;AACX,IAAA,QAAA,MAAyB,CAAA,KAAA,EAAA;AACzB,MAAA,SAAA,EAAA,mBAAyE;AAC5E,MAAA,QAAA,EAAA,CAAAC,IAAA,CAAA,KAAA,EAAA;QACH,SAAA,EAAA,qCAAA;AAEF,gBAAgB,EAAe,CAAAD,GAAA,CAAA,IAAA,EAAA;UACpB,gDAEC;AA6BZ,UAAC,QAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeroSection.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeShowCase/HeroSection.tsx"],"names":[],"mappings":"AAKA,wBAAgB,WAAW,4CAiE1B"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import {jsx,jsxs}from'react/jsx-runtime';import {ArrowRight,Star,Users,Zap}from'lucide-react';import {Badge,Button,Card,CardContent}from'@admin-layout/tailwind-ui';function HeroSection() {
|
|
2
|
+
return jsx("section", {
|
|
3
|
+
className: "py-20 px-4 bg-gradient-secondary",
|
|
4
|
+
children: jsxs("div", {
|
|
5
|
+
className: "container mx-auto text-center",
|
|
6
|
+
children: [jsxs("div", {
|
|
7
|
+
className: "max-w-4xl mx-auto space-y-8",
|
|
8
|
+
children: [jsx(Badge, {
|
|
9
|
+
variant: "secondary",
|
|
10
|
+
className: "mb-4",
|
|
11
|
+
children: "\u2728 Multi-Theme Website Template"
|
|
12
|
+
}), jsxs("h1", {
|
|
13
|
+
className: "text-4xl md:text-6xl font-bold tracking-tight",
|
|
14
|
+
children: ["Beautiful Themes for", jsx("span", {
|
|
15
|
+
className: "bg-gradient-brand bg-clip-text text-transparent block",
|
|
16
|
+
children: "Every Brand"
|
|
17
|
+
})]
|
|
18
|
+
}), jsx("p", {
|
|
19
|
+
className: "text-xl text-muted-foreground max-w-2xl mx-auto",
|
|
20
|
+
children: "Experience seamless theme switching with our professionally crafted design system. From Airbnb's warmth to Spotify's energy, find the perfect look for your brand."
|
|
21
|
+
}), jsxs("div", {
|
|
22
|
+
className: "flex flex-col sm:flex-row gap-4 justify-center",
|
|
23
|
+
children: [jsxs(Button, {
|
|
24
|
+
size: "lg",
|
|
25
|
+
className: "gap-2",
|
|
26
|
+
children: ["Get Started ", jsx(ArrowRight, {
|
|
27
|
+
className: "h-4 w-4"
|
|
28
|
+
})]
|
|
29
|
+
}), jsx(Button, {
|
|
30
|
+
size: "lg",
|
|
31
|
+
variant: "outline",
|
|
32
|
+
children: "View Themes"
|
|
33
|
+
})]
|
|
34
|
+
})]
|
|
35
|
+
}), jsxs("div", {
|
|
36
|
+
className: "grid grid-cols-1 md:grid-cols-3 gap-6 mt-20 max-w-3xl mx-auto",
|
|
37
|
+
children: [jsx(Card, {
|
|
38
|
+
className: "border-none bg-background/50 backdrop-blur",
|
|
39
|
+
children: jsxs(CardContent, {
|
|
40
|
+
className: "p-6 text-center",
|
|
41
|
+
children: [jsx("div", {
|
|
42
|
+
className: "h-12 w-12 rounded-full bg-gradient-primary mx-auto mb-4 flex items-center justify-center",
|
|
43
|
+
children: jsx(Star, {
|
|
44
|
+
className: "h-6 w-6 text-primary-foreground"
|
|
45
|
+
})
|
|
46
|
+
}), jsx("h3", {
|
|
47
|
+
className: "text-2xl font-bold",
|
|
48
|
+
children: "5"
|
|
49
|
+
}), jsx("p", {
|
|
50
|
+
className: "text-muted-foreground",
|
|
51
|
+
children: "Premium Themes"
|
|
52
|
+
})]
|
|
53
|
+
})
|
|
54
|
+
}), jsx(Card, {
|
|
55
|
+
className: "border-none bg-background/50 backdrop-blur",
|
|
56
|
+
children: jsxs(CardContent, {
|
|
57
|
+
className: "p-6 text-center",
|
|
58
|
+
children: [jsx("div", {
|
|
59
|
+
className: "h-12 w-12 rounded-full bg-gradient-primary mx-auto mb-4 flex items-center justify-center",
|
|
60
|
+
children: jsx(Users, {
|
|
61
|
+
className: "h-6 w-6 text-primary-foreground"
|
|
62
|
+
})
|
|
63
|
+
}), jsx("h3", {
|
|
64
|
+
className: "text-2xl font-bold",
|
|
65
|
+
children: "10K+"
|
|
66
|
+
}), jsx("p", {
|
|
67
|
+
className: "text-muted-foreground",
|
|
68
|
+
children: "Happy Users"
|
|
69
|
+
})]
|
|
70
|
+
})
|
|
71
|
+
}), jsx(Card, {
|
|
72
|
+
className: "border-none bg-background/50 backdrop-blur",
|
|
73
|
+
children: jsxs(CardContent, {
|
|
74
|
+
className: "p-6 text-center",
|
|
75
|
+
children: [jsx("div", {
|
|
76
|
+
className: "h-12 w-12 rounded-full bg-gradient-primary mx-auto mb-4 flex items-center justify-center",
|
|
77
|
+
children: jsx(Zap, {
|
|
78
|
+
className: "h-6 w-6 text-primary-foreground"
|
|
79
|
+
})
|
|
80
|
+
}), jsx("h3", {
|
|
81
|
+
className: "text-2xl font-bold",
|
|
82
|
+
children: "0.1s"
|
|
83
|
+
}), jsx("p", {
|
|
84
|
+
className: "text-muted-foreground",
|
|
85
|
+
children: "Theme Switch"
|
|
86
|
+
})]
|
|
87
|
+
})
|
|
88
|
+
})]
|
|
89
|
+
})]
|
|
90
|
+
})
|
|
91
|
+
});
|
|
92
|
+
}export{HeroSection};//# sourceMappingURL=HeroSection.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeroSection.js","sources":["../../../src/components/ThemeShowCase/HeroSection.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"6KAKgB,WAAW,GAAA;SAChBA;AAgEX,IAAC,SAAA,EAAA,kCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeShowcase.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeShowCase/ThemeShowcase.tsx"],"names":[],"mappings":"AAmCA,wBAAgB,aAAa,4CAiL5B"}
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
import {jsx,jsxs}from'react/jsx-runtime';import {Palette,Code,Eye,Check}from'lucide-react';import {Card,CardHeader,CardTitle,CardContent,Label,Input,Button,Badge}from'@admin-layout/tailwind-ui';// import { useTheme, Theme } from '@/contexts/ThemeContext';
|
|
2
|
+
const themeData = {
|
|
3
|
+
airbnb: {
|
|
4
|
+
name: 'Airbnb',
|
|
5
|
+
description: 'Warm and welcoming design inspired by the travel platform',
|
|
6
|
+
color: '#FF5A5F',
|
|
7
|
+
features: ['Coral primary color', 'Friendly typography', 'Warm shadows', 'Travel-focused UI']
|
|
8
|
+
},
|
|
9
|
+
slack: {
|
|
10
|
+
name: 'Slack',
|
|
11
|
+
description: 'Professional workspace theme with purple accents',
|
|
12
|
+
color: '#4A154B',
|
|
13
|
+
features: ['Purple brand colors', 'Clean workspace UI', 'Professional feel', 'Team collaboration']
|
|
14
|
+
},
|
|
15
|
+
github: {
|
|
16
|
+
name: 'GitHub',
|
|
17
|
+
description: 'Developer-focused theme with clean aesthetics',
|
|
18
|
+
color: '#24292F',
|
|
19
|
+
features: ['Monospace friendly', 'Clean borders', 'Developer tools', 'Code-focused design']
|
|
20
|
+
},
|
|
21
|
+
spotify: {
|
|
22
|
+
name: 'Spotify',
|
|
23
|
+
description: 'Dark theme with vibrant green accents for music lovers',
|
|
24
|
+
color: '#1DB954',
|
|
25
|
+
features: ['Dark background', 'Vibrant green', 'Music player UI', 'Entertainment focus']
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
function ThemeShowcase() {
|
|
29
|
+
// const { theme, mode, setTheme, toggleMode } = useTheme();
|
|
30
|
+
// const handleThemeChange = (selectedTheme: Theme) => {
|
|
31
|
+
// setTheme(selectedTheme);
|
|
32
|
+
// };
|
|
33
|
+
return jsx("section", {
|
|
34
|
+
className: "py-20 px-4 bg-muted/30",
|
|
35
|
+
children: jsxs("div", {
|
|
36
|
+
className: "container mx-auto",
|
|
37
|
+
children: [jsxs("div", {
|
|
38
|
+
className: "text-center max-w-3xl mx-auto mb-16",
|
|
39
|
+
children: [jsx("h2", {
|
|
40
|
+
className: "text-3xl md:text-4xl font-bold mb-4",
|
|
41
|
+
children: "Explore Our Themes"
|
|
42
|
+
}), jsx("p", {
|
|
43
|
+
className: "text-lg text-muted-foreground",
|
|
44
|
+
children: "Each theme is carefully crafted to match the brand aesthetic and user experience of popular platforms. Click to preview any theme instantly."
|
|
45
|
+
})]
|
|
46
|
+
}), jsxs("div", {
|
|
47
|
+
className: "grid grid-cols-1 lg:grid-cols-3 gap-6 mb-16",
|
|
48
|
+
children: [jsxs(Card, {
|
|
49
|
+
className: "themed-card",
|
|
50
|
+
children: [jsx(CardHeader, {
|
|
51
|
+
children: jsxs(CardTitle, {
|
|
52
|
+
className: "flex items-center gap-2",
|
|
53
|
+
children: [jsx(Palette, {
|
|
54
|
+
className: "h-5 w-5"
|
|
55
|
+
}), "Themed Components"]
|
|
56
|
+
})
|
|
57
|
+
}), jsxs(CardContent, {
|
|
58
|
+
className: "space-y-4",
|
|
59
|
+
children: [jsxs("div", {
|
|
60
|
+
className: "space-y-2",
|
|
61
|
+
children: [jsx(Label, {
|
|
62
|
+
htmlFor: "demo-input",
|
|
63
|
+
children: "Sample Input"
|
|
64
|
+
}), jsx(Input, {
|
|
65
|
+
id: "demo-input",
|
|
66
|
+
placeholder: "Type something...",
|
|
67
|
+
className: "themed-input focus-themed"
|
|
68
|
+
})]
|
|
69
|
+
}), jsx(Button, {
|
|
70
|
+
className: "themed-button w-full interactive-hover",
|
|
71
|
+
children: "Themed Button"
|
|
72
|
+
}), jsxs("div", {
|
|
73
|
+
className: "grid grid-cols-2 gap-2",
|
|
74
|
+
children: [jsx(Badge, {
|
|
75
|
+
className: "bg-success text-white",
|
|
76
|
+
children: "Success"
|
|
77
|
+
}), jsx(Badge, {
|
|
78
|
+
className: "bg-warning text-black",
|
|
79
|
+
children: "Warning"
|
|
80
|
+
})]
|
|
81
|
+
})]
|
|
82
|
+
})]
|
|
83
|
+
}), jsx(Card, {
|
|
84
|
+
className: "themed-card",
|
|
85
|
+
children: jsx(CardHeader, {
|
|
86
|
+
children: jsxs(CardTitle, {
|
|
87
|
+
className: "flex items-center gap-2",
|
|
88
|
+
children: [jsx(Code, {
|
|
89
|
+
className: "h-5 w-5"
|
|
90
|
+
}), "Design Tokens"]
|
|
91
|
+
})
|
|
92
|
+
})
|
|
93
|
+
}), jsxs(Card, {
|
|
94
|
+
className: "themed-card",
|
|
95
|
+
children: [jsx(CardHeader, {
|
|
96
|
+
children: jsxs(CardTitle, {
|
|
97
|
+
className: "flex items-center gap-2",
|
|
98
|
+
children: [jsx(Eye, {
|
|
99
|
+
className: "h-5 w-5"
|
|
100
|
+
}), "Visual Effects"]
|
|
101
|
+
})
|
|
102
|
+
}), jsxs(CardContent, {
|
|
103
|
+
className: "space-y-4",
|
|
104
|
+
children: [jsx("div", {
|
|
105
|
+
className: "p-4 bg-gradient-primary rounded-themed-lg text-primary-foreground",
|
|
106
|
+
children: jsx("p", {
|
|
107
|
+
className: "text-sm font-medium",
|
|
108
|
+
children: "Primary Gradient"
|
|
109
|
+
})
|
|
110
|
+
}), jsxs("div", {
|
|
111
|
+
className: "grid grid-cols-2 gap-2",
|
|
112
|
+
children: [jsx("div", {
|
|
113
|
+
className: "h-12 shadow-themed-sm bg-card rounded-themed"
|
|
114
|
+
}), jsx("div", {
|
|
115
|
+
className: "h-12 shadow-themed-lg bg-card rounded-themed"
|
|
116
|
+
})]
|
|
117
|
+
}), jsx("p", {
|
|
118
|
+
className: "text-xs text-muted-foreground",
|
|
119
|
+
children: "Shadows and effects adapt to each theme"
|
|
120
|
+
})]
|
|
121
|
+
})]
|
|
122
|
+
})]
|
|
123
|
+
}), jsx("div", {
|
|
124
|
+
className: "grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto",
|
|
125
|
+
children: Object.entries(themeData).map(([key, themeInfo]) => {
|
|
126
|
+
// const isActive = theme === key;
|
|
127
|
+
return jsxs(Card, {
|
|
128
|
+
className: `group cursor-pointer transition-all duration-200 hover:shadow-lg `,
|
|
129
|
+
children: [jsxs(CardHeader, {
|
|
130
|
+
children: [jsx("div", {
|
|
131
|
+
className: "flex items-center justify-between",
|
|
132
|
+
children: jsxs("div", {
|
|
133
|
+
className: "flex items-center gap-3",
|
|
134
|
+
children: [jsx("div", {
|
|
135
|
+
className: "h-8 w-8 rounded-full border-2 border-white shadow-sm",
|
|
136
|
+
style: {
|
|
137
|
+
backgroundColor: themeInfo.color
|
|
138
|
+
}
|
|
139
|
+
}), jsx(CardTitle, {
|
|
140
|
+
className: "text-xl",
|
|
141
|
+
children: themeInfo.name
|
|
142
|
+
})]
|
|
143
|
+
})
|
|
144
|
+
}), jsx("p", {
|
|
145
|
+
className: "text-muted-foreground",
|
|
146
|
+
children: themeInfo.description
|
|
147
|
+
})]
|
|
148
|
+
}), jsx(CardContent, {
|
|
149
|
+
children: jsxs("div", {
|
|
150
|
+
className: "space-y-4",
|
|
151
|
+
children: [jsx("div", {
|
|
152
|
+
className: "grid grid-cols-2 gap-2",
|
|
153
|
+
children: themeInfo.features.map((feature, index) => jsxs("div", {
|
|
154
|
+
className: "flex items-center gap-2 text-sm",
|
|
155
|
+
children: [jsx(Check, {
|
|
156
|
+
className: "h-3 w-3 text-success"
|
|
157
|
+
}), jsx("span", {
|
|
158
|
+
children: feature
|
|
159
|
+
})]
|
|
160
|
+
}, index))
|
|
161
|
+
}), jsx("div", {
|
|
162
|
+
className: "pt-2",
|
|
163
|
+
children: jsx(Button
|
|
164
|
+
// variant={isActive ? "default" : "outline"}
|
|
165
|
+
, {
|
|
166
|
+
// variant={isActive ? "default" : "outline"}
|
|
167
|
+
className: "w-full",
|
|
168
|
+
children: "Apply Theme"
|
|
169
|
+
})
|
|
170
|
+
})]
|
|
171
|
+
})
|
|
172
|
+
})]
|
|
173
|
+
}, key);
|
|
174
|
+
})
|
|
175
|
+
}), jsxs("div", {
|
|
176
|
+
className: "text-center mt-12",
|
|
177
|
+
children: [jsx("p", {
|
|
178
|
+
className: "text-muted-foreground mb-6",
|
|
179
|
+
children: "Want to see all themes? Open the settings drawer to explore more options."
|
|
180
|
+
}), jsx(Button, {
|
|
181
|
+
variant: "outline",
|
|
182
|
+
size: "lg",
|
|
183
|
+
children: "View All Themes"
|
|
184
|
+
})]
|
|
185
|
+
})]
|
|
186
|
+
})
|
|
187
|
+
});
|
|
188
|
+
}export{ThemeShowcase};//# sourceMappingURL=ThemeShowcase.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeShowcase.js","sources":["../../../src/components/ThemeShowCase/ThemeShowcase.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"kMAMA;AAEA,MAAM,SAAS,GAAG;AACd,EAAA,MAAA,EAAM;AACF,IAAA,IAAA,EAAA,QAAc;AACd,IAAA,WAAA,EAAA,2DAAwE;AACxE,IAAA,KAAA,EAAA,SAAgB;YACR,EAAA,CAAA,qBAAwB,EAAA,qCAAyB,EAAA,mBAAgB;AAC5E,GAAA;AACD,EAAA,KAAA,EAAK;AACD,IAAA,IAAA,EAAA,OAAa;AACb,IAAA,WAAA,EAAA,kDAA+D;AAC/D,IAAA,KAAA,EAAA,SAAgB;YACR,EAAA,CAAA,qBAAwB,EAAA,yCAAwB,EAAA,oBAAqB;AAChF,GAAA;AACD,EAAA,MAAA,EAAM;AACF,IAAA,IAAA,EAAA,QAAc;AACd,IAAA,WAAA,EAAA,+CAA4D;AAC5D,IAAA,KAAA,EAAA,SAAgB;YACR,EAAA,CAAA,oBAAuB,EAAA,kCAAmB,EAAA,qBAAmB;AACxE,GAAA;AACD,EAAA,OAAA,EAAO;AACH,IAAA,IAAA,EAAA,SAAe;AACf,IAAA,WAAA,EAAA,wDAAqE;AACrE,IAAA,KAAA,EAAA,SAAgB;YACR,EAAA,CAAA,iBAAoB,EAAA,kCAAmB,EAAA,qBAAmB;AACrE;CACJ;SAEe,aAAa,GAAA;;;;;AAOzB,EAAA,OAAAA,GACI,CAAA,SAAA,EAAA;uCAoGkD;wBAE3B,EAAA;;;wDAsC8D;;AAezE,UAAA,SAAA,EAAC,qCAG6B;AAWlD,UAAC,QAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeShowCase/index.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,KAAK,+CAQV,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import {jsxs,jsx}from'react/jsx-runtime';import {HeroSection}from'./HeroSection.js';import {FeaturesSection}from'./FeaturesSection.js';import {ThemeShowcase}from'./ThemeShowcase.js';const Index = () => {
|
|
2
|
+
return jsxs("div", {
|
|
3
|
+
className: "min-h-screen bg-background",
|
|
4
|
+
children: [jsx(HeroSection, {}), jsx(FeaturesSection, {}), jsx(ThemeShowcase, {})]
|
|
5
|
+
});
|
|
6
|
+
};export{Index as default};//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/ThemeShowCase/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"sLAIM,MAAA,KAAK,GAAG,MAAK;AACf,EAAA,OAAAA,IACS,CAAA,KAAA,EAAA;AAMb,IAAE,SAAA,EAAA,4BAAA;AAEF,IAAA,QAAA,EAAA,CAAeC,IAAK,WAAC,EAAA,EAAA,CAAA,EAAAA,GAAA,CAAA,eAAA,EAAA,EAAA,CAAA,EAAAA,GAAA,CAAA,aAAA,EAAA,EAAA,CAAA;;"}
|
package/lib/compute.js
CHANGED
|
@@ -99,14 +99,14 @@ const MainRoutes = [{
|
|
|
99
99
|
componentPath: "@admin-layout/demo-tailwind-browser/lib/components/result/fail/Component.js",
|
|
100
100
|
hasComponent: true
|
|
101
101
|
}, {
|
|
102
|
-
name: '
|
|
103
|
-
key: 'menu.
|
|
104
|
-
path: `${ORG_STD_ROUTES.ORG_BASE_PATH}/
|
|
102
|
+
name: 'ThemeShowCase',
|
|
103
|
+
key: 'menu.themeShowCase',
|
|
104
|
+
path: `${ORG_STD_ROUTES.ORG_BASE_PATH}/themeShowCase`,
|
|
105
105
|
auth: true,
|
|
106
106
|
position: IMenuPosition.Lower,
|
|
107
107
|
exact: true,
|
|
108
108
|
priority: 2,
|
|
109
|
-
componentPath: "@admin-layout/demo-tailwind-browser/lib/components/
|
|
109
|
+
componentPath: "@admin-layout/demo-tailwind-browser/lib/components/ThemeShowCase/index.js",
|
|
110
110
|
hasComponent: true
|
|
111
111
|
}, {
|
|
112
112
|
name: 'OTP Example',
|
package/lib/compute.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compute.js","sources":["../src/compute.ts"],"sourcesContent":[null],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"compute.js","sources":["../src/compute.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
|
package/lib/routes.json
CHANGED
|
@@ -101,15 +101,15 @@
|
|
|
101
101
|
}
|
|
102
102
|
},
|
|
103
103
|
{
|
|
104
|
-
"/o/:orgName/
|
|
105
|
-
"name": "
|
|
106
|
-
"key": "menu.
|
|
107
|
-
"path": "/o/:orgName/
|
|
104
|
+
"/o/:orgName/themeShowCase": {
|
|
105
|
+
"name": "ThemeShowCase",
|
|
106
|
+
"key": "menu.themeShowCase",
|
|
107
|
+
"path": "/o/:orgName/themeShowCase",
|
|
108
108
|
"auth": true,
|
|
109
109
|
"position": "LOWER",
|
|
110
110
|
"exact": true,
|
|
111
111
|
"priority": 2,
|
|
112
|
-
"componentPath": "@admin-layout/demo-tailwind-browser/lib/components/
|
|
112
|
+
"componentPath": "@admin-layout/demo-tailwind-browser/lib/components/ThemeShowCase/index.js",
|
|
113
113
|
"hasComponent": true
|
|
114
114
|
}
|
|
115
115
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@admin-layout/demo-tailwind-browser",
|
|
3
|
-
"version": "10.1.1-alpha.
|
|
3
|
+
"version": "10.1.1-alpha.23",
|
|
4
4
|
"description": "Sample core for higher packages to depend on",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"author": "CDMBase LLC",
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@admin-layout/assets": "10.1.1-alpha.0",
|
|
25
|
-
"@admin-layout/tailwind-design-pro": "10.1.1-alpha.
|
|
26
|
-
"@admin-layout/tailwind-ui": "10.1.1-alpha.
|
|
25
|
+
"@admin-layout/tailwind-design-pro": "10.1.1-alpha.23",
|
|
26
|
+
"@admin-layout/tailwind-ui": "10.1.1-alpha.23",
|
|
27
27
|
"@pubngo-stack/icons": "8.0.7",
|
|
28
28
|
"@react-icons/all-files": "^4.1.0",
|
|
29
29
|
"marked": "7.0.5",
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"typescript": {
|
|
54
54
|
"definition": "lib/index.d.ts"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "73dd894ad8c271ff66dc539da2c4d0bfd45b6ff8"
|
|
57
57
|
}
|
|
@@ -1,436 +0,0 @@
|
|
|
1
|
-
import {jsxs,jsx}from'react/jsx-runtime';import {useTheme}from'@admin-layout/tailwind-design-pro';const ThemeShowcase = () => {
|
|
2
|
-
const {
|
|
3
|
-
theme,
|
|
4
|
-
isDarkMode
|
|
5
|
-
} = useTheme();
|
|
6
|
-
// Get text color based on dark mode
|
|
7
|
-
const textColors = isDarkMode ? theme.colors.text.dark : theme.colors.text.light;
|
|
8
|
-
return jsxs("div", {
|
|
9
|
-
className: "w-full max-w-4xl mx-auto space-y-8",
|
|
10
|
-
children: [jsxs("section", {
|
|
11
|
-
className: "space-y-4",
|
|
12
|
-
children: [jsx("h2", {
|
|
13
|
-
className: "text-2xl font-bold",
|
|
14
|
-
style: {
|
|
15
|
-
color: textColors.primary
|
|
16
|
-
},
|
|
17
|
-
children: "Color Palette"
|
|
18
|
-
}), jsxs("div", {
|
|
19
|
-
className: "space-y-4",
|
|
20
|
-
children: [jsxs("div", {
|
|
21
|
-
children: [jsx("h3", {
|
|
22
|
-
className: "mb-2 font-medium",
|
|
23
|
-
style: {
|
|
24
|
-
color: textColors.secondary
|
|
25
|
-
},
|
|
26
|
-
children: "Primary"
|
|
27
|
-
}), jsx("div", {
|
|
28
|
-
className: "grid grid-cols-11 gap-1 h-12",
|
|
29
|
-
children: Object.entries(theme.colors.primary).map(([shade, color]) => jsx("div", {
|
|
30
|
-
className: "rounded flex items-end justify-center p-1",
|
|
31
|
-
style: {
|
|
32
|
-
backgroundColor: color
|
|
33
|
-
},
|
|
34
|
-
children: jsx("span", {
|
|
35
|
-
className: "text-[10px] font-mono",
|
|
36
|
-
style: {
|
|
37
|
-
color: parseInt(shade) > 500 ? '#fff' : '#000',
|
|
38
|
-
opacity: 0.8
|
|
39
|
-
},
|
|
40
|
-
children: shade
|
|
41
|
-
})
|
|
42
|
-
}, `primary-${shade}`))
|
|
43
|
-
})]
|
|
44
|
-
}), jsxs("div", {
|
|
45
|
-
children: [jsx("h3", {
|
|
46
|
-
className: "mb-2 font-medium",
|
|
47
|
-
style: {
|
|
48
|
-
color: textColors.secondary
|
|
49
|
-
},
|
|
50
|
-
children: "Secondary"
|
|
51
|
-
}), jsx("div", {
|
|
52
|
-
className: "grid grid-cols-11 gap-1 h-12",
|
|
53
|
-
children: Object.entries(theme.colors.secondary).map(([shade, color]) => jsx("div", {
|
|
54
|
-
className: "rounded flex items-end justify-center p-1",
|
|
55
|
-
style: {
|
|
56
|
-
backgroundColor: color
|
|
57
|
-
},
|
|
58
|
-
children: jsx("span", {
|
|
59
|
-
className: "text-[10px] font-mono",
|
|
60
|
-
style: {
|
|
61
|
-
color: parseInt(shade) > 500 ? '#fff' : '#000',
|
|
62
|
-
opacity: 0.8
|
|
63
|
-
},
|
|
64
|
-
children: shade
|
|
65
|
-
})
|
|
66
|
-
}, `secondary-${shade}`))
|
|
67
|
-
})]
|
|
68
|
-
}), jsxs("div", {
|
|
69
|
-
children: [jsx("h3", {
|
|
70
|
-
className: "mb-2 font-medium",
|
|
71
|
-
style: {
|
|
72
|
-
color: textColors.secondary
|
|
73
|
-
},
|
|
74
|
-
children: "Accent"
|
|
75
|
-
}), jsx("div", {
|
|
76
|
-
className: "grid grid-cols-11 gap-1 h-12",
|
|
77
|
-
children: Object.entries(theme.colors.accent).map(([shade, color]) => jsx("div", {
|
|
78
|
-
className: "rounded flex items-end justify-center p-1",
|
|
79
|
-
style: {
|
|
80
|
-
backgroundColor: color
|
|
81
|
-
},
|
|
82
|
-
children: jsx("span", {
|
|
83
|
-
className: "text-[10px] font-mono",
|
|
84
|
-
style: {
|
|
85
|
-
color: parseInt(shade) > 500 ? '#fff' : '#000',
|
|
86
|
-
opacity: 0.8
|
|
87
|
-
},
|
|
88
|
-
children: shade
|
|
89
|
-
})
|
|
90
|
-
}, `accent-${shade}`))
|
|
91
|
-
})]
|
|
92
|
-
}), jsxs("div", {
|
|
93
|
-
className: "grid grid-cols-3 gap-4",
|
|
94
|
-
children: [jsxs("div", {
|
|
95
|
-
children: [jsx("h3", {
|
|
96
|
-
className: "mb-2 font-medium",
|
|
97
|
-
style: {
|
|
98
|
-
color: textColors.secondary
|
|
99
|
-
},
|
|
100
|
-
children: "Success"
|
|
101
|
-
}), jsx("div", {
|
|
102
|
-
className: "h-12 rounded flex items-center justify-center",
|
|
103
|
-
style: {
|
|
104
|
-
backgroundColor: theme.colors.success[500]
|
|
105
|
-
},
|
|
106
|
-
children: jsx("span", {
|
|
107
|
-
className: "text-white font-medium",
|
|
108
|
-
children: "Success"
|
|
109
|
-
})
|
|
110
|
-
})]
|
|
111
|
-
}), jsxs("div", {
|
|
112
|
-
children: [jsx("h3", {
|
|
113
|
-
className: "mb-2 font-medium",
|
|
114
|
-
style: {
|
|
115
|
-
color: textColors.secondary
|
|
116
|
-
},
|
|
117
|
-
children: "Warning"
|
|
118
|
-
}), jsx("div", {
|
|
119
|
-
className: "h-12 rounded flex items-center justify-center",
|
|
120
|
-
style: {
|
|
121
|
-
backgroundColor: theme.colors.warning[500]
|
|
122
|
-
},
|
|
123
|
-
children: jsx("span", {
|
|
124
|
-
className: "text-black font-medium",
|
|
125
|
-
children: "Warning"
|
|
126
|
-
})
|
|
127
|
-
})]
|
|
128
|
-
}), jsxs("div", {
|
|
129
|
-
children: [jsx("h3", {
|
|
130
|
-
className: "mb-2 font-medium",
|
|
131
|
-
style: {
|
|
132
|
-
color: textColors.secondary
|
|
133
|
-
},
|
|
134
|
-
children: "Error"
|
|
135
|
-
}), jsx("div", {
|
|
136
|
-
className: "h-12 rounded flex items-center justify-center",
|
|
137
|
-
style: {
|
|
138
|
-
backgroundColor: theme.colors.error[500]
|
|
139
|
-
},
|
|
140
|
-
children: jsx("span", {
|
|
141
|
-
className: "text-white font-medium",
|
|
142
|
-
children: "Error"
|
|
143
|
-
})
|
|
144
|
-
})]
|
|
145
|
-
})]
|
|
146
|
-
})]
|
|
147
|
-
})]
|
|
148
|
-
}), jsxs("section", {
|
|
149
|
-
className: "space-y-4",
|
|
150
|
-
children: [jsx("h2", {
|
|
151
|
-
className: "text-2xl font-bold",
|
|
152
|
-
style: {
|
|
153
|
-
color: textColors.primary
|
|
154
|
-
},
|
|
155
|
-
children: "Typography"
|
|
156
|
-
}), jsxs("div", {
|
|
157
|
-
className: "space-y-6",
|
|
158
|
-
children: [jsxs("div", {
|
|
159
|
-
className: "space-y-3",
|
|
160
|
-
children: [jsx("h1", {
|
|
161
|
-
className: "text-4xl",
|
|
162
|
-
style: {
|
|
163
|
-
fontFamily: theme.fontFamily.sans.join(', '),
|
|
164
|
-
fontWeight: theme.typography.headings.fontWeight,
|
|
165
|
-
lineHeight: theme.typography.headings.lineHeight,
|
|
166
|
-
letterSpacing: theme.typography.headings.letterSpacing,
|
|
167
|
-
color: textColors.primary
|
|
168
|
-
},
|
|
169
|
-
children: "Heading 1"
|
|
170
|
-
}), jsx("h2", {
|
|
171
|
-
className: "text-3xl",
|
|
172
|
-
style: {
|
|
173
|
-
fontFamily: theme.fontFamily.sans.join(', '),
|
|
174
|
-
fontWeight: theme.typography.headings.fontWeight,
|
|
175
|
-
lineHeight: theme.typography.headings.lineHeight,
|
|
176
|
-
letterSpacing: theme.typography.headings.letterSpacing,
|
|
177
|
-
color: textColors.primary
|
|
178
|
-
},
|
|
179
|
-
children: "Heading 2"
|
|
180
|
-
}), jsx("h3", {
|
|
181
|
-
className: "text-2xl",
|
|
182
|
-
style: {
|
|
183
|
-
fontFamily: theme.fontFamily.sans.join(', '),
|
|
184
|
-
fontWeight: theme.typography.headings.fontWeight,
|
|
185
|
-
lineHeight: theme.typography.headings.lineHeight,
|
|
186
|
-
letterSpacing: theme.typography.headings.letterSpacing,
|
|
187
|
-
color: textColors.primary
|
|
188
|
-
},
|
|
189
|
-
children: "Heading 3"
|
|
190
|
-
}), jsx("h4", {
|
|
191
|
-
className: "text-xl",
|
|
192
|
-
style: {
|
|
193
|
-
fontFamily: theme.fontFamily.sans.join(', '),
|
|
194
|
-
fontWeight: theme.typography.headings.fontWeight,
|
|
195
|
-
lineHeight: theme.typography.headings.lineHeight,
|
|
196
|
-
letterSpacing: theme.typography.headings.letterSpacing,
|
|
197
|
-
color: textColors.primary
|
|
198
|
-
},
|
|
199
|
-
children: "Heading 4"
|
|
200
|
-
})]
|
|
201
|
-
}), jsxs("div", {
|
|
202
|
-
className: "space-y-3",
|
|
203
|
-
children: [jsxs("p", {
|
|
204
|
-
className: "text-base",
|
|
205
|
-
style: {
|
|
206
|
-
fontFamily: theme.fontFamily.sans.join(', '),
|
|
207
|
-
fontWeight: theme.typography.body.fontWeight,
|
|
208
|
-
lineHeight: theme.typography.body.lineHeight,
|
|
209
|
-
letterSpacing: theme.typography.body.letterSpacing,
|
|
210
|
-
color: textColors.primary
|
|
211
|
-
},
|
|
212
|
-
children: ["This is regular body text in the ", theme.name, " theme. It demonstrates the default paragraph styling with appropriate line height and letter spacing."]
|
|
213
|
-
}), jsx("p", {
|
|
214
|
-
className: "text-sm",
|
|
215
|
-
style: {
|
|
216
|
-
fontFamily: theme.fontFamily.sans.join(', '),
|
|
217
|
-
fontWeight: theme.typography.body.fontWeight,
|
|
218
|
-
lineHeight: theme.typography.body.lineHeight,
|
|
219
|
-
letterSpacing: theme.typography.body.letterSpacing,
|
|
220
|
-
color: textColors.secondary
|
|
221
|
-
},
|
|
222
|
-
children: "This is smaller text that might be used for secondary information."
|
|
223
|
-
}), jsx("p", {
|
|
224
|
-
className: "text-xs",
|
|
225
|
-
style: {
|
|
226
|
-
fontFamily: theme.fontFamily.sans.join(', '),
|
|
227
|
-
fontWeight: theme.typography.body.fontWeight,
|
|
228
|
-
lineHeight: theme.typography.body.lineHeight,
|
|
229
|
-
letterSpacing: theme.typography.body.letterSpacing,
|
|
230
|
-
color: textColors.tertiary
|
|
231
|
-
},
|
|
232
|
-
children: "This is small text used for captions, hints, or metadata."
|
|
233
|
-
})]
|
|
234
|
-
}), jsxs("div", {
|
|
235
|
-
children: [jsx("h3", {
|
|
236
|
-
className: "mb-2 font-medium",
|
|
237
|
-
style: {
|
|
238
|
-
color: textColors.secondary
|
|
239
|
-
},
|
|
240
|
-
children: "Monospace"
|
|
241
|
-
}), jsxs("code", {
|
|
242
|
-
className: "text-sm block p-3 rounded",
|
|
243
|
-
style: {
|
|
244
|
-
fontFamily: theme.fontFamily.mono.join(', '),
|
|
245
|
-
backgroundColor: isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
|
|
246
|
-
color: textColors.primary
|
|
247
|
-
},
|
|
248
|
-
children: ["console.log(\"Hello from the ", theme.name, " theme!\");"]
|
|
249
|
-
})]
|
|
250
|
-
})]
|
|
251
|
-
})]
|
|
252
|
-
}), jsxs("section", {
|
|
253
|
-
className: "space-y-4",
|
|
254
|
-
children: [jsx("h2", {
|
|
255
|
-
className: "text-2xl font-bold",
|
|
256
|
-
style: {
|
|
257
|
-
color: textColors.primary
|
|
258
|
-
},
|
|
259
|
-
children: "Components"
|
|
260
|
-
}), jsxs("div", {
|
|
261
|
-
className: "space-y-6",
|
|
262
|
-
children: [jsxs("div", {
|
|
263
|
-
children: [jsx("h3", {
|
|
264
|
-
className: "mb-4 font-medium",
|
|
265
|
-
style: {
|
|
266
|
-
color: textColors.secondary
|
|
267
|
-
},
|
|
268
|
-
children: "Buttons"
|
|
269
|
-
}), jsxs("div", {
|
|
270
|
-
className: "flex flex-wrap gap-4",
|
|
271
|
-
children: [jsx("button", {
|
|
272
|
-
className: "transition-all hover:scale-105",
|
|
273
|
-
style: {
|
|
274
|
-
backgroundColor: theme.components.buttons.primary.background,
|
|
275
|
-
color: theme.components.buttons.primary.text,
|
|
276
|
-
borderRadius: theme.components.buttons.primary.borderRadius,
|
|
277
|
-
padding: theme.components.buttons.primary.padding,
|
|
278
|
-
fontWeight: theme.components.buttons.primary.fontWeight
|
|
279
|
-
},
|
|
280
|
-
children: "Primary Button"
|
|
281
|
-
}), jsx("button", {
|
|
282
|
-
className: "transition-all hover:scale-105",
|
|
283
|
-
style: {
|
|
284
|
-
backgroundColor: theme.components.buttons.secondary.background,
|
|
285
|
-
color: theme.components.buttons.secondary.text,
|
|
286
|
-
border: theme.components.buttons.secondary.border,
|
|
287
|
-
borderRadius: theme.components.buttons.secondary.borderRadius,
|
|
288
|
-
padding: theme.components.buttons.secondary.padding,
|
|
289
|
-
fontWeight: theme.components.buttons.secondary.fontWeight
|
|
290
|
-
},
|
|
291
|
-
children: "Secondary Button"
|
|
292
|
-
})]
|
|
293
|
-
})]
|
|
294
|
-
}), jsxs("div", {
|
|
295
|
-
children: [jsx("h3", {
|
|
296
|
-
className: "mb-4 font-medium",
|
|
297
|
-
style: {
|
|
298
|
-
color: textColors.secondary
|
|
299
|
-
},
|
|
300
|
-
children: "Cards"
|
|
301
|
-
}), jsxs("div", {
|
|
302
|
-
className: "grid grid-cols-1 md:grid-cols-2 gap-6",
|
|
303
|
-
children: [jsxs("div", {
|
|
304
|
-
style: {
|
|
305
|
-
borderRadius: theme.components.cards.borderRadius,
|
|
306
|
-
padding: theme.components.cards.padding,
|
|
307
|
-
boxShadow: theme.components.cards.shadow,
|
|
308
|
-
border: theme.components.cards.border,
|
|
309
|
-
backgroundColor: isDarkMode ? 'rgba(255, 255, 255, 0.05)' : 'white'
|
|
310
|
-
},
|
|
311
|
-
children: [jsx("h4", {
|
|
312
|
-
className: "text-lg mb-2",
|
|
313
|
-
style: {
|
|
314
|
-
color: textColors.primary,
|
|
315
|
-
fontWeight: theme.typography.headings.fontWeight
|
|
316
|
-
},
|
|
317
|
-
children: "Card Title"
|
|
318
|
-
}), jsxs("p", {
|
|
319
|
-
style: {
|
|
320
|
-
color: textColors.secondary
|
|
321
|
-
},
|
|
322
|
-
children: ["This is an example card component styled according to the ", theme.name, " theme guidelines."]
|
|
323
|
-
})]
|
|
324
|
-
}), jsxs("div", {
|
|
325
|
-
style: {
|
|
326
|
-
borderRadius: theme.components.cards.borderRadius,
|
|
327
|
-
padding: theme.components.cards.padding,
|
|
328
|
-
boxShadow: theme.components.cards.shadow,
|
|
329
|
-
border: theme.components.cards.border,
|
|
330
|
-
backgroundColor: isDarkMode ? 'rgba(255, 255, 255, 0.05)' : 'white'
|
|
331
|
-
},
|
|
332
|
-
children: [jsx("h4", {
|
|
333
|
-
className: "text-lg mb-2",
|
|
334
|
-
style: {
|
|
335
|
-
color: textColors.primary,
|
|
336
|
-
fontWeight: theme.typography.headings.fontWeight
|
|
337
|
-
},
|
|
338
|
-
children: "Featured Content"
|
|
339
|
-
}), jsx("p", {
|
|
340
|
-
style: {
|
|
341
|
-
color: textColors.secondary
|
|
342
|
-
},
|
|
343
|
-
children: "Cards can be used to highlight important content or provide interactive elements."
|
|
344
|
-
}), jsx("button", {
|
|
345
|
-
className: "mt-4 transition-all hover:scale-105",
|
|
346
|
-
style: {
|
|
347
|
-
backgroundColor: theme.components.buttons.primary.background,
|
|
348
|
-
color: theme.components.buttons.primary.text,
|
|
349
|
-
borderRadius: theme.components.buttons.primary.borderRadius,
|
|
350
|
-
padding: '8px 16px',
|
|
351
|
-
// Smaller for card context
|
|
352
|
-
fontWeight: theme.components.buttons.primary.fontWeight
|
|
353
|
-
},
|
|
354
|
-
children: "Learn More"
|
|
355
|
-
})]
|
|
356
|
-
})]
|
|
357
|
-
})]
|
|
358
|
-
}), jsxs("div", {
|
|
359
|
-
children: [jsx("h3", {
|
|
360
|
-
className: "mb-4 font-medium",
|
|
361
|
-
style: {
|
|
362
|
-
color: textColors.secondary
|
|
363
|
-
},
|
|
364
|
-
children: "Form Controls"
|
|
365
|
-
}), jsxs("div", {
|
|
366
|
-
className: "space-y-4 max-w-md",
|
|
367
|
-
children: [jsxs("div", {
|
|
368
|
-
children: [jsx("label", {
|
|
369
|
-
className: "block mb-2 text-sm font-medium",
|
|
370
|
-
style: {
|
|
371
|
-
color: textColors.secondary
|
|
372
|
-
},
|
|
373
|
-
children: "Text Input"
|
|
374
|
-
}), jsx("input", {
|
|
375
|
-
type: "text",
|
|
376
|
-
placeholder: "Enter some text",
|
|
377
|
-
className: "w-full transition-all focus:ring-2 focus:outline-none",
|
|
378
|
-
style: {
|
|
379
|
-
backgroundColor: isDarkMode ? 'rgba(255, 255, 255, 0.05)' : 'white',
|
|
380
|
-
color: textColors.primary,
|
|
381
|
-
borderRadius: theme.components.inputs.borderRadius,
|
|
382
|
-
padding: theme.components.inputs.padding,
|
|
383
|
-
fontSize: theme.components.inputs.fontSize,
|
|
384
|
-
lineHeight: theme.components.inputs.lineHeight,
|
|
385
|
-
border: `1px solid ${isDarkMode ? 'rgba(255, 255, 255, 0.2)' : theme.components.inputs.borderColor}`
|
|
386
|
-
}
|
|
387
|
-
})]
|
|
388
|
-
}), jsxs("div", {
|
|
389
|
-
children: [jsx("label", {
|
|
390
|
-
className: "block mb-2 text-sm font-medium",
|
|
391
|
-
style: {
|
|
392
|
-
color: textColors.secondary
|
|
393
|
-
},
|
|
394
|
-
children: "Select Menu"
|
|
395
|
-
}), jsxs("select", {
|
|
396
|
-
className: "w-full transition-all focus:ring-2 focus:outline-none",
|
|
397
|
-
style: {
|
|
398
|
-
backgroundColor: isDarkMode ? 'rgba(255, 255, 255, 0.05)' : 'white',
|
|
399
|
-
color: textColors.primary,
|
|
400
|
-
borderRadius: theme.components.inputs.borderRadius,
|
|
401
|
-
padding: theme.components.inputs.padding,
|
|
402
|
-
fontSize: theme.components.inputs.fontSize,
|
|
403
|
-
lineHeight: theme.components.inputs.lineHeight,
|
|
404
|
-
border: `1px solid ${isDarkMode ? 'rgba(255, 255, 255, 0.2)' : theme.components.inputs.borderColor}`
|
|
405
|
-
},
|
|
406
|
-
children: [jsx("option", {
|
|
407
|
-
children: "Option 1"
|
|
408
|
-
}), jsx("option", {
|
|
409
|
-
children: "Option 2"
|
|
410
|
-
}), jsx("option", {
|
|
411
|
-
children: "Option 3"
|
|
412
|
-
})]
|
|
413
|
-
})]
|
|
414
|
-
}), jsxs("div", {
|
|
415
|
-
className: "flex items-center",
|
|
416
|
-
children: [jsx("input", {
|
|
417
|
-
type: "checkbox",
|
|
418
|
-
id: "checkbox-example",
|
|
419
|
-
className: "mr-2 h-4 w-4 transition-all",
|
|
420
|
-
style: {
|
|
421
|
-
accentColor: theme.colors.primary[500]
|
|
422
|
-
}
|
|
423
|
-
}), jsx("label", {
|
|
424
|
-
htmlFor: "checkbox-example",
|
|
425
|
-
style: {
|
|
426
|
-
color: textColors.primary
|
|
427
|
-
},
|
|
428
|
-
children: "Checkbox example"
|
|
429
|
-
})]
|
|
430
|
-
})]
|
|
431
|
-
})]
|
|
432
|
-
})]
|
|
433
|
-
})]
|
|
434
|
-
})]
|
|
435
|
-
});
|
|
436
|
-
};export{ThemeShowcase as default};//# sourceMappingURL=ThemeExample.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeExample.js","sources":["../../src/components/ThemeExample.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|