ece-docs-components 1.0.4 → 1.0.6
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/dist/ThemeProvider.d.ts +12 -0
- package/dist/ThemeProvider.d.ts.map +1 -1
- package/dist/cjs/ThemeProvider.js +158 -0
- package/dist/cjs/ThemeProvider.js.map +1 -0
- package/dist/cjs/components/ActionButton.js +31 -0
- package/dist/cjs/components/ActionButton.js.map +1 -0
- package/dist/cjs/components/Alert.js +79 -0
- package/dist/cjs/components/Alert.js.map +1 -0
- package/dist/cjs/components/Breadcrumb.js +120 -0
- package/dist/cjs/components/Breadcrumb.js.map +1 -0
- package/dist/cjs/components/Button.js +109 -0
- package/dist/cjs/components/Button.js.map +1 -0
- package/dist/cjs/components/Card.js +45 -0
- package/dist/cjs/components/Card.js.map +1 -0
- package/dist/cjs/components/Checkbox.js +42 -0
- package/dist/cjs/components/Checkbox.js.map +1 -0
- package/dist/cjs/components/Concertina.js +153 -0
- package/dist/cjs/components/Concertina.js.map +1 -0
- package/dist/cjs/components/DefinitionBox.js +77 -0
- package/dist/cjs/components/DefinitionBox.js.map +1 -0
- package/dist/cjs/components/Header.js +177 -0
- package/dist/cjs/components/Header.js.map +1 -0
- package/dist/cjs/components/Input.js +77 -0
- package/dist/cjs/components/Input.js.map +1 -0
- package/dist/cjs/components/Modal.js +114 -0
- package/dist/cjs/components/Modal.js.map +1 -0
- package/dist/cjs/components/NoteBox.js +111 -0
- package/dist/cjs/components/NoteBox.js.map +1 -0
- package/dist/cjs/components/Progress.js +83 -0
- package/dist/cjs/components/Progress.js.map +1 -0
- package/dist/cjs/components/Radio.js +61 -0
- package/dist/cjs/components/Radio.js.map +1 -0
- package/dist/cjs/components/ReadBy.js +58 -0
- package/dist/cjs/components/ReadBy.js.map +1 -0
- package/dist/cjs/components/Select.js +96 -0
- package/dist/cjs/components/Select.js.map +1 -0
- package/dist/cjs/components/Sidebar.js +206 -0
- package/dist/cjs/components/Sidebar.js.map +1 -0
- package/dist/cjs/components/SimpleModal.js +40 -0
- package/dist/cjs/components/SimpleModal.js.map +1 -0
- package/dist/cjs/components/StatusBar.js +64 -0
- package/dist/cjs/components/StatusBar.js.map +1 -0
- package/dist/cjs/components/TableOfContents.js +62 -0
- package/dist/cjs/components/TableOfContents.js.map +1 -0
- package/dist/cjs/components/Tabs.js +97 -0
- package/dist/cjs/components/Tabs.js.map +1 -0
- package/dist/cjs/components/Toggle.js +60 -0
- package/dist/cjs/components/Toggle.js.map +1 -0
- package/dist/cjs/index.js +57 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/esm/ThemeProvider.d.ts +117 -0
- package/dist/esm/ThemeProvider.js +136 -0
- package/dist/esm/ThemeProvider.js.map +1 -0
- package/dist/esm/components/ActionButton.d.ts +11 -0
- package/dist/esm/components/ActionButton.js +29 -0
- package/dist/esm/components/ActionButton.js.map +1 -0
- package/dist/esm/components/Alert.d.ts +11 -0
- package/dist/esm/components/Alert.js +77 -0
- package/dist/esm/components/Alert.js.map +1 -0
- package/dist/esm/components/Breadcrumb.d.ts +13 -0
- package/dist/esm/components/Breadcrumb.js +118 -0
- package/dist/esm/components/Breadcrumb.js.map +1 -0
- package/dist/esm/components/Button.d.ts +8 -0
- package/dist/esm/components/Button.js +107 -0
- package/dist/esm/components/Button.js.map +1 -0
- package/dist/esm/components/Card.d.ts +11 -0
- package/dist/esm/components/Card.js +43 -0
- package/dist/esm/components/Card.js.map +1 -0
- package/dist/esm/components/Checkbox.d.ts +8 -0
- package/dist/esm/components/Checkbox.js +40 -0
- package/dist/esm/components/Checkbox.js.map +1 -0
- package/dist/esm/components/Concertina.d.ts +10 -0
- package/dist/esm/components/Concertina.js +151 -0
- package/dist/esm/components/Concertina.js.map +1 -0
- package/dist/esm/components/DefinitionBox.d.ts +8 -0
- package/dist/esm/components/DefinitionBox.js +75 -0
- package/dist/esm/components/DefinitionBox.js.map +1 -0
- package/dist/esm/components/Header.d.ts +7 -0
- package/dist/esm/components/Header.js +175 -0
- package/dist/esm/components/Header.js.map +1 -0
- package/dist/esm/components/Input.d.ts +7 -0
- package/dist/esm/components/Input.js +75 -0
- package/dist/esm/components/Input.js.map +1 -0
- package/dist/esm/components/Modal.d.ts +20 -0
- package/dist/esm/components/Modal.js +112 -0
- package/dist/esm/components/Modal.js.map +1 -0
- package/dist/esm/components/NoteBox.d.ts +10 -0
- package/dist/esm/components/NoteBox.js +109 -0
- package/dist/esm/components/NoteBox.js.map +1 -0
- package/dist/esm/components/Progress.d.ts +15 -0
- package/dist/esm/components/Progress.js +80 -0
- package/dist/esm/components/Progress.js.map +1 -0
- package/dist/esm/components/Radio.d.ts +14 -0
- package/dist/esm/components/Radio.js +58 -0
- package/dist/esm/components/Radio.js.map +1 -0
- package/dist/esm/components/ReadBy.d.ts +6 -0
- package/dist/esm/components/ReadBy.js +56 -0
- package/dist/esm/components/ReadBy.js.map +1 -0
- package/dist/esm/components/Select.d.ts +19 -0
- package/dist/esm/components/Select.js +94 -0
- package/dist/esm/components/Select.js.map +1 -0
- package/dist/esm/components/Sidebar.d.ts +10 -0
- package/dist/esm/components/Sidebar.js +204 -0
- package/dist/esm/components/Sidebar.js.map +1 -0
- package/dist/esm/components/SimpleModal.d.ts +9 -0
- package/dist/esm/components/SimpleModal.js +38 -0
- package/dist/esm/components/SimpleModal.js.map +1 -0
- package/dist/esm/components/StatusBar.d.ts +9 -0
- package/dist/esm/components/StatusBar.js +62 -0
- package/dist/esm/components/StatusBar.js.map +1 -0
- package/dist/esm/components/TableOfContents.d.ts +11 -0
- package/dist/esm/components/TableOfContents.js +60 -0
- package/dist/esm/components/TableOfContents.js.map +1 -0
- package/dist/esm/components/Tabs.d.ts +12 -0
- package/dist/esm/components/Tabs.js +95 -0
- package/dist/esm/components/Tabs.js.map +1 -0
- package/dist/esm/components/Toggle.d.ts +8 -0
- package/dist/esm/components/Toggle.js +58 -0
- package/dist/esm/components/Toggle.js.map +1 -0
- package/dist/esm/components/index.d.ts +22 -0
- package/dist/esm/index.d.ts +25 -0
- package/dist/esm/index.js +26 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/theme-types.d.ts +39 -0
- package/dist/{index.esm.js → index.cjs} +317 -190
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +22 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +272 -190
- package/dist/index.js.map +1 -1
- package/dist/theme-types.d.ts.map +1 -1
- package/package.json +18 -11
- package/dist/index.esm.js.map +0 -1
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
require('@mui/material/styles');
|
|
5
|
+
var ThemeProvider = require('./ThemeProvider.js');
|
|
6
|
+
var Button = require('./components/Button.js');
|
|
7
|
+
var Input = require('./components/Input.js');
|
|
8
|
+
var Card = require('./components/Card.js');
|
|
9
|
+
var Select = require('./components/Select.js');
|
|
10
|
+
var Radio = require('./components/Radio.js');
|
|
11
|
+
var Checkbox = require('./components/Checkbox.js');
|
|
12
|
+
var Progress = require('./components/Progress.js');
|
|
13
|
+
var Alert = require('./components/Alert.js');
|
|
14
|
+
var NoteBox = require('./components/NoteBox.js');
|
|
15
|
+
var Modal = require('./components/Modal.js');
|
|
16
|
+
var Concertina = require('./components/Concertina.js');
|
|
17
|
+
var ReadBy = require('./components/ReadBy.js');
|
|
18
|
+
var StatusBar = require('./components/StatusBar.js');
|
|
19
|
+
var Tabs = require('./components/Tabs.js');
|
|
20
|
+
var Sidebar = require('./components/Sidebar.js');
|
|
21
|
+
var Header = require('./components/Header.js');
|
|
22
|
+
var TableOfContents = require('./components/TableOfContents.js');
|
|
23
|
+
var Toggle = require('./components/Toggle.js');
|
|
24
|
+
var SimpleModal = require('./components/SimpleModal.js');
|
|
25
|
+
var ActionButton = require('./components/ActionButton.js');
|
|
26
|
+
var DefinitionBox = require('./components/DefinitionBox.js');
|
|
27
|
+
var Breadcrumb = require('./components/Breadcrumb.js');
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
exports.ThemeProvider = ThemeProvider.ThemeProvider;
|
|
32
|
+
exports.useTheme = ThemeProvider.useTheme;
|
|
33
|
+
exports.Button = Button.Button;
|
|
34
|
+
exports.Input = Input.Input;
|
|
35
|
+
exports.Card = Card.Card;
|
|
36
|
+
exports.Select = Select.Select;
|
|
37
|
+
exports.Radio = Radio.Radio;
|
|
38
|
+
exports.RadioGroup = Radio.RadioGroup;
|
|
39
|
+
exports.Checkbox = Checkbox.Checkbox;
|
|
40
|
+
exports.Progress = Progress.Progress;
|
|
41
|
+
exports.StepIndicator = Progress.StepIndicator;
|
|
42
|
+
exports.Alert = Alert.Alert;
|
|
43
|
+
exports.NoteBox = NoteBox.NoteBox;
|
|
44
|
+
exports.Modal = Modal.Modal;
|
|
45
|
+
exports.Concertina = Concertina.Concertina;
|
|
46
|
+
exports.ReadBy = ReadBy.ReadBy;
|
|
47
|
+
exports.StatusBar = StatusBar.StatusBar;
|
|
48
|
+
exports.Tabs = Tabs.Tabs;
|
|
49
|
+
exports.Sidebar = Sidebar.Sidebar;
|
|
50
|
+
exports.Header = Header.Header;
|
|
51
|
+
exports.TableOfContents = TableOfContents.TableOfContents;
|
|
52
|
+
exports.Toggle = Toggle.Toggle;
|
|
53
|
+
exports.SimpleModal = SimpleModal.SimpleModal;
|
|
54
|
+
exports.ActionButton = ActionButton.ActionButton;
|
|
55
|
+
exports.DefinitionBox = DefinitionBox.DefinitionBox;
|
|
56
|
+
exports.Breadcrumb = Breadcrumb.Breadcrumb;
|
|
57
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAGnF,UAAU,iBAAkB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1E,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,QAAQ,CAAC;IACvF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAwGD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmB9C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { createTheme } from '@mui/material/styles';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import './theme-types';
|
|
4
|
+
declare const themeConfigs: {
|
|
5
|
+
default: {
|
|
6
|
+
palette: {
|
|
7
|
+
primary: {
|
|
8
|
+
main: string;
|
|
9
|
+
};
|
|
10
|
+
secondary: {
|
|
11
|
+
main: string;
|
|
12
|
+
};
|
|
13
|
+
accent: {
|
|
14
|
+
main: string;
|
|
15
|
+
};
|
|
16
|
+
dark: {
|
|
17
|
+
main: string;
|
|
18
|
+
};
|
|
19
|
+
light: {
|
|
20
|
+
main: string;
|
|
21
|
+
};
|
|
22
|
+
markedRead: {
|
|
23
|
+
main: string;
|
|
24
|
+
};
|
|
25
|
+
text: {
|
|
26
|
+
primary: string;
|
|
27
|
+
secondary: string;
|
|
28
|
+
};
|
|
29
|
+
custom: {
|
|
30
|
+
iconColor: string;
|
|
31
|
+
primaryButtonTextColor: string;
|
|
32
|
+
readByBackgroundColor: string;
|
|
33
|
+
stepIndicatorTextColor: string;
|
|
34
|
+
markAsReadBackgroundColor: string;
|
|
35
|
+
tabBackgroundColor: string;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
appName: string;
|
|
39
|
+
};
|
|
40
|
+
school: {
|
|
41
|
+
palette: {
|
|
42
|
+
primary: {
|
|
43
|
+
main: string;
|
|
44
|
+
};
|
|
45
|
+
secondary: {
|
|
46
|
+
main: string;
|
|
47
|
+
};
|
|
48
|
+
accent: {
|
|
49
|
+
main: string;
|
|
50
|
+
};
|
|
51
|
+
dark: {
|
|
52
|
+
main: string;
|
|
53
|
+
};
|
|
54
|
+
light: {
|
|
55
|
+
main: string;
|
|
56
|
+
};
|
|
57
|
+
markedRead: {
|
|
58
|
+
main: string;
|
|
59
|
+
};
|
|
60
|
+
text: {
|
|
61
|
+
primary: string;
|
|
62
|
+
secondary: string;
|
|
63
|
+
};
|
|
64
|
+
custom: {
|
|
65
|
+
primaryButtonTextColor: string;
|
|
66
|
+
stepIndicatorTextColor: string;
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
appName: string;
|
|
70
|
+
};
|
|
71
|
+
health: {
|
|
72
|
+
palette: {
|
|
73
|
+
primary: {
|
|
74
|
+
main: string;
|
|
75
|
+
};
|
|
76
|
+
secondary: {
|
|
77
|
+
main: string;
|
|
78
|
+
};
|
|
79
|
+
accent: {
|
|
80
|
+
main: string;
|
|
81
|
+
};
|
|
82
|
+
dark: {
|
|
83
|
+
main: string;
|
|
84
|
+
};
|
|
85
|
+
light: {
|
|
86
|
+
main: string;
|
|
87
|
+
};
|
|
88
|
+
markedRead: {
|
|
89
|
+
main: string;
|
|
90
|
+
};
|
|
91
|
+
text: {
|
|
92
|
+
primary: string;
|
|
93
|
+
secondary: string;
|
|
94
|
+
};
|
|
95
|
+
custom: {
|
|
96
|
+
iconColor: string;
|
|
97
|
+
primaryButtonTextColor: string;
|
|
98
|
+
markAsReadBorderColor: string;
|
|
99
|
+
readByBackgroundColor: string;
|
|
100
|
+
stepIndicatorTextColor: string;
|
|
101
|
+
tabBackgroundColor: string;
|
|
102
|
+
};
|
|
103
|
+
};
|
|
104
|
+
appName: string;
|
|
105
|
+
};
|
|
106
|
+
};
|
|
107
|
+
export type ThemeKey = keyof typeof themeConfigs;
|
|
108
|
+
interface ThemeContextType {
|
|
109
|
+
currentTheme: ThemeKey;
|
|
110
|
+
setTheme: (theme: ThemeKey) => void;
|
|
111
|
+
theme: ReturnType<typeof createTheme>;
|
|
112
|
+
}
|
|
113
|
+
export declare const ThemeProvider: React.FC<{
|
|
114
|
+
children: React.ReactNode;
|
|
115
|
+
}>;
|
|
116
|
+
export declare const useTheme: () => ThemeContextType;
|
|
117
|
+
export {};
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
|
|
3
|
+
import { deepmerge } from '@mui/utils';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
|
|
6
|
+
const baseTheme = createTheme({
|
|
7
|
+
palette: {
|
|
8
|
+
text: {
|
|
9
|
+
primary: '#4D3019',
|
|
10
|
+
secondary: '#826E5C',
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
typography: {
|
|
14
|
+
fontFamily: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'].join(','),
|
|
15
|
+
allVariants: {
|
|
16
|
+
color: '#4D3019'
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
components: {
|
|
20
|
+
MuiTypography: {
|
|
21
|
+
styleOverrides: {
|
|
22
|
+
root: {
|
|
23
|
+
color: '#4D3019',
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
MuiCssBaseline: {
|
|
28
|
+
styleOverrides: {
|
|
29
|
+
body: {
|
|
30
|
+
WebkitFontSmoothing: 'antialiased',
|
|
31
|
+
MozOsxFontSmoothing: 'grayscale',
|
|
32
|
+
backgroundColor: '#FDFCEE',
|
|
33
|
+
color: '#4D3019',
|
|
34
|
+
},
|
|
35
|
+
'input[type="checkbox"], input[type="radio"]': {
|
|
36
|
+
accentColor: '#D79AFC',
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
breakpoints: {
|
|
42
|
+
values: {
|
|
43
|
+
xs: 320,
|
|
44
|
+
sm: 640,
|
|
45
|
+
md: 768,
|
|
46
|
+
lg: 1024,
|
|
47
|
+
xl: 1280,
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
});
|
|
51
|
+
const themeConfigs = {
|
|
52
|
+
default: {
|
|
53
|
+
palette: {
|
|
54
|
+
primary: { main: '#AD46FF' },
|
|
55
|
+
secondary: { main: '#D79AFC' },
|
|
56
|
+
accent: { main: '#FFEDD1' },
|
|
57
|
+
dark: { main: '#4D3019' },
|
|
58
|
+
light: { main: '#FEFDF7' },
|
|
59
|
+
markedRead: { main: '#A3D977' },
|
|
60
|
+
text: {
|
|
61
|
+
primary: '#4D3019',
|
|
62
|
+
secondary: '#826E5C',
|
|
63
|
+
},
|
|
64
|
+
custom: {
|
|
65
|
+
iconColor: '#ebc7ff',
|
|
66
|
+
primaryButtonTextColor: '#FFFFFF',
|
|
67
|
+
readByBackgroundColor: '#ebc7ff',
|
|
68
|
+
stepIndicatorTextColor: '#FFFFFF',
|
|
69
|
+
markAsReadBackgroundColor: '#ebc7ff',
|
|
70
|
+
tabBackgroundColor: '#F8F0FC',
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
appName: 'ECE Docs',
|
|
74
|
+
},
|
|
75
|
+
school: {
|
|
76
|
+
palette: {
|
|
77
|
+
primary: { main: '#386e41' },
|
|
78
|
+
secondary: { main: '#8fc790' },
|
|
79
|
+
accent: { main: '#d5ebde' },
|
|
80
|
+
dark: { main: '#4D3019' },
|
|
81
|
+
light: { main: '#FEFDF7' },
|
|
82
|
+
markedRead: { main: '#A3D977' },
|
|
83
|
+
text: {
|
|
84
|
+
primary: '#4D3019',
|
|
85
|
+
secondary: '#826E5C',
|
|
86
|
+
},
|
|
87
|
+
custom: {
|
|
88
|
+
primaryButtonTextColor: '#FFFFFF',
|
|
89
|
+
stepIndicatorTextColor: '#FFFFFF',
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
appName: 'School Docs',
|
|
93
|
+
},
|
|
94
|
+
health: {
|
|
95
|
+
palette: {
|
|
96
|
+
primary: { main: '#4871cf' },
|
|
97
|
+
secondary: { main: '#a4d6ff' },
|
|
98
|
+
accent: { main: '#FF9ecb' },
|
|
99
|
+
dark: { main: '#4D3019' },
|
|
100
|
+
light: { main: '#FEFDF7' },
|
|
101
|
+
markedRead: { main: '#A3D977' },
|
|
102
|
+
text: {
|
|
103
|
+
primary: '#4D3019',
|
|
104
|
+
secondary: '#826E5C',
|
|
105
|
+
},
|
|
106
|
+
custom: {
|
|
107
|
+
iconColor: '#a4d6ff',
|
|
108
|
+
primaryButtonTextColor: '#FFFFFF',
|
|
109
|
+
markAsReadBorderColor: '#FF9ecb',
|
|
110
|
+
readByBackgroundColor: '#a4d6ff',
|
|
111
|
+
stepIndicatorTextColor: '#FFFFFF',
|
|
112
|
+
tabBackgroundColor: '#a4d6ff',
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
appName: 'GP Docs',
|
|
116
|
+
},
|
|
117
|
+
};
|
|
118
|
+
const createMuiTheme = (key) => {
|
|
119
|
+
return createTheme(deepmerge(baseTheme, themeConfigs[key]));
|
|
120
|
+
};
|
|
121
|
+
const ThemeContext = React.createContext(undefined);
|
|
122
|
+
const ThemeProvider = ({ children }) => {
|
|
123
|
+
const [currentTheme, setCurrentTheme] = React.useState('default');
|
|
124
|
+
const theme = React.useMemo(() => createMuiTheme(currentTheme), [currentTheme]);
|
|
125
|
+
return (jsx(ThemeContext.Provider, { value: { currentTheme, setTheme: setCurrentTheme, theme }, children: jsx(ThemeProvider$1, { theme: theme, children: children }) }));
|
|
126
|
+
};
|
|
127
|
+
const useTheme = () => {
|
|
128
|
+
const context = React.useContext(ThemeContext);
|
|
129
|
+
if (context === undefined) {
|
|
130
|
+
throw new Error('useTheme must be used within a ThemeProvider');
|
|
131
|
+
}
|
|
132
|
+
return context;
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
export { ThemeProvider, useTheme };
|
|
136
|
+
//# sourceMappingURL=ThemeProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sources":["../../../src/ThemeProvider.tsx"],"sourcesContent":["import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';\r\nimport { deepmerge } from '@mui/utils';\r\nimport * as React from 'react';\r\nimport './theme-types';\r\n\r\nconst baseTheme = createTheme({\r\n palette: {\r\n text: {\r\n primary: '#4D3019',\r\n secondary: '#826E5C',\r\n }\r\n },\r\n typography: {\r\n fontFamily: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'].join(','),\r\n allVariants: {\r\n color: '#4D3019'\r\n }\r\n },\r\n components: {\r\n MuiTypography: {\r\n styleOverrides: {\r\n root: {\r\n color: '#4D3019',\r\n },\r\n },\r\n },\r\n MuiCssBaseline: {\r\n styleOverrides: {\r\n body: {\r\n WebkitFontSmoothing: 'antialiased',\r\n MozOsxFontSmoothing: 'grayscale',\r\n backgroundColor: '#FDFCEE',\r\n color: '#4D3019',\r\n },\r\n 'input[type=\"checkbox\"], input[type=\"radio\"]': {\r\n accentColor: '#D79AFC',\r\n },\r\n },\r\n },\r\n },\r\n breakpoints: {\r\n values: {\r\n xs: 320,\r\n sm: 640,\r\n md: 768,\r\n lg: 1024,\r\n xl: 1280,\r\n },\r\n },\r\n});\r\n\r\nconst themeConfigs = {\r\n default: {\r\n palette: {\r\n primary: { main: '#AD46FF' },\r\n secondary: { main: '#D79AFC' },\r\n accent: { main: '#FFEDD1' },\r\n dark: { main: '#4D3019' },\r\n light: { main: '#FEFDF7' },\r\n markedRead: { main: '#A3D977' },\r\n text: {\r\n primary: '#4D3019',\r\n secondary: '#826E5C',\r\n },\r\n custom: {\r\n iconColor: '#ebc7ff',\r\n primaryButtonTextColor: '#FFFFFF',\r\n readByBackgroundColor: '#ebc7ff',\r\n stepIndicatorTextColor: '#FFFFFF',\r\n markAsReadBackgroundColor: '#ebc7ff',\r\n tabBackgroundColor: '#F8F0FC',\r\n },\r\n },\r\n appName: 'ECE Docs',\r\n },\r\n school: {\r\n palette: {\r\n primary: { main: '#386e41' },\r\n secondary: { main: '#8fc790' },\r\n accent: { main: '#d5ebde' },\r\n dark: { main: '#4D3019' },\r\n light: { main: '#FEFDF7' },\r\n markedRead: { main: '#A3D977' },\r\n text: {\r\n primary: '#4D3019',\r\n secondary: '#826E5C',\r\n },\r\n custom: {\r\n primaryButtonTextColor: '#FFFFFF',\r\n stepIndicatorTextColor: '#FFFFFF',\r\n },\r\n },\r\n appName: 'School Docs',\r\n },\r\n health: {\r\n palette: {\r\n primary: { main: '#4871cf' },\r\n secondary: { main: '#a4d6ff' },\r\n accent: { main: '#FF9ecb' },\r\n dark: { main: '#4D3019' },\r\n light: { main: '#FEFDF7' },\r\n markedRead: { main: '#A3D977' },\r\n text: {\r\n primary: '#4D3019',\r\n secondary: '#826E5C',\r\n },\r\n custom: {\r\n iconColor: '#a4d6ff',\r\n primaryButtonTextColor: '#FFFFFF',\r\n markAsReadBorderColor: '#FF9ecb',\r\n readByBackgroundColor: '#a4d6ff',\r\n stepIndicatorTextColor: '#FFFFFF',\r\n tabBackgroundColor: '#a4d6ff',\r\n },\r\n },\r\n appName: 'GP Docs',\r\n },\r\n};\r\n\r\nexport type ThemeKey = keyof typeof themeConfigs;\r\n\r\nconst createMuiTheme = (key: ThemeKey) => {\r\n return createTheme(deepmerge(baseTheme, themeConfigs[key]));\r\n};\r\n\r\ninterface ThemeContextType {\r\n currentTheme: ThemeKey;\r\n setTheme: (theme: ThemeKey) => void;\r\n theme: ReturnType<typeof createTheme>;\r\n}\r\n\r\nconst ThemeContext = React.createContext<ThemeContextType | undefined>(undefined);\r\n\r\nexport const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n const [currentTheme, setCurrentTheme] = React.useState<ThemeKey>('default');\r\n \r\n const theme = React.useMemo(() => createMuiTheme(currentTheme), [currentTheme]);\r\n\r\n return (\r\n <ThemeContext.Provider value={{ currentTheme, setTheme: setCurrentTheme, theme }}>\r\n <MuiThemeProvider theme={theme}>\r\n {children}\r\n </MuiThemeProvider>\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport const useTheme = () => {\r\n const context = React.useContext(ThemeContext);\r\n if (context === undefined) {\r\n throw new Error('useTheme must be used within a ThemeProvider');\r\n }\r\n return context;\r\n};\r\n"],"names":["_jsx","MuiThemeProvider"],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SxProps, Theme } from '@mui/material';
|
|
3
|
+
import { SvgIconComponent } from '@mui/icons-material';
|
|
4
|
+
interface ActionButtonProps {
|
|
5
|
+
icon: SvgIconComponent;
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
label?: string;
|
|
8
|
+
sx?: SxProps<Theme>;
|
|
9
|
+
}
|
|
10
|
+
export declare const ActionButton: React.FC<ActionButtonProps>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { styled, IconButton } from '@mui/material';
|
|
4
|
+
|
|
5
|
+
const StyledIconButton = styled(IconButton)(({ theme }) => ({
|
|
6
|
+
width: 48,
|
|
7
|
+
height: 48,
|
|
8
|
+
borderRadius: (typeof theme.shape.borderRadius === 'string'
|
|
9
|
+
? parseInt(theme.shape.borderRadius, 10)
|
|
10
|
+
: theme.shape.borderRadius || 4) * 2,
|
|
11
|
+
backgroundColor: '#fff',
|
|
12
|
+
border: `1px solid ${theme.palette.dark.main}1A`,
|
|
13
|
+
'&:hover': {
|
|
14
|
+
backgroundColor: '#f9fafb',
|
|
15
|
+
},
|
|
16
|
+
'& svg': {
|
|
17
|
+
color: '#4D3019',
|
|
18
|
+
transition: 'color 0.2s',
|
|
19
|
+
},
|
|
20
|
+
'&:hover svg': {
|
|
21
|
+
color: theme.palette.primary.main,
|
|
22
|
+
},
|
|
23
|
+
}));
|
|
24
|
+
const ActionButton = ({ icon: Icon, onClick, label, sx, }) => {
|
|
25
|
+
return (jsx(StyledIconButton, { onClick: onClick, "aria-label": label, sx: sx, children: jsx(Icon, {}) }));
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export { ActionButton };
|
|
29
|
+
//# sourceMappingURL=ActionButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ActionButton.js","sources":["../../../../src/components/ActionButton.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { IconButton, styled, SxProps, Theme } from '@mui/material';\nimport { SvgIconComponent } from '@mui/icons-material';\n\ninterface ActionButtonProps {\n icon: SvgIconComponent;\n onClick?: () => void;\n label?: string;\n sx?: SxProps<Theme>;\n}\n\nconst StyledIconButton = styled(IconButton)(({ theme }) => ({\n width: 48,\n height: 48,\n borderRadius: (typeof theme.shape.borderRadius === 'string'\n ? parseInt(theme.shape.borderRadius, 10)\n : theme.shape.borderRadius || 4) * 2,\n backgroundColor: '#fff',\n border: `1px solid ${theme.palette.dark.main}1A`,\n '&:hover': {\n backgroundColor: '#f9fafb',\n },\n '& svg': {\n color: '#4D3019',\n transition: 'color 0.2s',\n },\n '&:hover svg': {\n color: theme.palette.primary.main,\n },\n}));\n\nexport const ActionButton: React.FC<ActionButtonProps> = ({\n icon: Icon,\n onClick,\n label,\n sx,\n}) => {\n return (\n <StyledIconButton\n onClick={onClick}\n aria-label={label}\n sx={sx}\n >\n <Icon />\n </StyledIconButton>\n );\n};"],"names":[],"mappings":";;;;AAaA;AACE;AACA;;;;AAIA;;AAEA;AACE;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACD;AACF;AAEM;AAML;AASF;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SxProps, Theme } from '@mui/material';
|
|
3
|
+
interface AlertProps {
|
|
4
|
+
variant?: 'info' | 'success' | 'warning' | 'error' | 'custom';
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
className?: string;
|
|
7
|
+
icon?: boolean;
|
|
8
|
+
sx?: SxProps<Theme>;
|
|
9
|
+
}
|
|
10
|
+
export declare const Alert: React.FC<AlertProps>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { styled, Alert as Alert$1 } from '@mui/material';
|
|
4
|
+
import { InfoOutlineRounded, HighlightOffRounded, ErrorOutlineRounded, TaskAltRounded } from '@mui/icons-material';
|
|
5
|
+
|
|
6
|
+
const StyledAlert = styled(Alert$1)(({ theme, customvariant }) => {
|
|
7
|
+
const variants = {
|
|
8
|
+
info: {
|
|
9
|
+
backgroundColor: '#eff6ff',
|
|
10
|
+
borderColor: '#bfdbfe',
|
|
11
|
+
color: '#1e3a8a',
|
|
12
|
+
},
|
|
13
|
+
success: {
|
|
14
|
+
backgroundColor: '#f0fdf4',
|
|
15
|
+
borderColor: '#bbf7d0',
|
|
16
|
+
color: '#14532d',
|
|
17
|
+
},
|
|
18
|
+
warning: {
|
|
19
|
+
backgroundColor: '#fefce8',
|
|
20
|
+
borderColor: '#fef08a',
|
|
21
|
+
color: '#713f12',
|
|
22
|
+
},
|
|
23
|
+
error: {
|
|
24
|
+
backgroundColor: '#fef2f2',
|
|
25
|
+
borderColor: '#fecaca',
|
|
26
|
+
color: '#7f1d1d',
|
|
27
|
+
},
|
|
28
|
+
custom: {
|
|
29
|
+
backgroundColor: theme.palette.light.main,
|
|
30
|
+
borderColor: `${theme.palette.dark.main}33`,
|
|
31
|
+
color: theme.palette.dark.main,
|
|
32
|
+
},
|
|
33
|
+
};
|
|
34
|
+
const variantKey = customvariant || 'info';
|
|
35
|
+
const style = variants[variantKey];
|
|
36
|
+
return {
|
|
37
|
+
display: 'flex',
|
|
38
|
+
alignItems: 'flex-start',
|
|
39
|
+
gap: theme.spacing(1.5),
|
|
40
|
+
padding: theme.spacing(2),
|
|
41
|
+
border: `1px solid ${style.borderColor}`,
|
|
42
|
+
borderRadius: (typeof theme.shape.borderRadius === 'string'
|
|
43
|
+
? parseInt(theme.shape.borderRadius, 10)
|
|
44
|
+
: theme.shape.borderRadius || 4) * 2,
|
|
45
|
+
backgroundColor: style.backgroundColor,
|
|
46
|
+
color: style.color,
|
|
47
|
+
'& .MuiAlert-icon': {
|
|
48
|
+
marginRight: 0,
|
|
49
|
+
padding: 0,
|
|
50
|
+
marginTop: '2px',
|
|
51
|
+
},
|
|
52
|
+
'& .MuiAlert-message': {
|
|
53
|
+
padding: 0,
|
|
54
|
+
flex: 1,
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
});
|
|
58
|
+
const Alert = ({ variant = 'info', children, className = '', icon = true, sx, }) => {
|
|
59
|
+
const iconMap = {
|
|
60
|
+
info: jsx(InfoOutlineRounded, { sx: { fontSize: 20 } }),
|
|
61
|
+
success: jsx(TaskAltRounded, { sx: { fontSize: 20 } }),
|
|
62
|
+
warning: jsx(ErrorOutlineRounded, { sx: { fontSize: 20 } }),
|
|
63
|
+
error: jsx(HighlightOffRounded, { sx: { fontSize: 20 } }),
|
|
64
|
+
custom: jsx(InfoOutlineRounded, { sx: { fontSize: 20 } }),
|
|
65
|
+
};
|
|
66
|
+
const severityMap = {
|
|
67
|
+
info: 'info',
|
|
68
|
+
success: 'success',
|
|
69
|
+
warning: 'warning',
|
|
70
|
+
error: 'error',
|
|
71
|
+
custom: 'info',
|
|
72
|
+
};
|
|
73
|
+
return (jsx(StyledAlert, { customvariant: variant, severity: severityMap[variant], icon: icon ? iconMap[variant] : false, className: className, sx: sx, children: children }));
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export { Alert };
|
|
77
|
+
//# sourceMappingURL=Alert.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Alert as MuiAlert, AlertProps as MuiAlertProps, styled, SxProps, Theme } from '@mui/material';\nimport InfoOutlineIcon from '@mui/icons-material/InfoOutline';\nimport { ErrorOutlineRounded, HighlightOffRounded, InfoOutlineRounded, TaskAltRounded } from '@mui/icons-material';\n\ninterface AlertProps {\n variant?: 'info' | 'success' | 'warning' | 'error' | 'custom';\n children: React.ReactNode;\n className?: string;\n icon?: boolean;\n sx?: SxProps<Theme>; \n}\n\nconst StyledAlert = styled(MuiAlert)<{ customvariant?: string }>(({ theme, customvariant }) => {\n const variants = {\n info: {\n backgroundColor: '#eff6ff',\n borderColor: '#bfdbfe',\n color: '#1e3a8a',\n },\n success: {\n backgroundColor: '#f0fdf4',\n borderColor: '#bbf7d0',\n color: '#14532d',\n },\n warning: {\n backgroundColor: '#fefce8',\n borderColor: '#fef08a',\n color: '#713f12',\n },\n error: {\n backgroundColor: '#fef2f2',\n borderColor: '#fecaca',\n color: '#7f1d1d',\n },\n custom: {\n backgroundColor: theme.palette.light.main,\n borderColor: `${theme.palette.dark.main}33`,\n color: theme.palette.dark.main,\n },\n };\n\n const variantKey = customvariant as keyof typeof variants || 'info';\n const style = variants[variantKey];\n\n return {\n display: 'flex',\n alignItems: 'flex-start',\n gap: theme.spacing(1.5),\n padding: theme.spacing(2),\n border: `1px solid ${style.borderColor}`,\n borderRadius: (typeof theme.shape.borderRadius === 'string'\n ? parseInt(theme.shape.borderRadius, 10)\n : theme.shape.borderRadius || 4) * 2,\n backgroundColor: style.backgroundColor,\n color: style.color,\n '& .MuiAlert-icon': {\n marginRight: 0,\n padding: 0,\n marginTop: '2px',\n },\n '& .MuiAlert-message': {\n padding: 0,\n flex: 1,\n },\n };\n});\n\nexport const Alert: React.FC<AlertProps> = ({\n variant = 'info',\n children,\n className = '',\n icon = true,\n sx,\n}) => {\n const iconMap = {\n info: <InfoOutlineRounded sx={{fontSize: 20}} />,\n success: <TaskAltRounded sx={{fontSize: 20}} />,\n warning: <ErrorOutlineRounded sx={{fontSize: 20}} />,\n error: <HighlightOffRounded sx={{fontSize: 20}} />,\n custom: <InfoOutlineRounded sx={{fontSize: 20}} />,\n };\n\n const severityMap: Record<string, MuiAlertProps['severity']> = {\n info: 'info',\n success: 'success',\n warning: 'warning',\n error: 'error',\n custom: 'info',\n };\n\n return (\n <StyledAlert\n customvariant={variant}\n severity={severityMap[variant]}\n icon={icon ? iconMap[variant] : false}\n className={className}\n sx={sx}\n >\n {children}\n </StyledAlert>\n );\n};"],"names":[],"mappings":";;;;;AAeA;AACE;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;;AAEA;AACD;;AAGH;AACA;;AAGE;AACA;AACA;AACA;AACA;;;;;;AAMA;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACD;;AAEL;;AASE;;;;;;;AAQA;AACE;AACA;AACA;AACA;AACA;;AAGF;AAWF;;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface BreadcrumbItem {
|
|
3
|
+
label: string;
|
|
4
|
+
href?: string;
|
|
5
|
+
}
|
|
6
|
+
interface BreadcrumbProps {
|
|
7
|
+
items: BreadcrumbItem[];
|
|
8
|
+
currentItem: string;
|
|
9
|
+
dropdownItems?: string[];
|
|
10
|
+
onItemSelect?: (item: string) => void;
|
|
11
|
+
}
|
|
12
|
+
export declare const Breadcrumb: React.FC<BreadcrumbProps>;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { styled, IconButton, Menu, MenuItem, Box, Breadcrumbs, Typography } from '@mui/material';
|
|
5
|
+
import { useTheme } from '../ThemeProvider.js';
|
|
6
|
+
import { HomeRounded, ExpandMoreRounded } from '@mui/icons-material';
|
|
7
|
+
|
|
8
|
+
const HomeButton = styled(IconButton)(({ theme }) => ({
|
|
9
|
+
width: 40,
|
|
10
|
+
height: 40,
|
|
11
|
+
borderRadius: (typeof theme.shape.borderRadius === 'string'
|
|
12
|
+
? parseInt(theme.shape.borderRadius, 10)
|
|
13
|
+
: theme.shape.borderRadius || 4) * 2,
|
|
14
|
+
backgroundColor: theme.palette.custom?.iconColor || theme.palette.accent.main,
|
|
15
|
+
flexShrink: 0,
|
|
16
|
+
display: 'none',
|
|
17
|
+
[theme.breakpoints.up('md')]: {
|
|
18
|
+
display: 'flex',
|
|
19
|
+
},
|
|
20
|
+
'&:hover': {
|
|
21
|
+
backgroundColor: theme.palette.custom?.iconColor || theme.palette.accent.main,
|
|
22
|
+
opacity: 0.8,
|
|
23
|
+
},
|
|
24
|
+
}));
|
|
25
|
+
const DropdownButton = styled('button')(({ theme }) => ({
|
|
26
|
+
display: 'flex',
|
|
27
|
+
alignItems: 'center',
|
|
28
|
+
gap: theme.spacing(1),
|
|
29
|
+
padding: theme.spacing(0.75, 2),
|
|
30
|
+
borderRadius: (typeof theme.shape.borderRadius === 'string'
|
|
31
|
+
? parseInt(theme.shape.borderRadius, 10)
|
|
32
|
+
: theme.shape.borderRadius || 4) * 2,
|
|
33
|
+
border: `1px solid ${theme.palette.dark.main}33`,
|
|
34
|
+
backgroundColor: '#fff',
|
|
35
|
+
color: theme.palette.dark.main,
|
|
36
|
+
fontWeight: 500,
|
|
37
|
+
whiteSpace: 'nowrap',
|
|
38
|
+
cursor: 'pointer',
|
|
39
|
+
transition: 'border-color 0.2s',
|
|
40
|
+
fontSize: '0.875rem',
|
|
41
|
+
'&:hover': {
|
|
42
|
+
borderColor: `${theme.palette.dark.main}4D`,
|
|
43
|
+
},
|
|
44
|
+
[theme.breakpoints.down('sm')]: {
|
|
45
|
+
padding: theme.spacing(0.75, 1),
|
|
46
|
+
gap: theme.spacing(0.5),
|
|
47
|
+
},
|
|
48
|
+
}));
|
|
49
|
+
const StyledMenu = styled(Menu)(({ theme }) => ({
|
|
50
|
+
'& .MuiPaper-root': {
|
|
51
|
+
marginTop: theme.spacing(1),
|
|
52
|
+
width: '256px',
|
|
53
|
+
borderRadius: (typeof theme.shape.borderRadius === 'string'
|
|
54
|
+
? parseInt(theme.shape.borderRadius, 10)
|
|
55
|
+
: theme.shape.borderRadius || 4) * 2,
|
|
56
|
+
border: `1px solid ${theme.palette.dark.main}33`,
|
|
57
|
+
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
|
58
|
+
},
|
|
59
|
+
}));
|
|
60
|
+
const StyledMenuItem = styled(MenuItem)(({ theme, isActive }) => ({
|
|
61
|
+
padding: theme.spacing(1.25, 2),
|
|
62
|
+
fontSize: '0.875rem',
|
|
63
|
+
color: isActive ? theme.palette.primary.main : '#4D3019',
|
|
64
|
+
fontWeight: isActive ? 500 : 400,
|
|
65
|
+
backgroundColor: isActive ? '#F5F1ED' : 'transparent',
|
|
66
|
+
'&:hover': {
|
|
67
|
+
backgroundColor: '#F5F1ED',
|
|
68
|
+
},
|
|
69
|
+
}));
|
|
70
|
+
const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, }) => {
|
|
71
|
+
const { theme } = useTheme();
|
|
72
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
73
|
+
const isDropdownOpen = Boolean(anchorEl);
|
|
74
|
+
const handleDropdownToggle = (event) => {
|
|
75
|
+
setAnchorEl(event.currentTarget);
|
|
76
|
+
};
|
|
77
|
+
const handleClose = () => {
|
|
78
|
+
setAnchorEl(null);
|
|
79
|
+
};
|
|
80
|
+
const handleItemClick = (item) => {
|
|
81
|
+
onItemSelect?.(item);
|
|
82
|
+
handleClose();
|
|
83
|
+
};
|
|
84
|
+
return (jsxs(Box, { component: "nav", sx: {
|
|
85
|
+
display: 'flex',
|
|
86
|
+
alignItems: 'center',
|
|
87
|
+
gap: { xs: 0.5, sm: 1 },
|
|
88
|
+
fontSize: { xs: '0.75rem', sm: '0.875rem' },
|
|
89
|
+
overflow: 'visible',
|
|
90
|
+
}, children: [jsx(HomeButton, { "aria-label": "Home", children: jsx(HomeRounded, { sx: { fontSize: 20, color: "#4D3019" } }) }), jsx(Breadcrumbs, { separator: "/", sx: {
|
|
91
|
+
display: { xs: 'none', md: 'flex' },
|
|
92
|
+
'& .MuiBreadcrumbs-separator': {
|
|
93
|
+
color: `${theme.palette.dark.main}66`,
|
|
94
|
+
},
|
|
95
|
+
}, children: items.map((item, index) => (jsx(Typography, { sx: {
|
|
96
|
+
color: theme.palette.dark.main,
|
|
97
|
+
fontWeight: 500,
|
|
98
|
+
px: { xs: 0.5, sm: 1 },
|
|
99
|
+
whiteSpace: 'nowrap',
|
|
100
|
+
fontSize: 'inherit',
|
|
101
|
+
}, children: item.label }, index))) }), jsx(Typography, { sx: {
|
|
102
|
+
display: { xs: 'none', md: 'inline' },
|
|
103
|
+
color: `${theme.palette.dark.main}66`,
|
|
104
|
+
}, children: "/" }), jsxs(Box, { sx: { position: 'relative', flexShrink: 0 }, children: [jsxs(DropdownButton, { type: "button", onClick: handleDropdownToggle, children: [jsx("span", { children: currentItem }), jsx(ExpandMoreRounded, { sx: {
|
|
105
|
+
fontSize: 20,
|
|
106
|
+
transition: 'transform 0.2s',
|
|
107
|
+
transform: isDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',
|
|
108
|
+
} })] }), dropdownItems.length > 0 && (jsx(StyledMenu, { anchorEl: anchorEl, open: isDropdownOpen, onClose: handleClose, anchorOrigin: {
|
|
109
|
+
vertical: 'bottom',
|
|
110
|
+
horizontal: 'left',
|
|
111
|
+
}, transformOrigin: {
|
|
112
|
+
vertical: 'top',
|
|
113
|
+
horizontal: 'left',
|
|
114
|
+
}, children: dropdownItems.map((item, index) => (jsx(StyledMenuItem, { onClick: () => handleItemClick(item), isActive: item === currentItem, children: item }, index))) }))] })] }));
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
export { Breadcrumb };
|
|
118
|
+
//# sourceMappingURL=Breadcrumb.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Breadcrumb.js","sources":["../../../../src/components/Breadcrumb.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { Box, Breadcrumbs as MuiBreadcrumbs, Typography, IconButton, Menu, MenuItem, styled } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { HomeRounded, ExpandMoreRounded } from '@mui/icons-material';\n\ninterface BreadcrumbItem {\n label: string;\n href?: string;\n}\n\ninterface BreadcrumbProps {\n items: BreadcrumbItem[];\n currentItem: string;\n dropdownItems?: string[];\n onItemSelect?: (item: string) => void;\n}\n\nconst HomeButton = styled(IconButton)(({ theme }) => ({\n width: 40,\n height: 40,\n borderRadius: (typeof theme.shape.borderRadius === 'string'\n ? parseInt(theme.shape.borderRadius, 10)\n : theme.shape.borderRadius || 4) * 2,\n backgroundColor: theme.palette.custom?.iconColor || theme.palette.accent.main,\n flexShrink: 0,\n display: 'none',\n [theme.breakpoints.up('md')]: {\n display: 'flex',\n },\n '&:hover': {\n backgroundColor: theme.palette.custom?.iconColor || theme.palette.accent.main,\n opacity: 0.8,\n },\n}));\n\nconst DropdownButton = styled('button')(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n padding: theme.spacing(0.75, 2),\n borderRadius: (typeof theme.shape.borderRadius === 'string'\n ? parseInt(theme.shape.borderRadius, 10)\n : theme.shape.borderRadius || 4) * 2,\n border: `1px solid ${theme.palette.dark.main}33`,\n backgroundColor: '#fff',\n color: theme.palette.dark.main,\n fontWeight: 500,\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n transition: 'border-color 0.2s',\n fontSize: '0.875rem',\n '&:hover': {\n borderColor: `${theme.palette.dark.main}4D`,\n },\n [theme.breakpoints.down('sm')]: {\n padding: theme.spacing(0.75, 1),\n gap: theme.spacing(0.5),\n },\n}));\n\nconst StyledMenu = styled(Menu)(({ theme }) => ({\n '& .MuiPaper-root': {\n marginTop: theme.spacing(1),\n width: '256px',\n borderRadius: (typeof theme.shape.borderRadius === 'string'\n ? parseInt(theme.shape.borderRadius, 10)\n : theme.shape.borderRadius || 4) * 2,\n border: `1px solid ${theme.palette.dark.main}33`,\n boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n },\n}));\n\nconst StyledMenuItem = styled(MenuItem)<{ isActive?: boolean }>(({ theme, isActive }) => ({\n padding: theme.spacing(1.25, 2),\n fontSize: '0.875rem',\n color: isActive ? theme.palette.primary.main : '#4D3019',\n fontWeight: isActive ? 500 : 400,\n backgroundColor: isActive ? '#F5F1ED' : 'transparent',\n '&:hover': {\n backgroundColor: '#F5F1ED',\n },\n}));\n\nexport const Breadcrumb: React.FC<BreadcrumbProps> = ({\n items,\n currentItem,\n dropdownItems = [],\n onItemSelect,\n}) => {\n const { theme } = useTheme();\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n const isDropdownOpen = Boolean(anchorEl);\n\n const handleDropdownToggle = (event: React.MouseEvent<HTMLButtonElement>) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n const handleItemClick = (item: string) => {\n onItemSelect?.(item);\n handleClose();\n };\n\n return (\n <Box\n component=\"nav\"\n sx={{\n display: 'flex',\n alignItems: 'center',\n gap: { xs: 0.5, sm: 1 },\n fontSize: { xs: '0.75rem', sm: '0.875rem' },\n overflow: 'visible',\n }}\n >\n <HomeButton aria-label=\"Home\">\n <HomeRounded sx={{ fontSize: 20, color:\"#4D3019\"}} />\n </HomeButton>\n\n <MuiBreadcrumbs\n separator=\"/\"\n sx={{\n display: { xs: 'none', md: 'flex' },\n '& .MuiBreadcrumbs-separator': {\n color: `${theme.palette.dark.main}66`,\n },\n }}\n >\n {items.map((item, index) => (\n <Typography\n key={index}\n sx={{\n color: theme.palette.dark.main,\n fontWeight: 500,\n px: { xs: 0.5, sm: 1 },\n whiteSpace: 'nowrap',\n fontSize: 'inherit',\n }}\n >\n {item.label}\n </Typography>\n ))}\n </MuiBreadcrumbs>\n\n <Typography\n sx={{\n display: { xs: 'none', md: 'inline' },\n color: `${theme.palette.dark.main}66`,\n }}\n >\n /\n </Typography>\n\n <Box sx={{ position: 'relative', flexShrink: 0 }}>\n <DropdownButton\n type=\"button\"\n onClick={handleDropdownToggle}\n >\n <span>{currentItem}</span>\n <ExpandMoreRounded\n sx={{\n fontSize: 20,\n transition: 'transform 0.2s',\n transform: isDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n }}\n />\n </DropdownButton>\n\n {dropdownItems.length > 0 && (\n <StyledMenu\n anchorEl={anchorEl}\n open={isDropdownOpen}\n onClose={handleClose}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'left',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'left',\n }}\n >\n {dropdownItems.map((item, index) => (\n <StyledMenuItem\n key={index}\n onClick={() => handleItemClick(item)}\n isActive={item === currentItem}\n >\n {item}\n </StyledMenuItem>\n ))}\n </StyledMenu>\n )}\n </Box>\n </Box>\n );\n};"],"names":[],"mappings":";;;;;;;AAmBA;AACE;AACA;;;;AAIA;AACA;AACA;;AAEE;AACD;AACD;AACE;AACA;AACD;AACF;AAED;AACE;AACA;AACA;;;;;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEC;;;AAGC;AACD;AACF;AAED;AACE;AACE;AACA;;;;;AAKA;AACD;AACF;AAED;;AAEE;AACA;;;AAGA;AACE;AACD;AACF;AAEM;AAML;;AAEA;AAEA;AACE;AACF;;;AAIA;AAEA;AACE;AACA;AACF;;AAMM;AACA;;;AAGA;AACD;;AAUG;;AAEC;AACF;AAMK;AACA;;AAEA;AACA;AACD;;;AAWJ;AAaK;AACA;;;AAYA;AACA;AACD;AAEC;AACA;AACD;AAgBb;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ButtonProps as MuiButtonProps } from '@mui/material';
|
|
3
|
+
interface CustomButtonProps extends Omit<MuiButtonProps, 'variant' | 'size'> {
|
|
4
|
+
variant?: 'primary' | 'secondary' | 'outline' | 'marked-read' | 'mark-read' | 'danger';
|
|
5
|
+
size?: 'sm' | 'md' | 'lg';
|
|
6
|
+
}
|
|
7
|
+
export declare const Button: React.FC<CustomButtonProps>;
|
|
8
|
+
export {};
|