diff --git a/package-lock.json b/package-lock.json index 6ebafc1..68720a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "framer-motion": "^11.16.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.4.0", "react-router": "^7.1.1", "tailwind-merge": "^2.6.0" }, @@ -4600,6 +4601,15 @@ "react": "^18.3.1" } }, + "node_modules/react-icons": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index e743741..e5192af 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "framer-motion": "^11.16.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.4.0", "react-router": "^7.1.1", "tailwind-merge": "^2.6.0" }, diff --git a/src/App.jsx b/src/App.jsx index 7a3241f..7f55a9e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,18 +1,23 @@ import { Route, Routes } from "react-router" import HomePage from "./pages/home" -import Header from"./components/header" +import Header from "./components/header" import Footer from "./components/footer" import PortfolioPage from "./pages/portfolio" +import { ThemeProvider } from "./context/ThemeContext" export default function App() { return (
-
- - } /> - } /> - -
) } diff --git a/src/assets/icons/Camera.png b/src/assets/icons/Camera.png new file mode 100644 index 0000000..492473d Binary files /dev/null and b/src/assets/icons/Camera.png differ diff --git a/src/assets/images/temp-logo.png b/src/assets/images/temp-logo.png new file mode 100644 index 0000000..0ede2de Binary files /dev/null and b/src/assets/images/temp-logo.png differ diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx index 86f19be..849c8d8 100644 --- a/src/components/header/index.jsx +++ b/src/components/header/index.jsx @@ -1,5 +1,95 @@ -export default function Header () { +import { Link } from "react-router" +import logo from "../../assets/images/temp-logo.png" +import { FiCamera } from "react-icons/fi"; +import { FaRegUser } from "react-icons/fa"; +import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai' +import { useState } from "react"; +import { useTheme } from "../../context/ThemeContext" + +export default function Header() { + const [nav, setNav] = useState(false) + const { theme } = useTheme() + + const handleNav = () => { + setNav(!nav) + } + return ( -

PClub!

+ <> +
+ + PClub Logo + +
+ + Events + + + Members + + + Blogs + + | + +
+ +

Photo Reel

+
+ +
+
+ +
+
+
+ +

Club Member

+
+
+ +
+
+
+
+ {nav ? : } +
+ +
+
+ ) } \ No newline at end of file diff --git a/src/context/TabContext.jsx b/src/context/TabContext.jsx index ff84d7e..2b0e05a 100644 --- a/src/context/TabContext.jsx +++ b/src/context/TabContext.jsx @@ -4,67 +4,67 @@ import { useState } from "react"; export const TabContext = createContext(null); export const TabContextProvider = (props) => { - // the items that are to be shown on the menu bar - const navItems = [ - { name: 'View all', href: '#' }, - { name: 'Management', href: '#' }, - { name: 'Design', href: '#' }, - { name: 'Photographers', href: '#' }, - { name: 'Operations', href: '#' } - ]; + // the items that are to be shown on the menu bar + const navItems = [ + { name: 'View all', href: '#' }, + { name: 'Management', href: '#' }, + { name: 'Design', href: '#' }, + { name: 'Photographers', href: '#' }, + { name: 'Operations', href: '#' } + ]; - // the team members detail(may come from some CMS in future) - const teamMembers = [ - { - id:'1', - name: 'Emily Donnavan', - role: 'Product Lead', - team: 'Management', - imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300', - }, - { - id:'2', - name: 'Jessica Dobrev', - role: 'Backend Lead', - team: 'Management', - imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300', - }, - { - id:'3', - name: 'Drew Cano', - role: 'Head of UX', - team: 'Operations', - imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300', - }, - { - id:'4', - name: 'Emily Donnavan', - role: 'Product Lead', - team: 'Photographers', - imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300', - }, - { - id:'5', - name: 'Jessica Dobrev', - role: 'Backend Lead', - team: 'Design', - imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300', - }, - { - id:'6', - name: 'Drew Cano', - role: 'Head of UX', - team: 'Design', - imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300', - }, - ]; - - // state to control the selected tab - const [activeItem, setActiveItem] = useState('View all'); + // the team members detail(may come from some CMS in future) + const teamMembers = [ + { + id: '1', + name: 'Emily Donnavan', + role: 'Product Lead', + team: 'Management', + imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300', + }, + { + id: '2', + name: 'Jessica Dobrev', + role: 'Backend Lead', + team: 'Management', + imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300', + }, + { + id: '3', + name: 'Drew Cano', + role: 'Head of UX', + team: 'Operations', + imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300', + }, + { + id: '4', + name: 'Emily Donnavan', + role: 'Product Lead', + team: 'Photographers', + imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300', + }, + { + id: '5', + name: 'Jessica Dobrev', + role: 'Backend Lead', + team: 'Design', + imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300', + }, + { + id: '6', + name: 'Drew Cano', + role: 'Head of UX', + team: 'Design', + imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300', + }, + ]; - return ( - - {props.children} - - ) + // state to control the selected tab + const [activeItem, setActiveItem] = useState('View all'); + + return ( + + {props.children} + + ) } \ No newline at end of file diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx new file mode 100644 index 0000000..7c0d34c --- /dev/null +++ b/src/context/ThemeContext.jsx @@ -0,0 +1,29 @@ +import { useContext, useState, useEffect } from 'react'; +import PropTypes from 'prop-types'; +import { ThemeContext } from './ThemeContextValue'; + +export function ThemeProvider({ children }) { + const [theme, setTheme] = useState('light'); + + useEffect(() => { + document.documentElement.setAttribute('data-theme', theme); + }, [theme]); + + const toggleTheme = () => { + setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light'); + }; + + return ( + + {children} + + ); +} + +ThemeProvider.propTypes = { + children: PropTypes.node.isRequired +}; + +export function useTheme() { + return useContext(ThemeContext); +} \ No newline at end of file diff --git a/src/context/ThemeContextValue.js b/src/context/ThemeContextValue.js new file mode 100644 index 0000000..b8f73ee --- /dev/null +++ b/src/context/ThemeContextValue.js @@ -0,0 +1,3 @@ +import { createContext } from 'react'; + +export const ThemeContext = createContext(); \ No newline at end of file diff --git a/src/index.css b/src/index.css index c7a02bf..477b53b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,10 +1,13 @@ +@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Dela+Gothic+One&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; + * { box-sizing: border-box; margin: 0; padding: 0; - font-family: sans-serif; -} + font-family: 'DM Sans', sans-serif; +} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index b409696..5be6062 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,6 +1,7 @@ import { StrictMode } from "react" import { createRoot } from "react-dom/client" import "./index.css" +import "./styles/themes.css" import App from "./App.jsx" import { BrowserRouter } from "react-router" import { TabContextProvider } from "./context/TabContext.jsx" diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000..e104a89 --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'); \ No newline at end of file diff --git a/src/styles/themes.css b/src/styles/themes.css new file mode 100644 index 0000000..0d95038 --- /dev/null +++ b/src/styles/themes.css @@ -0,0 +1,23 @@ +[data-theme="light"] { + --primary: #000000; + --secondary: #C8C8C8; + --tertiary: #9F9D9D; + --complement-primary: #FFFFFF; + --complement-secondary: #e2e2e2; + --accent-1: #291D1D; + --accent-2: #C4C4C4; + --highlight: #9EE068; + --navbar: rgba(255, 239, 239, 0.8); +} + +[data-theme="dark"] { + --primary: #FFFFFF; + --secondary: #e3e3e3; + --tertiary: #9F9D9D; + --complement-primary: #000000; + --complement-secondary: #1a1a1a; + --accent-1: #291D1D; + --accent-2: #C4C4C4; + --highlight: #9EE068; + --navbar: rgba(20, 20, 20, 0.8); +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index b3fec8e..0b3ee56 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,7 +6,20 @@ export default { ], theme: { extend: { + colors: { + primary: 'var(--primary)', + secondary: 'var(--secondary)', + tertiary: 'var(--tertiary)', + complementPrimary: 'var(--complement-primary)', + complementSecondary: 'var(--complement-secondary)', + accent1: 'var(--accent-1)', + accent2: 'var(--accent-2)', + highlight: 'var(--highlight)', + navbar: 'var(--navbar)' + }, fontFamily: { + test: ['Times New Roman', 'serif'], + dmSans: ['DM Sans', 'sans-serif'], inter: ['Inter', 'sans-serif'], // Add Inter font }, },