Hugging Face's logo

Spaces:
Hans-Den
/
nexora
Running

App Files Community
ChandimaPrabath commited on
Commit
aa651ae
•
1 Parent(s): 2f6d768

logo, header added

Browse files
Files changed (19) hide show
  1. frontend/public/android-chrome-192x192.png +0 -0
  2. frontend/public/android-chrome-512x512.png +0 -0
  3. frontend/public/apple-touch-icon.png +0 -0
  4. frontend/public/favicon-16x16.png +0 -0
  5. frontend/public/favicon-32x32.png +0 -0
  6. frontend/public/favicon.ico +0 -0
  7. frontend/public/image11.jpg +0 -0
  8. frontend/public/image12.jpg +0 -0
  9. frontend/public/image13.jpg +0 -0
  10. frontend/public/logo.jpg +0 -0
  11. frontend/public/next.svg +0 -1
  12. frontend/public/site.webmanifest +1 -0
  13. frontend/public/vercel.svg +0 -1
  14. frontend/src/app/globals.css +4 -0
  15. frontend/src/app/layout.js +4 -1
  16. frontend/src/components/Header.css +34 -0
  17. frontend/src/components/Header.js +28 -0
  18. frontend/src/components/Sidebar.css +10 -3
  19. frontend/src/components/Sidebar.js +13 -1
frontend/public/android-chrome-192x192.png ADDED
frontend/public/android-chrome-512x512.png ADDED
frontend/public/apple-touch-icon.png ADDED
frontend/public/favicon-16x16.png ADDED
frontend/public/favicon-32x32.png ADDED
frontend/public/favicon.ico ADDED
frontend/public/image11.jpg ADDED
frontend/public/image12.jpg ADDED
frontend/public/image13.jpg ADDED
frontend/public/logo.jpg ADDED
frontend/public/next.svg DELETED
frontend/public/site.webmanifest ADDED
@@ -0,0 +1 @@
 
 
1
+ {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
frontend/public/vercel.svg DELETED
frontend/src/app/globals.css CHANGED
@@ -7,4 +7,8 @@
7
  body {
8
  font-family: 'Inter', 'Noto Sans', sans-serif;
9
  background-color: #0a0a10;
 
 
 
 
10
  }
 
7
  body {
8
  font-family: 'Inter', 'Noto Sans', sans-serif;
9
  background-color: #0a0a10;
10
+ }
11
+
12
+ header{
13
+
14
  }
frontend/src/app/layout.js CHANGED
@@ -1,9 +1,10 @@
1
  import { Inter } from "next/font/google";
2
  import "./globals.css";
3
- import Sidebar from '@/components/Sidebar';
4
  import { FilmProvider } from "@/context/FilmContext";
5
  import { config } from "@fortawesome/fontawesome-svg-core";
6
  import "@fortawesome/fontawesome-svg-core/styles.css";
 
7
  config.autoAddCss = false;
8
  const inter = Inter({ subsets: ["latin"] });
9
 
@@ -17,7 +18,9 @@ export default function RootLayout({ children }) {
17
  <html lang="en">
18
  <body className={inter.className}>
19
  <header>
 
20
  <Sidebar />
 
21
  </header>
22
  <FilmProvider>{children}</FilmProvider>
23
  </body>
 
1
  import { Inter } from "next/font/google";
2
  import "./globals.css";
3
+ import Sidebar from "@/components/Sidebar";
4
  import { FilmProvider } from "@/context/FilmContext";
5
  import { config } from "@fortawesome/fontawesome-svg-core";
6
  import "@fortawesome/fontawesome-svg-core/styles.css";
7
+ import Header from "@/components/Header";
8
  config.autoAddCss = false;
9
  const inter = Inter({ subsets: ["latin"] });
10
 
 
18
  <html lang="en">
19
  <body className={inter.className}>
20
  <header>
21
+ <link rel="icon" href="/favicon.ico" sizes="any" />
22
  <Sidebar />
23
+ <Header />
24
  </header>
25
  <FilmProvider>{children}</FilmProvider>
26
  </body>
frontend/src/components/Header.css ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .header-container {
2
+ padding: 10px 15px; /* Padding for overall spacing */
3
+ background-image: linear-gradient(180deg, #211d3d, transparent);
4
+ color: white;
5
+ display: flex;
6
+ justify-content: center; /* Center the content horizontally */
7
+ }
8
+
9
+ .header-right {
10
+ display: flex;
11
+ align-items: center; /* Vertically center items */
12
+ gap: 20px; /* Add space between logo and search button */
13
+ }
14
+
15
+ .header-logo-container {
16
+ display: flex;
17
+ align-items: center; /* Vertically center logo and title */
18
+ gap: 10px; /* Space between logo and title */
19
+ }
20
+
21
+ .header-logo {
22
+ border-radius: 10px;
23
+ }
24
+
25
+ .header-title {
26
+ font-size: x-large;
27
+ padding: 0; /* Remove padding if not needed */
28
+ }
29
+
30
+ .search-button{
31
+ right: 0;
32
+ padding: 15px;
33
+ position: absolute;
34
+ }
frontend/src/components/Header.js ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import "./Header.css";
2
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3
+ import { faSearch } from "@fortawesome/free-solid-svg-icons";
4
+ import Image from "next/image";
5
+
6
+ const Header = () => {
7
+ return (
8
+ <div className="header-container">
9
+ <div className="header-right">
10
+ <div className="header-logo-container">
11
+ <h1 className="header-title">Nexora</h1>
12
+ <Image
13
+ className="header-logo"
14
+ src="/android-chrome-192x192.png"
15
+ width={60}
16
+ height={60}
17
+ alt="Nexora Logo"
18
+ />
19
+ </div>
20
+ </div>
21
+ <button className="search-button">
22
+ <FontAwesomeIcon icon={faSearch} size="xl" />
23
+ </button>
24
+ </div>
25
+ );
26
+ };
27
+
28
+ export default Header;
frontend/src/components/Sidebar.css CHANGED
@@ -8,7 +8,7 @@
8
  background-color: #0c0c16;
9
  color: white;
10
  font-family: 'Inter', sans-serif;
11
- transition: width 0.3s;
12
  z-index: 1000;
13
  }
14
 
@@ -29,10 +29,15 @@
29
  .sidebar-header {
30
  display: flex;
31
  align-items: center;
32
- padding-top: 20px;
33
  padding-left: 20px;
34
  }
35
 
 
 
 
 
 
36
  .sidebar-toggle {
37
  background: none;
38
  border: none;
@@ -73,12 +78,14 @@
73
 
74
  .sidebar-link.active {
75
  color: #ffffff;
76
- background-color: #21264a;
 
77
  }
78
 
79
  .sidebar-link:hover {
80
  color: #ffffff;
81
  transform: translateY(-2px);
 
82
  }
83
 
84
  .sidebar-footer {
 
8
  background-color: #0c0c16;
9
  color: white;
10
  font-family: 'Inter', sans-serif;
11
+ transition: width .5s ,height .5s;
12
  z-index: 1000;
13
  }
14
 
 
29
  .sidebar-header {
30
  display: flex;
31
  align-items: center;
32
+ padding-top: 18px;
33
  padding-left: 20px;
34
  }
35
 
36
+ .sidebar-logo{
37
+ border-radius: 10px;
38
+ display: inline;
39
+ }
40
+
41
  .sidebar-toggle {
42
  background: none;
43
  border: none;
 
78
 
79
  .sidebar-link.active {
80
  color: #ffffff;
81
+ background-color: #1c2354;
82
+ border: 1px solid #4339ff;
83
  }
84
 
85
  .sidebar-link:hover {
86
  color: #ffffff;
87
  transform: translateY(-2px);
88
+ border: 1px solid #4339ff;
89
  }
90
 
91
  .sidebar-footer {
frontend/src/components/Sidebar.js CHANGED
@@ -1,6 +1,7 @@
1
  "use client";
2
  import React, { useState, useEffect } from "react";
3
  import Link from "next/link";
 
4
  import { usePathname } from "next/navigation";
5
  import "./Sidebar.css";
6
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -51,7 +52,18 @@ const Sidebar = () => {
51
  <button className="sidebar-toggle" onClick={toggleSidebar}>
52
  <FontAwesomeIcon icon={faBars} size="sm" />
53
  </button>
54
- {isOpen && <h1 className="sidebar-title">Streamz</h1>}
 
 
 
 
 
 
 
 
 
 
 
55
  </div>
56
  <div className="sidebar-content">
57
  {isOpen && (
 
1
  "use client";
2
  import React, { useState, useEffect } from "react";
3
  import Link from "next/link";
4
+ import Image from "next/image";
5
  import { usePathname } from "next/navigation";
6
  import "./Sidebar.css";
7
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
52
  <button className="sidebar-toggle" onClick={toggleSidebar}>
53
  <FontAwesomeIcon icon={faBars} size="sm" />
54
  </button>
55
+ {isOpen && (
56
+ <h1 className="sidebar-title">
57
+ Nexora{" "}
58
+ <Image
59
+ className="sidebar-logo"
60
+ src="/favicon-32x32.png"
61
+ width={32}
62
+ height={32}
63
+ alt="Nexora Logo"
64
+ />
65
+ </h1>
66
+ )}
67
  </div>
68
  <div className="sidebar-content">
69
  {isOpen && (