Skip to content

Commit

Permalink
mantine
Browse files Browse the repository at this point in the history
  • Loading branch information
@gempir
gempir committed Apr 20, 2024
1 parent 56b03f3 commit 873579e
Show file tree
Hide file tree
Showing 5 changed files with 353 additions and 52 deletions.
17 changes: 15 additions & 2 deletions web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,23 @@
"type": "module",
"dependencies": {
"@heroicons/react": "^2.0.12",
"@mantine/carousel": "^7.8.0",
"@mantine/core": "^7.8.0",
"@mantine/dates": "^7.8.0",
"@mantine/dropzone": "^7.8.0",
"@mantine/form": "^7.8.0",
"@mantine/hooks": "^7.8.0",
"@mantine/modals": "^7.8.0",
"@mantine/notifications": "^7.8.0",
"@mantine/nprogress": "^7.8.0",
"@mantine/spotlight": "^7.8.0",
"@tailwindcss/forms": "^0.5.7",
"@tldraw/tldraw": "^2.0.0-beta.2",
"@types/seedrandom": "^3.0.4",
"@y-sweet/react": "^0.1.0",
"@y-sweet/sdk": "^0.1.0",
"dayjs": "^1.11.7",
"dayjs": "^1.11.10",
"embla-carousel-react": "^8.0.2",
"eslint-config-next": "^14.1.0",
"jsonwebtoken": "^9.0.2",
"jwt-decode": "^3.1.2",
Expand All @@ -37,7 +48,9 @@
"@types/node": "^20.11.16",
"@types/react": "^18.2.52",
"autoprefixer": "^10.4.17",
"postcss": "^8.4.33",
"postcss": "^8.4.38",
"postcss-preset-mantine": "^1.14.4",
"postcss-simple-vars": "^7.0.1",
"typescript": "^5.3.3"
}
}
14 changes: 11 additions & 3 deletions web/postcss.config.cjs
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
// If you want to use other PostCSS plugins, see the following:
// https://tailwindcss.com/docs/using-with-preprocessors
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
}
};
68 changes: 43 additions & 25 deletions web/src/components/Overlay/OverlaysPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
"use client";
import { Button, Table, TextInput, Tooltip, useMantineTheme, CopyButton } from "@mantine/core";
import Link from "next/link";
import { useOverlays } from "../../hooks/useOverlays";
import { useUserConfig } from "../../hooks/useUserConfig";
Expand All @@ -6,35 +8,51 @@ export function OverlaysPage() {
const [overlays, addOverlay, deleteOverlay, errorMessage, loading] = useOverlays();
const [user] = useUserConfig();

const theme = useMantineTheme();

return <div className="relative w-full h-[100vh] p-4">
<div className="p-4 bg-gray-800 rounded shadow max-w-[800px]">
<div className="group">
<button onClick={addOverlay} className="bg-green-700 hover:bg-green-600 p-2 rounded shadow block cursor-pointer">Add Overlay</button>
{<span className="absolute z-50 hidden mt-2 p-2 w-48 text-center bg-black/75 text-white rounded tooltip-text group-hover:block pointer-events-none">
Only gempir can
</span>}
</div>
<div className="mt-5">
{overlays.map(overlay => <div key={overlay.ID} className="flex items-center justify-between p-4 bg-gray-900">
<div>
<div className="group">
<button className="bg-red-700 hover:bg-red-600 p-2 rounded shadow block cursor-pointer" onClick={() => {
confirm("Are you sure you want to delete this overlay?") && deleteOverlay(overlay.ID)
}}>Delete</button>
<span className="absolute z-50 hidden mt-2 p-2 w-48 text-center bg-black/75 text-white rounded tooltip-text group-hover:block pointer-events-none">
Only gempir can
</span>
</div>
</div>
<div>{overlay.ID}</div>
<div>
<Link href={`/overlay/edit/${overlay.ID}`} className="bg-blue-700 hover:bg-blue-600 p-2 rounded shadow block cursor-pointer">Edit</Link>
</div>
<div>
<input type="text" value={`${window?.location?.href}/${overlay.RoomID}`} readOnly className="bg-gray-900" />
</div>
</div>)}
<Tooltip label="only gempir can">
<Button variant="outline" onClick={addOverlay}>Add Overlay</Button>
</Tooltip>
</div>
<Table verticalSpacing={"lg"}>
<Table.Thead>
<Table.Tr>
<Table.Th>Id</Table.Th>
<Table.Th>Overlay Link</Table.Th>
<Table.Th>Symbol</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{overlays.map(overlay => <Table.Tr key={overlay.ID}>
<Table.Td>{overlay.ID}</Table.Td>
<Table.Td className="flex gap-3 min-w-[350px]">
<TextInput style={{ maxWidth: 300 }} value={`${window?.location?.href}/${overlay.RoomID}`} readOnly />
<CopyButton value={`${window?.location?.href}/${overlay.RoomID}`}>
{({ copied, copy }) => (
<Button color={copied ? 'teal' : 'blue'} onClick={copy}>
{copied ? 'Copied url' : 'Copy url'}
</Button>
)}
</CopyButton>
</Table.Td>
<Table.Td>
<div className="flex gap-3">
<Tooltip label="only gempir can">
<Button variant="contained" style={{ backgroundColor: theme.colors.red[9], opacity: 0.1 }}
onClick={() => {
confirm("Are you sure you want to delete this overlay?") && deleteOverlay(overlay.ID)
}}
>Delete</Button>
</Tooltip>
<Button component={Link} href={`/overlay/edit/${overlay.ID}`}>Edit</Button>
</div>
</Table.Td>
</Table.Tr>)}
</Table.Tbody>
</Table>
</div>
</div>;
}
45 changes: 29 additions & 16 deletions web/src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ColorSchemeScript, MantineProvider, createTheme } from '@mantine/core';
import dayjs from 'dayjs';
import * as localizedFormat from 'dayjs/plugin/localizedFormat';
import Head from "next/head";
Expand All @@ -6,9 +7,18 @@ import 'tailwindcss/tailwind.css';
import { Sidebar } from "../components/Sidebar/Sidebar";
import { StoreProvider, useCreateStore } from "../store";

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
import '@mantine/dropzone/styles.css';

// @ts-ignore
dayjs.extend(localizedFormat);


const theme = createTheme({
/** Put your mantine theme override here */
});

export default function App({ Component, pageProps }: { Component: any; pageProps: any }) {
const createStore = useCreateStore(pageProps.store);

Expand All @@ -19,6 +29,7 @@ export default function App({ Component, pageProps }: { Component: any; pageProp
<Head>
<title>gempbot</title>
<link rel="icon" href="/favicon.ico" />
<ColorSchemeScript />
</Head>
<style jsx global>{`
body {
Expand All @@ -30,22 +41,24 @@ export default function App({ Component, pageProps }: { Component: any; pageProp
color: rgba(209, 213, 219, var(--tw-text-opacity));
}
`}</style>
{renderFullLayout && <>
<main>
<div className="flex" style={{ scrollbarGutter: "stable" }}>
<Sidebar />
<Component {...pageProps} />
</div>
<div className="absolute bottom-3 text-center right-3 mx-auto hover:text-blue-500">
<Link href="/privacy">
Privacy
</Link>
</div>
</main>
</>}
{!renderFullLayout && <>
<Component {...pageProps} />
</>}
<MantineProvider theme={theme}>
{renderFullLayout && <>
<main>
<div className="flex" style={{ scrollbarGutter: "stable" }}>
<Sidebar />
<Component {...pageProps} />
</div>
<div className="absolute bottom-3 text-center right-3 mx-auto hover:text-blue-500">
<Link href="/privacy">
Privacy
</Link>
</div>
</main>
</>}
{!renderFullLayout && <>
<Component {...pageProps} />
</>}
</MantineProvider>
</StoreProvider>
);
}
Loading

0 comments on commit 873579e

Please sign in to comment.