Initial commit

app/components/error/ErrorView.tsx

@@ -0,0 +1,7 @@
+export function ErrorView() {
+    return (
+        <div>
+            <p>Ups, an unexpected error occurred.</p>
+        </div>
+    );
+}

app/components/footer/Footer.tsx

@@ -0,0 +1,7 @@
+export function Footer() {
+  return (
+    <footer className="mt-8 text-xs text-slate-500">
+      Copyright 2026, Brainster Next. All rights reserved.
+    </footer>
+  );
+}

app/components/header/Header.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router";
+
+function getCurrentTime() {
+  return new Date().toLocaleString();
+}
+
+export function Header() {
+  const [currentTime, setCurrentTime] = useState('');
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(getCurrentTime());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <header className="mb-8">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <p className="text-sm text-slate-500">
+            <Link to="/">Crypto Dashboard</Link>
+          </p>
+          <h1 className="mt-1 text-2xl font-semibold tracking-tight sm:text-3xl">
+            Next Coins
+          </h1>
+        </div>
+
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <div className="relative">
+            <p>{currentTime || '\u00A0'}</p>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

app/components/loading/LoadingView.tsx

@@ -0,0 +1,7 @@
+export function LoadingView() {
+    return (
+        <div className="flex justify-center items-center">
+            <p className="sr-only">Loading...</p>
+        </div>
+    );
+}