Skip to content

Commit

Permalink
update alert component
Browse files Browse the repository at this point in the history
  • Loading branch information
Jennievon committed Nov 14, 2023
1 parent ba57f4f commit 3039530
Show file tree
Hide file tree
Showing 9 changed files with 117 additions and 45 deletions.
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import React from 'react'
import Header from './header'
import Footer from './footer'
import React from "react";
import Header from "./header";
import Footer from "./footer";

interface LayoutProps {
children: React.ReactNode
children: React.ReactNode;
}

const Layout = ({ children }: LayoutProps) => {
return (
<div className="hidden flex-col md:flex">
<div className="flex flex-col min-h-screen">
<div className="flex-col md:flex">
<div className="flex flex-col min-h-screen max-w-[1400px] mx-auto">
<Header />
<div className="flex-1 space-y-4 p-8 pt-6">{children}</div>
<Footer />
</div>
</div>
)
}
);
};

export default Layout
export default Layout;
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function Header() {
</Link>
<MainNav className="mx-6" />
<div className="ml-auto flex items-center space-x-4">
<Search />
{/* <Search /> */}
<ModeToggle />
<ConnectWalletButton />
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,14 @@ const ConnectWalletButton = ({ children }: { children?: React.ReactNode }) => {
{walletConnected ? (
<>
<LinkBreak2Icon className="w-4 h-4 mr-2" />
Disconnect
<span className="sm:hidden">Disconnect Wallet</span>
</>
) : (
<>
<Link2Icon className="w-4 h-4 mr-2" />
Connect
<span className="sm:hidden">Connect to Metamask</span>
</>
)}{" "}
Wallet
)}
</Button>
</>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,44 +70,43 @@ export default function Dashboard() {
];

const RECENT_DATA = [
{
title: "Recent Batches",
data: batches,
component: <RecentBatches batches={batches} />,
goTo: "/batches",
},
{
title: "Recent Blocks",
data: blocks,
component: <RecentBlocks blocks={blocks} />,
goTo: "/blocks",
className: "sm:col-span-1 md:col-span-6 lg:col-span-3",
},
{
title: "Recent Batches",
data: batches,
component: <RecentBatches batches={batches} />,
goTo: "/batches",
className: "sm:col-span-1 md:col-span-3 lg:col-span-3",
},
{
title: "Recent Transactions",
data: transactions,
component: <RecentTransactions transactions={transactions} />,
goTo: "/transactions",
className: "sm:col-span-1 md:col-span-3 lg:col-span-3",
},
];

return (
<div className="flex-1 space-y-4 p-8 pt-6">
<>
<div className="flex items-center justify-between space-y-2">
<h2 className="text-3xl font-bold tracking-tight">Obscuroscan</h2>
<div className="flex items-center space-x-2">
<CalendarDateRangePicker />
<Button>Download</Button>
</div>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
{DASHBOARD_DATA.map((item: any, index) => (
<AnalyticsCard key={index} item={item} />
))}
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-9">
<div className="grid gap-4 md:grid-cols-6 lg:grid-cols-9">
{RECENT_DATA.map((item: any, index) => (
<Card key={index} className="col-span-3">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<Card key={index} className={item.className}>
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-3">
<CardTitle>{item.title}</CardTitle>
<Link
href={{
Expand All @@ -119,7 +118,7 @@ export default function Dashboard() {
</Button>
</Link>
</CardHeader>
<CardContent>
<CardContent className="p-3">
{item.data ? (
item.component
) : (
Expand All @@ -129,6 +128,6 @@ export default function Dashboard() {
</Card>
))}
</div>
</div>
</>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,15 @@ export function RecentBatches({ batches }: { batches: any }) {
<AvatarFallback>BN</AvatarFallback>
</Avatar>
<div className="ml-4 space-y-1">
<p className="text-sm font-medium leading-none">
Batch #{batch?.number}
</p>
<p className="text-sm text-muted-foreground">
<p className="text-sm font-medium leading-none">#{batch?.number}</p>
<p className="text-sm text-muted-foreground word-break-all">
{formatTimeAgo(batch?.timestamp)}
</p>
</div>
<div className="ml-auto font-medium">
<div className="ml-auto font-medium min-w-[140px]">
<TruncatedAddress address={batch?.hash} />
</div>
<div className="ml-auto font-medium">
<div className="ml-auto font-medium max-w-[100px]">
<Link
href={{
pathname: `/batches/${batch?.number}`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,16 @@ export function RecentBlocks({ blocks }: { blocks: any }) {
</Avatar>
<div className="ml-4 space-y-1">
<p className="text-sm font-medium leading-none">
Block #{block?.blockHeader?.number}
#{block?.blockHeader?.number}
</p>
<p className="text-sm text-muted-foreground">
<p className="text-sm text-muted-foreground word-break-all">
{formatTimeAgo(block?.blockHeader?.timestamp)}
</p>
</div>
<div className="ml-auto font-medium">
<div className="ml-auto font-medium min-w-[140px]">
<TruncatedAddress address={block?.blockHeader?.hash} />
</div>
<div className="ml-auto font-medium">
<div className="ml-auto font-medium max-w-[50px]">
<Link
href={{
pathname: `/blocks/${block?.blockHeader?.number}`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function RecentTransactions({ transactions }: { transactions: any }) {
</Avatar>
<div className="ml-4 space-y-1">
<p className="text-sm font-medium leading-none">
Batch Height: #{transaction?.BatchHeight}
Height: #{transaction?.BatchHeight}
</p>
</div>
<div className="ml-auto font-medium">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,24 @@
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Terminal } from "lucide-react";
import React from "react";

export default function Decrypt() {
return (
<div className="flex flex-col items-center justify-center h-screen">
<h1 className="text-4xl font-bold text-center text-primary">Decrypt</h1>
</div>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Static Keys</CardTitle>
</CardHeader>
<CardContent>
<Alert>
<Terminal className="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components and dependencies to your app using the cli.
</AlertDescription>
</Alert>
</CardContent>
</Card>
);
}
59 changes: 59 additions & 0 deletions tools/obscuroscan_v3/frontend/components/ui/alert.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/src/lib/utils"

const alertVariants = cva(
"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
{
variants: {
variant: {
default: "bg-background text-foreground",
destructive:
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
},
},
defaultVariants: {
variant: "default",
},
}
)

const Alert = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
<div
ref={ref}
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
))
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
{...props}
/>
))
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm [&_p]:leading-relaxed", className)}
{...props}
/>
))
AlertDescription.displayName = "AlertDescription"

export { Alert, AlertTitle, AlertDescription }

0 comments on commit 3039530

Please sign in to comment.