76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import * as React from "react";
|
|
import { useEffect, useState } from "react";
|
|
import MatchSizes from "./MatchSizes";
|
|
import MatchProperties from "./MatchProperties";
|
|
import { makeStyles, Text, Subtitle1, tokens, Theme } from "@fluentui/react-components";
|
|
|
|
interface AppProps {
|
|
title: string;
|
|
}
|
|
|
|
const useStyles = makeStyles({
|
|
root: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
height: "100%",
|
|
padding: "16px",
|
|
fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
|
|
backgroundColor: tokens.colorNeutralBackground1,
|
|
overflow: "auto",
|
|
},
|
|
section: {
|
|
marginBottom: "24px",
|
|
padding: "12px",
|
|
borderRadius: "8px",
|
|
backgroundColor: tokens.colorNeutralBackground2,
|
|
boxShadow: "0 1px 2px rgba(0, 0, 0, 0.06)",
|
|
transition: "all 0.2s ease",
|
|
":hover": {
|
|
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
},
|
|
},
|
|
sectionTitle: {
|
|
marginBottom: "12px",
|
|
fontWeight: tokens.fontWeightSemibold,
|
|
color: tokens.colorBrandForeground1,
|
|
},
|
|
footer: {
|
|
fontSize: "12px",
|
|
color: tokens.colorNeutralForeground3,
|
|
textAlign: "center",
|
|
marginTop: "auto",
|
|
padding: "8px 0",
|
|
},
|
|
});
|
|
|
|
const App: React.FC<AppProps> = () => {
|
|
const styles = useStyles();
|
|
const [theme, setTheme] = useState<string>("light");
|
|
|
|
// Check if macOS is in dark mode (would need to be expanded in production)
|
|
useEffect(() => {
|
|
// In a real implementation, we would listen to Office theme changes
|
|
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
setTheme(prefersDarkMode ? "dark" : "light");
|
|
}, []);
|
|
|
|
return (
|
|
<div className={styles.root} data-theme={theme}>
|
|
<div className={styles.section}>
|
|
<Subtitle1 block className={styles.sectionTitle}>
|
|
Shape Tools
|
|
</Subtitle1>
|
|
<MatchSizes />
|
|
<div style={{ marginTop: "8px" }}></div>
|
|
<MatchProperties />
|
|
</div>
|
|
|
|
<div className={styles.footer}>
|
|
<Text size={100}>Edison • v1.0.0</Text>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|