From 1e6a8bb74a8d54551bf25eda76a97d305825d75c Mon Sep 17 00:00:00 2001 From: GurTati <118075413+gurtatiLND@users.noreply.github.com> Date: Tue, 1 Oct 2024 15:29:48 +0100 Subject: [PATCH 1/4] add functionality to the header --- package-lock.json | 75 ++++++++++++++++++++++++++++++++++++++--- package.json | 4 ++- src/sections/Header.tsx | 57 ++++++++++++++++++++++++------- tailwind.config.js | 4 ++- 4 files changed, 122 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2c90bbc..07b1bee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,10 @@ "name": "mood-time-app", "version": "0.0.0", "dependencies": { + "@types/react-router-dom": "^5.3.3", "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^6.26.2" }, "devDependencies": { "@eslint/js": "^9.9.0", @@ -1070,6 +1072,15 @@ "node": ">=14" } }, + "node_modules/@remix-run/router": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", + "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.23.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.23.0.tgz", @@ -1346,6 +1357,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", + "license": "MIT" + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -1357,14 +1374,12 @@ "version": "15.7.13", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", - "dev": true, "license": "MIT" }, "node_modules/@types/react": { "version": "18.3.10", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.10.tgz", "integrity": "sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==", - "dev": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -1381,6 +1396,27 @@ "@types/react": "*" } }, + "node_modules/@types/react-router": { + "version": "5.1.20", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz", + "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==", + "license": "MIT", + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*" + } + }, + "node_modules/@types/react-router-dom": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz", + "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==", + "license": "MIT", + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*", + "@types/react-router": "*" + } + }, "node_modules/@types/tailwindcss": { "version": "3.0.11", "resolved": "https://registry.npmjs.org/@types/tailwindcss/-/tailwindcss-3.0.11.tgz", @@ -2030,7 +2066,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, "license": "MIT" }, "node_modules/debug": { @@ -3558,6 +3593,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", + "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", + "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.2", + "react-router": "6.26.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 6d987bd..5f8bc21 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,10 @@ "preview": "vite preview" }, "dependencies": { + "@types/react-router-dom": "^5.3.3", "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^6.26.2" }, "devDependencies": { "@eslint/js": "^9.9.0", diff --git a/src/sections/Header.tsx b/src/sections/Header.tsx index e67e3de..3e1fb06 100644 --- a/src/sections/Header.tsx +++ b/src/sections/Header.tsx @@ -1,20 +1,53 @@ -import React from "react"; +import React, { useState} from "react"; +import {Link} from 'react-router-dom'; // declare the component with a capitalised name const Header: React.FC = () => { - return ( - ) } diff --git a/tailwind.config.js b/tailwind.config.js index c189a4a..a3ee00c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,8 @@ /** @type {import('tailwindcss').Config} */ export default { - content: [], + content: [ + "./src/**/*.{js,jsx,ts,tsx}", + ], theme: { extend: {}, }, From 2af61944acc6d23d4c0b89e714ecb8276db8c5f6 Mon Sep 17 00:00:00 2001 From: GurTati <118075413+gurtatiLND@users.noreply.github.com> Date: Tue, 1 Oct 2024 16:09:05 +0100 Subject: [PATCH 2/4] fix the tailwind style --- postcss.config.js | 9 ++++----- src/App.tsx | 2 +- src/index.css | 5 ++++- src/sections/Header.tsx | 4 ++-- src/styles.css | 4 ---- tailwind.config.js | 2 +- 6 files changed, 12 insertions(+), 14 deletions(-) diff --git a/postcss.config.js b/postcss.config.js index 4d95642..15493fe 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,7 +1,6 @@ export default { - content: ['./src/**/*.{js,ts,jsx,tsx}'], - theme: { - extend: {}, + plugins: { + tailwindcss: {}, + autoprefixer: {}, }, - plugins: [], -}; + }; diff --git a/src/App.tsx b/src/App.tsx index e80bb74..18da698 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,7 +12,7 @@ function App() {