mirror of
https://github.com/waku-org/js-waku-lab.git
synced 2025-01-12 18:14:12 +00:00
chore: connection status
This commit is contained in:
parent
0d86689931
commit
baa5145ff1
@ -12,6 +12,7 @@ import { BlockPayload, getMessagesFromStore, subscribeToFilter } from './lib/wak
|
|||||||
import TelemetryOptIn from './components/TelemetryOptIn';
|
import TelemetryOptIn from './components/TelemetryOptIn';
|
||||||
import TelemetryPage from './components/TelemetryPage';
|
import TelemetryPage from './components/TelemetryPage';
|
||||||
import SignSharedChain from './components/Chain/SignSharedChain'
|
import SignSharedChain from './components/Chain/SignSharedChain'
|
||||||
|
import ConnectionStatus from '@/components/ConnectionStatus';
|
||||||
|
|
||||||
type Status = 'success' | 'in-progress' | 'error';
|
type Status = 'success' | 'in-progress' | 'error';
|
||||||
|
|
||||||
@ -132,6 +133,9 @@ function App() {
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background text-foreground">
|
<div className="min-h-screen bg-background text-foreground">
|
||||||
<Header wakuStatus={wakuStatus} />
|
<Header wakuStatus={wakuStatus} />
|
||||||
|
<div className="md:hidden">
|
||||||
|
<ConnectionStatus filter={wakuStatus.filter} store={wakuStatus.store} />
|
||||||
|
</div>
|
||||||
<main className="container mx-auto px-4 py-4 md:py-8 max-w-7xl">
|
<main className="container mx-auto px-4 py-4 md:py-8 max-w-7xl">
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="" element={<Home />} />
|
<Route path="" element={<Home />} />
|
||||||
|
53
examples/buddybook/src/components/ConnectionStatus.tsx
Normal file
53
examples/buddybook/src/components/ConnectionStatus.tsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Card } from "@/components/ui/card";
|
||||||
|
import { Loader2, CheckCircle2, XCircle } from "lucide-react";
|
||||||
|
import type { Status } from '@/App';
|
||||||
|
|
||||||
|
interface ConnectionStatusProps {
|
||||||
|
filter: Status;
|
||||||
|
store: Status;
|
||||||
|
}
|
||||||
|
|
||||||
|
const StatusIndicator: React.FC<{ status: Status; label: string }> = ({ status, label }) => {
|
||||||
|
const getStatusIcon = () => {
|
||||||
|
switch (status) {
|
||||||
|
case 'success':
|
||||||
|
return <CheckCircle2 className="h-4 w-4 text-green-500" />;
|
||||||
|
case 'error':
|
||||||
|
return <XCircle className="h-4 w-4 text-red-500" />;
|
||||||
|
case 'in-progress':
|
||||||
|
return <Loader2 className="h-4 w-4 animate-spin text-yellow-500" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = () => {
|
||||||
|
switch (status) {
|
||||||
|
case 'success':
|
||||||
|
return 'bg-green-500/10 text-green-500';
|
||||||
|
case 'error':
|
||||||
|
return 'bg-red-500/10 text-red-500';
|
||||||
|
case 'in-progress':
|
||||||
|
return 'bg-yellow-500/10 text-yellow-500';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`flex items-center gap-2 px-2 py-1 rounded-full ${getStatusColor()}`}>
|
||||||
|
{getStatusIcon()}
|
||||||
|
<span className="text-xs font-medium">{label}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ConnectionStatus: React.FC<ConnectionStatusProps> = ({ filter, store }) => {
|
||||||
|
return (
|
||||||
|
<Card className="fixed bottom-4 left-4 right-4 md:static md:bottom-auto md:left-auto p-2 bg-background/80 backdrop-blur-sm border shadow-lg z-50 md:z-auto">
|
||||||
|
<div className="flex flex-row justify-around md:justify-start md:gap-4">
|
||||||
|
<StatusIndicator status={filter} label="Filter" />
|
||||||
|
<StatusIndicator status={store} label="Store" />
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ConnectionStatus;
|
@ -1,6 +1,5 @@
|
|||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||||
import { Cross2Icon } from "@radix-ui/react-icons"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
@ -36,9 +35,14 @@ const DialogContent = React.forwardRef<
|
|||||||
<DialogPrimitive.Content
|
<DialogPrimitive.Content
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200",
|
"fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200",
|
||||||
"rounded-lg",
|
"p-4 md:p-6",
|
||||||
"max-h-[85vh] overflow-y-auto",
|
"rounded-t-lg md:rounded-lg",
|
||||||
|
"max-h-[95vh] md:max-h-[85vh]",
|
||||||
|
"w-full md:max-w-lg",
|
||||||
|
"bottom-0 md:bottom-auto",
|
||||||
|
"overflow-y-auto",
|
||||||
|
"focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user