Xanderbilla-ui

.github/workflows/build.yml

@@ -0,0 +1,7 @@
+name: Build
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3

.gitignore

@@ -1,42 +1,44 @@
-# Dependencies
+# dependencies
 /node_modules
 /.pnp
 .pnp.js
 
-# Testing
+# testing
 /coverage
 
-# Next.js
+# next.js
 /.next/
 /out/
 
-# Production
+# production
 /build
 
-# Misc
+# misc
 .DS_Store
 *.pem
 
-# Debug
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# Local env files
+# local env files
 .env*.local
 .env
 
-# Vercel
+# vercel
 .vercel
 
-# TypeScript
+# typescript
 *.tsbuildinfo
 next-env.d.ts
 
-# IDE
-.idea
-.vscode
+# IDE files
+.idea/
+.vscode/
+*.swp
+*.swo
 
-# Cache
-.cache
-.npm
+# logs
+logs
+*.log

README.md

@@ -1,52 +0,0 @@
-# 🌌 NebulaS3 - Advanced AWS S3 Management
-
-## 📋 Overview
-
-NebulaS3 is an advanced Amazon S3 management application providing secure interaction with AWS S3 storage. It simplifies bucket operations while ensuring robust authentication through AWS STS.
-
-## ⭐ Features
-
-- 🔐 Secure AWS STS Authentication
-- 🪣 Create, List, and Delete S3 Buckets
-- 🔑 Session-Based Authentication with Temporary Credentials
-- 🖥️ User-Friendly Interface
-- 🔄 Continuous Feature Updates
-
-## 🚀 Getting Started
-
-### 🔗 Quick Access
-
-**Live Application:** [https://nebulas3.vercel.app](https://nebulas3.vercel.app)
-
-### 🔒 Authentication
-
-- 📝 Enter AWS Access Key and Secret Key
-- 🌎 Select AWS Region
-- ⚡ System generates temporary session credentials via STS
-
-## 🛡️ Security
-
-- 🔐 AWS STS integration for secure authentication
-- ⏳ Temporary session tokens
-- 👥 IAM role-based access control
-- 🚫 No credential storage
-
-## 🛠️ Technical Stack
-
-- 🎯 **Frontend:** Next.js 15
-- 🔧 **Backend:** Spring Boot (Java 17)
-- ☁️ **AWS Services:** S3, STS
-- 🔒 **Security:** Role-based authentication
-
-## 📚 Documentation
-
-Comprehensive guides and API references available on our [GitHub Wiki](https://github.com/xanderbilla/nebulas3/wiki)
-
-## 💬 Support
-
-- 🐛 GitHub Issues: [Create an issue](https://github.com/xanderbilla/nebulas3/issues)
-- 📧 Email: [vikas99blr@gmail.com](mailto:vikas99blr@gmail.com)
-
-## 👨‍💻 Author
-
-[Vikas Singh](https://xanderbilla.com)

app/(main)/buckets/layout.tsx

@@ -0,0 +1,63 @@
+import { Metadata, Viewport } from "next";
+import dynamic from "next/dynamic";
+import DashboardNavSkeleton from "@/components/custom-ui/skeleton/DashboardNavSkeleton";
+import BackgroundShape from "@/components/custom-ui/home/BackgroundShape";
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+};
+
+export const metadata: Metadata = {
+  title: "Buckets | Nebula S3",
+  description:
+    "Manage and organize your S3 buckets with Nebula S3. Create, monitor, and maintain your cloud storage buckets efficiently.",
+  keywords: [
+    "S3 Buckets",
+    "Cloud Storage",
+    "Bucket Management",
+    "Storage Organization",
+    "Cloud Infrastructure",
+    "Data Storage",
+    "Bucket Monitoring",
+    "Storage Analytics",
+  ],
+  authors: [{ name: "Nebula S3 Team" }],
+  robots: "index, follow",
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: "https://nebula-s3.com/buckets",
+    title: "NEBULA S3 BUCKETS",
+    description:
+      "Manage and organize your S3 buckets with Nebula S3. Create, monitor, and maintain your cloud storage buckets efficiently.",
+    siteName: "NEBULA S3",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "NEBULA S3 BUCKETS",
+    description:
+      "Manage and organize your S3 buckets with Nebula S3. Create, monitor, and maintain your cloud storage buckets efficiently.",
+    creator: "@nebulas3",
+  },
+};
+
+const DashboardNav = dynamic(() => import("@/components/layout/DashboardNav"), {
+  loading: () => <DashboardNavSkeleton />,
+});
+
+export default function BucketsLayout({
+  children,
+}: {
+  readonly children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen bg-background relative overflow-hidden">
+      <BackgroundShape variant="default" />
+      <DashboardNav />
+      <main className="container mx-auto px-4 py-6 relative z-5">
+        {children}
+      </main>
+    </div>
+  );
+}

app/(main)/buckets/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState, Suspense, useEffect } from "react";
+import dynamic from "next/dynamic";
+import BucketHeaderSkeleton from "@/components/custom-ui/skeleton/bucket-header-skeleton";
+import BucketFiltersSkeleton from "@/components/custom-ui/skeleton/bucket-filters-skeleton";
+import BucketGridSkeleton from "@/components/custom-ui/skeleton/bucket-grid-skeleton";
+
+// Dynamic imports with skeleton loading states
+const BucketHeader = dynamic(
+  () => import("@/components/custom-ui/bucket-component/bucket-header"),
+  {
+    loading: () => <BucketHeaderSkeleton />,
+    ssr: false,
+  }
+);
+
+const BucketFilters = dynamic(
+  () => import("@/components/custom-ui/bucket-component/bucket-filters"),
+  {
+    loading: () => <BucketFiltersSkeleton />,
+    ssr: false,
+  }
+);
+
+const BucketGrid = dynamic(
+  () => import("@/components/custom-ui/bucket-component/bucket-grid"),
+  {
+    loading: () => <BucketGridSkeleton />,
+    ssr: false,
+  }
+);
+
+// Static mock data
+import { mockBuckets } from "@/static/buckets";
+
+export default function BucketsPage() {
+  const [mounted, setMounted] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeFilter, setActiveFilter] = useState<"size" | "date" | null>(
+    null
+  );
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const filteredBuckets = mockBuckets
+    .filter((bucket) =>
+      bucket.bucketName.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+    .sort((a, b) => {
+      if (activeFilter === "size") {
+        const sizeA = parseFloat(a.size);
+        const sizeB = parseFloat(b.size);
+        return sizeB - sizeA;
+      } else if (activeFilter === "date") {
+        return b.createdOn.getTime() - a.createdOn.getTime();
+      }
+      return 0;
+    });
+
+  const handleBucketDelete = (bucketId: string) => {
+    // Implement delete functionality
+    console.log("Delete bucket:", bucketId);
+  };
+
+  if (!mounted) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="space-y-6">
+          <BucketHeaderSkeleton />
+          <BucketFiltersSkeleton />
+          <BucketGridSkeleton />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="space-y-6">
+        <Suspense fallback={<BucketHeaderSkeleton />}>
+          <BucketHeader />
+        </Suspense>
+
+        <Suspense fallback={<BucketFiltersSkeleton />}>
+          <BucketFilters
+            searchTerm={searchQuery}
+            setSearchTerm={setSearchQuery}
+            activeFilter={activeFilter}
+            setActiveFilter={setActiveFilter}
+          />
+        </Suspense>
+
+        <Suspense fallback={<BucketGridSkeleton />}>
+          <BucketGrid buckets={filteredBuckets} onDelete={handleBucketDelete} />
+        </Suspense>
+      </div>
+    </div>
+  );
+}

app/(main)/dashboard/layout.tsx

@@ -0,0 +1,57 @@
+import { Metadata, Viewport } from "next";
+import dynamic from "next/dynamic";
+import DashboardNavSkeleton from "@/components/custom-ui/skeleton/DashboardNavSkeleton";
+import BackgroundShape from "@/components/custom-ui/home/BackgroundShape";
+import Footer from "@/components/layout/Footer";
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+};
+
+export const metadata: Metadata = {
+  title: "DASHBOARD | NEBULA S3",
+  description: "Manage your S3 buckets and objects with Nebula S3 dashboard",
+  keywords: [
+    "S3",
+    "Storage",
+    "Dashboard",
+    "Cloud Storage",
+    "Bucket Management",
+  ],
+  authors: [{ name: "Nebula S3 Team" }],
+  robots: "index, follow",
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: "https://nebula-s3.com/dashboard",
+    title: "NEBULA S3 DASHBOARD",
+    description: "Manage your S3 buckets and objects with Nebula S3 dashboard",
+    siteName: "NEBULA S3",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "NEBULA S3 DASHBOARD",
+    description: "Manage your S3 buckets and objects with Nebula S3 dashboard",
+    creator: "@nebulas3",
+  },
+};
+
+const DashboardNav = dynamic(() => import("@/components/layout/DashboardNav"), {
+  loading: () => <DashboardNavSkeleton />,
+});
+
+export default function DashboardLayout({
+  children,
+}: {
+  readonly children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen bg-background relative overflow-hidden">
+      <BackgroundShape variant="default" />
+      <DashboardNav />
+      <main className="container mx-auto px-4 py-6">{children}</main>
+      <Footer />
+    </div>
+  );
+}

app/(main)/dashboard/page.tsx

@@ -0,0 +1,15 @@
+import { Suspense } from "react";
+import DashboardSkeleton from "@/components/custom-ui/skeleton/DashboardSkeleton";
+import DashboardContent from "@/components/custom-ui/dashboard/DashboardContent";
+
+export default function DashboardPage() {
+  return (
+    <>
+      <main className="container mx-auto p-6 min-h-[calc(100vh-9rem)]">
+        <Suspense fallback={<DashboardSkeleton />}>
+          <DashboardContent />
+        </Suspense>
+      </main>
+    </>
+  );
+}