wip
This commit is contained in:
Yana
@@ -1,4 +1,11 @@
|
||||
import { Card, CardContent, Typography, Box, IconButton } from "@mui/material";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
Typography,
|
||||
Box,
|
||||
IconButton,
|
||||
Button,
|
||||
} from "@mui/material";
|
||||
import React, { FC, ReactElement, ReactEventHandler, useEffect } from "react";
|
||||
import { ExplorerLineChart, IExplorerLineChartData } from "./ExplorerLineChart";
|
||||
import {
|
||||
@@ -17,6 +24,26 @@ import StarIcon from "@mui/icons-material/Star";
|
||||
import Script from "next/script";
|
||||
import { useMainContext } from "../context/main";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
remark_config: {
|
||||
host: string;
|
||||
site_id: string;
|
||||
components: string[];
|
||||
max_shown_comments: number;
|
||||
theme: string;
|
||||
locale: string;
|
||||
show_email_subscription: boolean;
|
||||
simple_view: boolean;
|
||||
no_footer: boolean;
|
||||
};
|
||||
REMARK42: {
|
||||
createInstance: (config: typeof window.remark_config) => void;
|
||||
changeTheme: (theme: "light" | "dark") => void;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
interface ICardUpDownPriceLineProps {
|
||||
percentage: number;
|
||||
numberWentUp: boolean;
|
||||
@@ -236,7 +263,6 @@ const CardChat = () => {
|
||||
components: ["embed", "last-comments"],
|
||||
max_shown_comments: 100,
|
||||
theme: mode === "light" ? "light" : "dark",
|
||||
page_title: "My custom title for a page",
|
||||
locale: "en",
|
||||
show_email_subscription: false,
|
||||
simple_view: true,
|
||||
@@ -267,7 +293,7 @@ const CardChat = () => {
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<div id="remark42"></div>
|
||||
<div id="remark42" className="remark"></div>
|
||||
<Script
|
||||
id="remark-init"
|
||||
strategy="afterInteractive"
|
||||
@@ -300,6 +326,10 @@ export type ContentCardProps = {
|
||||
qrCode?: ICardQRCodeProps;
|
||||
ratings?: ICardRatingsProps;
|
||||
chat?: boolean;
|
||||
button?: {
|
||||
onClick: () => void;
|
||||
label: string;
|
||||
};
|
||||
};
|
||||
|
||||
export const ExplorerCard: FC<ContentCardProps> = ({
|
||||
@@ -319,6 +349,7 @@ export const ExplorerCard: FC<ContentCardProps> = ({
|
||||
qrCode,
|
||||
ratings,
|
||||
chat,
|
||||
button,
|
||||
}) => (
|
||||
<Card onClick={onClick} sx={{ height: "100%" }}>
|
||||
<CardContent>
|
||||
@@ -357,6 +388,11 @@ export const ExplorerCard: FC<ContentCardProps> = ({
|
||||
)}
|
||||
{paragraph && <Typography>{paragraph}</Typography>}
|
||||
{chat && <CardChat />}
|
||||
{button && (
|
||||
<Button onClick={button.onClick} variant="contained">
|
||||
{button.label}
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import type { Metadata } from 'next'
|
||||
import '@interchain-ui/react/styles'
|
||||
import { App } from './App'
|
||||
import type { Metadata } from "next";
|
||||
import "@interchain-ui/react/styles";
|
||||
import { App } from "./App";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Nym Network Explorer',
|
||||
}
|
||||
title: "Nym Network Explorer",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
@@ -17,5 +17,5 @@ export default function RootLayout({
|
||||
<App>{children}</App>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -85,27 +85,6 @@ const columns: ColumnsType[] = [
|
||||
},
|
||||
];
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
remark_config: {
|
||||
host: string;
|
||||
site_id: string;
|
||||
components: string[];
|
||||
max_shown_comments: number;
|
||||
theme: string;
|
||||
page_title: string;
|
||||
locale: string;
|
||||
show_email_subscription: boolean;
|
||||
simple_view: boolean;
|
||||
no_footer: boolean;
|
||||
};
|
||||
REMARK42: {
|
||||
createInstance: (config: typeof window.remark_config) => void;
|
||||
changeTheme: (theme: "light" | "dark") => void;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows mix node details
|
||||
*/
|
||||
@@ -122,43 +101,43 @@ const PageMixnodeDetailWithState = () => {
|
||||
const isMobile = useIsMobile();
|
||||
const { mode } = useMainContext();
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
// Set Remark42 configuration on the window object
|
||||
window.remark_config = {
|
||||
host: "http://localhost:8081",
|
||||
site_id: "remark42",
|
||||
components: ["embed", "last-comments"],
|
||||
max_shown_comments: 100,
|
||||
theme: mode === "light" ? "light" : "dark",
|
||||
page_title: "My custom title for a page",
|
||||
locale: "en",
|
||||
show_email_subscription: false,
|
||||
simple_view: true,
|
||||
no_footer: true,
|
||||
};
|
||||
// useEffect(() => {
|
||||
// if (typeof window !== "undefined") {
|
||||
// // Set Remark42 configuration on the window object
|
||||
// window.remark_config = {
|
||||
// host: "http://localhost:8081",
|
||||
// site_id: "remark42",
|
||||
// components: ["embed", "last-comments"],
|
||||
// max_shown_comments: 100,
|
||||
// theme: mode === "light" ? "light" : "dark",
|
||||
// page_title: "My custom title for a page",
|
||||
// locale: "en",
|
||||
// show_email_subscription: false,
|
||||
// simple_view: true,
|
||||
// no_footer: true,
|
||||
// };
|
||||
|
||||
// Dynamically load the Remark42 script if it doesn't exist
|
||||
if (!document.getElementById("remark42-script")) {
|
||||
const script = document.createElement("script");
|
||||
script.src = `${window.remark_config.host}/web/embed.js`;
|
||||
script.async = true;
|
||||
script.defer = true;
|
||||
script.id = "remark42-script";
|
||||
document.body.appendChild(script);
|
||||
} else if (window.REMARK42) {
|
||||
// Re-initialize if the script is already loaded
|
||||
window.REMARK42.createInstance(window.remark_config);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
// // Dynamically load the Remark42 script if it doesn't exist
|
||||
// if (!document.getElementById("remark42-script")) {
|
||||
// const script = document.createElement("script");
|
||||
// script.src = `${window.remark_config.host}/web/embed.js`;
|
||||
// script.async = true;
|
||||
// script.defer = true;
|
||||
// script.id = "remark42-script";
|
||||
// document.body.appendChild(script);
|
||||
// } else if (window.REMARK42) {
|
||||
// // Re-initialize if the script is already loaded
|
||||
// window.REMARK42.createInstance(window.remark_config);
|
||||
// }
|
||||
// }
|
||||
// }, []);
|
||||
|
||||
// React to mode changes and update Remark42 theme
|
||||
useEffect(() => {
|
||||
if (window.REMARK42 && window.REMARK42.changeTheme) {
|
||||
window.REMARK42.changeTheme(mode === "dark" ? "dark" : "light");
|
||||
}
|
||||
}, [mode]);
|
||||
// // React to mode changes and update Remark42 theme
|
||||
// useEffect(() => {
|
||||
// if (window.REMARK42 && window.REMARK42.changeTheme) {
|
||||
// window.REMARK42.changeTheme(mode === "dark" ? "dark" : "light");
|
||||
// }
|
||||
// }, [mode]);
|
||||
|
||||
return (
|
||||
<Box component="main">
|
||||
@@ -308,19 +287,6 @@ const PageMixnodeDetailWithState = () => {
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* <div id="remark42"></div>
|
||||
|
||||
<Script
|
||||
id="remark-init"
|
||||
strategy="afterInteractive"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
if (window.REMARK42) {
|
||||
window.REMARK42.createInstance(window.remark_config);
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/> */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<ExplorerCard chat={true} overTitle="Test" />
|
||||
</Grid>
|
||||
|
||||
@@ -101,6 +101,10 @@ const explorerCard: ContentCardProps = {
|
||||
},
|
||||
chat: true,
|
||||
paragraph: "Additional line",
|
||||
button: {
|
||||
onClick: () => {},
|
||||
label: "Label",
|
||||
},
|
||||
};
|
||||
export const DATA_REVALIDATE = 60;
|
||||
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user