Skip to content

Commit

Permalink
feat: Add lazy loading for images in README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@doziestar
doziestar committed Jul 5, 2024
1 parent 5e8f8c0 commit c469de0
Showing 1 changed file with 158 additions and 133 deletions.
291 changes: 158 additions & 133 deletions web/components/Dashboard/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,143 +1,168 @@
/* eslint-disable react/no-unescaped-entities */

"use client";
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Link from "next/link";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { ChromeIcon, GithubIcon } from "../Icons/icons";

export function Auth() {
const [isSignUp, setIsSignUp] = useState(false);
const toggleForm = () => setIsSignUp(!isSignUp);
import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { Header } from "./Header";
import { DatabaseCard } from "../Cards/DatabaseCard";
import { LogCard } from "../Cards/LogCard";
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from "@/components/ui/card";
import { Sidebar } from "./SideBar";
import { APICard } from "../Cards/ApiCard";
import { useAnimations } from "@/hooks/animation/useAnimation";

interface DashboardProps {}

export const Dashboard: React.FC<DashboardProps> = () => {
const [isSidebarExpanded, setIsSidebarExpanded] = useState(false);
const [isDesktop, setIsDesktop] = useState(false);
const { smoothAppear } = useAnimations();

useEffect(() => {
const handleResize = () => {
setIsDesktop(window.innerWidth >= 1024);
};
handleResize();
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);

return (
<div className="flex min-h-[100dvh] flex-col items-center justify-center bg-gradient-to-br from-background via-primary/5 to-secondary/10">
<motion.div
className="w-full max-w-md space-y-8"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<Card className="glassmorphic">
<CardHeader>
<CardTitle className="text-center text-3xl font-bold">
{isSignUp ? "Create your account" : "Sign in to your account"}
</CardTitle>
</CardHeader>
<CardContent>
<form className="space-y-6">
<div>
<Label htmlFor="email" className="block text-sm font-medium">
Email address
</Label>
<Input
id="email"
type="email"
autoComplete="email"
required
className="mt-1 block w-full"
/>
</div>
<div>
<Label htmlFor="password" className="block text-sm font-medium">
Password
</Label>
<Input
id="password"
type="password"
autoComplete="current-password"
required
className="mt-1 block w-full"
/>
</div>
<AnimatePresence>
{isSignUp && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: "auto" }}
exit={{ opacity: 0, height: 0 }}
transition={{ duration: 0.3 }}
>
<Label
htmlFor="confirm-password"
className="block text-sm font-medium"
>
Confirm Password
</Label>
<Input
id="confirm-password"
type="password"
required
className="mt-1 block w-full"
<div className="flex h-screen overflow-hidden bg-gradient-to-br from-background via-primary/5 to-secondary/10">
<Sidebar
isExpanded={isSidebarExpanded}
setIsExpanded={setIsSidebarExpanded}
/>
<div className="flex-1 flex flex-col overflow-hidden ml-16 lg:ml-16">
<Header
onToggleSidebar={() => setIsSidebarExpanded(!isSidebarExpanded)}
showToggle={true}
isSidebarExpanded={isSidebarExpanded}
/>
<motion.main
className="flex-1 overflow-auto p-4 lg:p-6"
initial="hidden"
animate="visible"
variants={{
hidden: { opacity: 0 },
visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
}}
>
<div className="max-w-[2000px] mx-auto space-y-6">
<motion.div variants={smoothAppear}>
<Card className="glassmorphic">
<CardHeader>
<CardTitle>Databases</CardTitle>
<CardDescription>
Manage and monitor your database connections and
performance.
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<DatabaseCard
title="MySQL"
description="View connection details, query logs, and performance metrics."
connections={12}
/>
<DatabaseCard
title="PostgreSQL"
description="View connection details, query logs, and performance metrics."
connections={8}
/>
<DatabaseCard
title="MongoDB"
description="View connection details, query logs, and performance metrics."
connections={6}
/>
<DatabaseCard
title="Redis"
description="View connection details, query logs, and performance metrics."
connections={4}
/>
</motion.div>
)}
</AnimatePresence>
{!isSignUp && (
<div className="flex items-center justify-between">
<div className="flex items-center">
<Checkbox id="remember-me" className="h-4 w-4 rounded" />
<Label htmlFor="remember-me" className="ml-2 block text-sm">
Remember me
</Label>
</div>
<div className="text-sm">
<Link
href="#"
className="font-medium text-primary hover:text-primary/80"
prefetch={false}
>
Forgot your password?
</Link>
</div>
</div>
)}
<Button type="submit" className="w-full justify-center">
{isSignUp ? "Sign up" : "Sign in"}
</Button>
</form>
<div className="mt-6">
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-muted" />
</div>
<div className="relative flex justify-center text-sm">
<span className="bg-background px-2 text-muted-foreground">
Or continue with
</span>
</div>
</div>
<div className="mt-6 grid grid-cols-2 gap-3">
<Button variant="outline" className="w-full justify-center">
<ChromeIcon className="mr-2 h-5 w-5" />
Google
</Button>
<Button variant="outline" className="w-full justify-center">
<GithubIcon className="mr-2 h-5 w-5" />
Github
</Button>
</div>
</CardContent>
</Card>
</motion.div>

<div className="grid gap-6 lg:grid-cols-2">
<motion.div variants={smoothAppear}>
<Card className="glassmorphic">
<CardHeader>
<CardTitle>Logs</CardTitle>
<CardDescription>
Monitor and analyze your application and infrastructure
logs.
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<LogCard
title="Application Logs"
description="View and search your application logs for errors and warnings."
entries={1234}
/>
<LogCard
title="Infrastructure Logs"
description="View and search your infrastructure logs for system events."
entries={3456}
/>
</div>
</CardContent>
</Card>
</motion.div>

<motion.div variants={smoothAppear}>
<Card className="glassmorphic">
<CardHeader>
<CardTitle>APIs</CardTitle>
<CardDescription>
Monitor and manage your API integrations and usage.
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-4 sm:grid-cols-2">
<APICard
name="User Authentication"
endpoint="/api/auth"
method="POST"
status="Active"
/>
<APICard
name="Product Catalog"
endpoint="/api/products"
method="GET"
status="Active"
/>
<APICard
name="Order Processing"
endpoint="/api/orders"
method="PUT"
status="Inactive"
/>
<APICard
name="Legacy Payment Gateway"
endpoint="/api/v1/payments"
method="POST"
status="Deprecated"
/>
</div>
</CardContent>
</Card>
</motion.div>
</div>
</CardContent>
</Card>
<div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
<span>
{isSignUp ? "Already have an account?" : "Don't have an account?"}
</span>
<Button
variant="link"
onClick={toggleForm}
className="font-medium text-primary hover:text-primary/80"
>
{isSignUp ? "Sign in" : "Sign up"}
</Button>
</div>
</motion.div>
</div>
</motion.main>
</div>
</div>
);
}
};

export default Auth;
export default Dashboard;

0 comments on commit c469de0

Please sign in to comment.