@unitedstatespowersquadrons/components 1.3.12 → 1.3.13
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/Admin/AdminLink.tsx +119 -0
- package/Admin/index.tsx +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { createUseStyles } from "react-jss";
|
|
3
|
+
import classNames from "classnames";
|
|
4
|
+
import AdminItem from "./AdminItem";
|
|
5
|
+
import Colors, { ButtonColorName } from "../Colors";
|
|
6
|
+
import { FontAwesomeProps } from "../FontAwesomeIcon";
|
|
7
|
+
import IconButton from "../IconButton";
|
|
8
|
+
import Styles from "../Styles";
|
|
9
|
+
|
|
10
|
+
// Styles aren't tree-shaken, but keeping every color variant here means apps
|
|
11
|
+
// can pass any ButtonColorName without needing to know which ones are wired up.
|
|
12
|
+
const useStyles = createUseStyles({
|
|
13
|
+
blue: {
|
|
14
|
+
"& button": { ...Styles.blue },
|
|
15
|
+
"&:hover": {
|
|
16
|
+
"& button": { ...Styles.hover.blue },
|
|
17
|
+
...Styles.hover.blue,
|
|
18
|
+
},
|
|
19
|
+
...Styles.blue,
|
|
20
|
+
},
|
|
21
|
+
darkGray: {
|
|
22
|
+
"& button": { ...Styles.darkGray },
|
|
23
|
+
"&:hover": {
|
|
24
|
+
"& button": { ...Styles.darkGray },
|
|
25
|
+
...Styles.darkGray,
|
|
26
|
+
},
|
|
27
|
+
...Styles.darkGray,
|
|
28
|
+
},
|
|
29
|
+
gray: {
|
|
30
|
+
"& button": { ...Styles.gray },
|
|
31
|
+
"&:hover": {
|
|
32
|
+
"& button": { ...Styles.hover.gray },
|
|
33
|
+
...Styles.hover.gray,
|
|
34
|
+
},
|
|
35
|
+
...Styles.gray,
|
|
36
|
+
},
|
|
37
|
+
green: {
|
|
38
|
+
"& button": { ...Styles.green },
|
|
39
|
+
"&:hover": {
|
|
40
|
+
"& button": { ...Styles.hover.green },
|
|
41
|
+
...Styles.hover.green,
|
|
42
|
+
},
|
|
43
|
+
...Styles.green,
|
|
44
|
+
},
|
|
45
|
+
item: {
|
|
46
|
+
"& > span": { display: "none" },
|
|
47
|
+
"&:hover": { backgroundColor: Colors.shades._a },
|
|
48
|
+
"&:hover > span": { display: "inline-block" },
|
|
49
|
+
cursor: "pointer",
|
|
50
|
+
},
|
|
51
|
+
left: { textAlign: "left" },
|
|
52
|
+
orange: {
|
|
53
|
+
"& button": { ...Styles.orange },
|
|
54
|
+
"&:hover": {
|
|
55
|
+
"& button": { ...Styles.hover.orange },
|
|
56
|
+
...Styles.hover.orange,
|
|
57
|
+
},
|
|
58
|
+
...Styles.orange,
|
|
59
|
+
},
|
|
60
|
+
purple: {
|
|
61
|
+
"& button": { ...Styles.purple },
|
|
62
|
+
"&:hover": {
|
|
63
|
+
"& button": { ...Styles.hover.purple },
|
|
64
|
+
...Styles.hover.purple,
|
|
65
|
+
},
|
|
66
|
+
...Styles.purple,
|
|
67
|
+
},
|
|
68
|
+
red: {
|
|
69
|
+
"& button": { ...Styles.red },
|
|
70
|
+
"&:hover": {
|
|
71
|
+
"& button": { ...Styles.hover.red },
|
|
72
|
+
...Styles.hover.red,
|
|
73
|
+
},
|
|
74
|
+
...Styles.red,
|
|
75
|
+
},
|
|
76
|
+
subMenuIcon: {
|
|
77
|
+
fontSize: "1.5em",
|
|
78
|
+
gap: "0",
|
|
79
|
+
paddingLeft: "0",
|
|
80
|
+
paddingRight: "0",
|
|
81
|
+
},
|
|
82
|
+
subMenuText: {
|
|
83
|
+
animation: "fadeIn 100ms",
|
|
84
|
+
fontSize: "1.5em",
|
|
85
|
+
gap: "0",
|
|
86
|
+
paddingRight: "0.5em",
|
|
87
|
+
},
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
interface Props extends FontAwesomeProps {
|
|
91
|
+
className?: string;
|
|
92
|
+
color: ButtonColorName;
|
|
93
|
+
href: string;
|
|
94
|
+
subMenu?: string;
|
|
95
|
+
title: string;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
const AdminLink = (props: Props) => {
|
|
99
|
+
const { className, color, href, icon, mode, style, subMenu, title } = props;
|
|
100
|
+
const classes = useStyles();
|
|
101
|
+
|
|
102
|
+
const colorClassName = classes[color];
|
|
103
|
+
|
|
104
|
+
return(
|
|
105
|
+
<AdminItem className={classNames(classes.item, classes.left, colorClassName)}>
|
|
106
|
+
<IconButton
|
|
107
|
+
className={classNames(classes.subMenuIcon, className)}
|
|
108
|
+
href={href}
|
|
109
|
+
icon={icon}
|
|
110
|
+
mode={mode}
|
|
111
|
+
style={style}
|
|
112
|
+
title={title}
|
|
113
|
+
/>
|
|
114
|
+
<span className={classNames(classes.subMenuText, className)}>{subMenu}</span>
|
|
115
|
+
</AdminItem>
|
|
116
|
+
);
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
export default AdminLink;
|
package/Admin/index.tsx
CHANGED