diff --git a/package.json b/package.json index 0aff698b4..7b0854d9e 100644 --- a/package.json +++ b/package.json @@ -6,11 +6,12 @@ "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", "@giscus/react": "^2.0.3", - "@mui/material": "^5.9.0", + "@mui/material": "^5.9.1", "@nhost/react": "^0.9.0", "@types/lodash": "^4.14.182", "@types/react": "^18.0.6", "@types/react-dom": "^18.0.2", + "add": "^2.0.6", "axios": "^0.27.2", "date-fns": "^2.28.0", "downloadjs": "^1.4.7", @@ -18,7 +19,7 @@ "git-repo-api": "^0.0.17", "graphql": "^16.5.0", "html-to-image": "^1.9.0", - "json-graphql-parser": "^0.0.16", + "json-graphql-parser": "^0.0.20", "lodash": "^4.17.21", "node-sass": "^7.0.1", "react": "^18.0.0", diff --git a/src/common/services/request/index.js b/src/common/services/request/index.js index 9a3af3117..0dcf6670f 100644 --- a/src/common/services/request/index.js +++ b/src/common/services/request/index.js @@ -1,7 +1,7 @@ import { submit as gsubmit, submit_multi as gsubmit_multi, -} from "json-graphql-parser"; +} from "json-graphql-parser/v2/index.js"; const BACKEND_URL = `${process.env.REACT_APP_NHOST_BACKEND_URL}/${process.env.REACT_APP_NHOST_VERSION}/${process.env.REACT_APP_NHOST_ENDPOINT}`; const header = { diff --git a/src/common/services/request/query/fetch-filter-data.js b/src/common/services/request/query/fetch-filter-data.js index 907132a34..ce022f297 100644 --- a/src/common/services/request/query/fetch-filter-data.js +++ b/src/common/services/request/query/fetch-filter-data.js @@ -4,26 +4,16 @@ export const fetchFilterData = { name: "Fetch_Tags", function: "plays", write: false, - params: [{ play_tags: { tag: ["id", "name"] } }], - filters: [ - { - field: "distinct_on", - value: "id", - }, - ], + return: [{ play_tags: { tag: ["id", "name"] } }], + distinct: "id", }, getAllLevels: { display: "Play Levels", name: "Fetch_Levels", function: "plays", write: false, - params: [{ level: ["id", "name"] }], - filters: [ - { - field: "distinct_on", - value: "level_id", - }, - ], + return: [{ level: ["id", "name"] }], + distinct: "level_id", }, getAllUsers: { @@ -31,12 +21,7 @@ export const fetchFilterData = { name: "Fetch_Users", function: "plays", write: false, - params: [{ user: ["avatarUrl", "displayName", "id"] }], - filters: [ - { - field: "distinct_on", - value: "owner_user_id", - }, - ], + return: [{ user: ["avatarUrl", "displayName", "id"] }], + distinct: "owner_user_id", }, }; diff --git a/src/common/services/request/query/fetch-plays-filter.js b/src/common/services/request/query/fetch-plays-filter.js index 9e1f9f5f8..a2823d55e 100644 --- a/src/common/services/request/query/fetch-plays-filter.js +++ b/src/common/services/request/query/fetch-plays-filter.js @@ -1,11 +1,11 @@ -const env = process.env.NODE_ENV === "development" -const preview = process.env.REACT_APP_PREVIEW_MODE +const env = process.env.NODE_ENV === "development"; +const preview = process.env.REACT_APP_PREVIEW_MODE; const defaultClause = { field: "dev_mode", operator: "eq", value: false, type: "boolean", -} +}; export const FetchPlaysFilter = { // Filter all the featured plays @@ -14,7 +14,7 @@ export const FetchPlaysFilter = { display: "Filter all the featured plays", name: "Fetch_Plays", function: "plays", - params: [ + return: [ "blog", "component", "cover", @@ -33,16 +33,17 @@ export const FetchPlaysFilter = { "video", ], where: { - operator: "and", - clause: [ - defaultClause, - { - field: "featured", - operator: "eq", - value: true, - type: "boolean", - }, - ], + clause: { + operator: "and", + conditions: [ + defaultClause, + { + field: "featured", + operator: "eq", + value: true, + }, + ], + }, }, }; }, @@ -52,7 +53,7 @@ export const FetchPlaysFilter = { display: "Filter Plays by a search string in name or description", name: "Fetch_Plays", function: "plays", - params: [ + return: [ "blog", "component", "cover", @@ -71,21 +72,21 @@ export const FetchPlaysFilter = { "video", ], where: { - operator: "or", - clause: [ - { - field: "name", - operator: "iregex", - value: Obj.name.toLowerCase(), - type: "string", - }, - { - field: "description", - operator: "iregex", - value: Obj.name.toLowerCase(), - type: "string", - }, - ], + clause: { + operator: "or", + conditions: [ + { + field: "name", + operator: "iregex", + value: Obj.name.toLowerCase(), + }, + { + field: "description", + operator: "iregex", + value: Obj.name.toLowerCase(), + }, + ], + }, }, }; }, @@ -100,7 +101,7 @@ export const FetchPlaysFilter = { display: "Filter plays by level, user, language, and multiple tags", name: "Fetch_Plays", function: "plays", - params: [ + return: [ "blog", "component", "cover", @@ -120,28 +121,32 @@ export const FetchPlaysFilter = { ], }; - const clause = { operator: "and", clause: !env && !preview ? [defaultClause] : [] }; + const clause = { + operator: "and", + conditions: !env && !preview ? [defaultClause] : [], + }; Object.keys(Obj).forEach((key) => { const keyName = Obj[key]; if (keyName.length > 0) { const ifTags = key === "tags"; const prepareObject = { - field: ifTags ? "id" : key, + field: ifTags ? "tag_id" : key, operator: "eq", value: ifTags ? keyName[0] : keyName, - type: "string", }; if (ifTags) { - prepareObject.class = "tag"; - prepareObject.node = "play_tags"; + clause.class = "play_tags"; } - clause.clause.push(prepareObject); + clause.conditions.push(prepareObject); } }); - if (!!clause.clause.length) payload.where = clause; + if (!!clause.conditions.length) { + payload.where = payload.where || {}; + payload.where.clause = clause; + } return payload; }, }; diff --git a/src/common/services/request/query/fetch-plays.js b/src/common/services/request/query/fetch-plays.js index e00cc6fd4..2f69f0b84 100644 --- a/src/common/services/request/query/fetch-plays.js +++ b/src/common/services/request/query/fetch-plays.js @@ -6,14 +6,15 @@ export function FetchPlaysByID(id) { const payload = { ...BasiFetchParam }; payload.where = { - clause: [ - { - field: "id", - operator: "eq", - value: id, - type: "string", - }, - ], + clause: { + conditions: [ + { + field: "id", + operator: "eq", + value: id, + }, + ], + }, }; return payload; } @@ -23,7 +24,7 @@ const BasiFetchParam = { name: "Fetch_Plays", function: "plays", write: false, - params: [ + return: [ "blog", "component", "cover", diff --git a/src/common/services/request/query/levels.js b/src/common/services/request/query/levels.js index ae0e1513a..43b0f3299 100644 --- a/src/common/services/request/query/levels.js +++ b/src/common/services/request/query/levels.js @@ -2,5 +2,5 @@ export const fetchAllLevels = { display: "Play Tags", name: "Fetch_Tags", function: "levels", - params: ["id", "name"], + return: ["id", "name"], }; diff --git a/src/common/services/request/query/play.js b/src/common/services/request/query/play.js index f2a2d143d..e2314f6bd 100644 --- a/src/common/services/request/query/play.js +++ b/src/common/services/request/query/play.js @@ -4,6 +4,7 @@ export const createPlayQuery = { function: "insert_plays_one", write: true, object: {}, + return: ["id"], }; export const associatePlayWithTagQuery = { @@ -12,4 +13,5 @@ export const associatePlayWithTagQuery = { function: "insert_play_tags_one", write: true, object: {}, + return: ["id"], }; diff --git a/src/common/services/request/query/tags.js b/src/common/services/request/query/tags.js index 5489da891..d62ee5cb5 100644 --- a/src/common/services/request/query/tags.js +++ b/src/common/services/request/query/tags.js @@ -2,7 +2,7 @@ export const fetchAllTags = { display: "Play Tags", name: "Fetch_Tags", function: "tags", - params: ["id", "name"], + return: ["id", "name"], }; export const createATagQuery = { @@ -11,4 +11,5 @@ export const createATagQuery = { function: "insert_tags_one", write: true, object: {}, + return: ["id"], }; diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index c954d7007..238bcff1d 100644 --- a/src/meta/play-meta.js +++ b/src/meta/play-meta.js @@ -27,7 +27,8 @@ import { NavBar, ContextWithRealUsecases, GitHubUserSearch, - //import play here + DevJokes, +//import play here } from "plays"; export const plays = [ @@ -469,5 +470,18 @@ export const plays = [ blog: "", video: "", language: "js", + }, { + id: 'pl-dev-jokes', + name: 'Dev Jokes', + description: 'Developer jokes is a app where a random developer joke pops up every time you open it or click next joke', + component: () => {return }, + path: '/plays/dev-jokes', + level: 'Intermediate', + tags: '', + github: 'yung-coder', + cover: '', + blog: '', + video: '', + language: 'js' }, //replace new play item here ]; diff --git a/src/plays/dev-jokes/DevJokes.jsx b/src/plays/dev-jokes/DevJokes.jsx new file mode 100644 index 000000000..9e47c4fcf --- /dev/null +++ b/src/plays/dev-jokes/DevJokes.jsx @@ -0,0 +1,51 @@ +import PlayHeader from "common/playlists/PlayHeader"; +import "./devJokes.css"; +import axios from "axios"; +import { useEffect, useState } from "react"; +import Spinner from "./Spinner"; +function DevJokes(props) { + const [joke, setjoke] = useState([]); + const [spinner, setspinner] = useState(false); + const fetch = () => { + setspinner(true); + axios + .get("https://backend-omega-seven.vercel.app/api/getjoke") + .then((response) => { + setjoke(response.data); + setspinner(false); + }); + }; + useEffect(() => { + fetch(); + }, []); + return ( + <> +
+ +
+
+ {spinner ? ( + + ) : ( +
+ {joke.map((value) => { + return ( +
+

{value.question}

+

{value.punchline}

+
+ ); + })} +
+ )} +
+ +
+
+ + ); +} + +export default DevJokes; diff --git a/src/plays/dev-jokes/Readme.md b/src/plays/dev-jokes/Readme.md new file mode 100644 index 000000000..8193c0439 --- /dev/null +++ b/src/plays/dev-jokes/Readme.md @@ -0,0 +1,15 @@ +# Dev jokes + +Developer jokes is a app where a random developer joke pops up every time you open it or click next joke + +## Play Demographic + +- Language: js +- Level: Intermediate + +## Creator Information + +- User: yung-coder +- Gihub Link: https://github.com/yung-coder +- Blog: +- Video: diff --git a/src/plays/dev-jokes/Spinner.jsx b/src/plays/dev-jokes/Spinner.jsx new file mode 100644 index 000000000..c76bb5eaa --- /dev/null +++ b/src/plays/dev-jokes/Spinner.jsx @@ -0,0 +1,11 @@ +import React from "react"; +import "./spinner.css"; + +export default function LoadingSpinner() { + return ( +
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/plays/dev-jokes/background.jpg b/src/plays/dev-jokes/background.jpg new file mode 100644 index 000000000..a6843ceae Binary files /dev/null and b/src/plays/dev-jokes/background.jpg differ diff --git a/src/plays/dev-jokes/cover.png b/src/plays/dev-jokes/cover.png new file mode 100644 index 000000000..84f800c2e Binary files /dev/null and b/src/plays/dev-jokes/cover.png differ diff --git a/src/plays/dev-jokes/devJokes.css b/src/plays/dev-jokes/devJokes.css new file mode 100644 index 000000000..fe8599ef6 --- /dev/null +++ b/src/plays/dev-jokes/devJokes.css @@ -0,0 +1,74 @@ +.maincontanier { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + background-image: url("background.jpg"); + background-position: center; + background-size: cover; + height: 100%; + width: 100%; +} +.jokecontanier { + padding: 20px; + width: 600px; + min-height: 400px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25); + transition: all 0.2s; + margin: 30px 20px 20px; + background-color: rgba(199, 183, 183, 0.4); + font-size: x-large; +} + +.jokecontanier:hover { + box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4); + transform: scale(1.01); +} + +.dev-jokes-btn { + padding: 1em 2.1em 1.1em; + border-radius: 3px; + margin: 8px; + color: black; + background-color: #c2fbd7; + display: inline-block; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; + font-family: sans-serif; + font-weight: 800; + font-size: 0.85em; + text-transform: uppercase; + text-align: center; + text-decoration: none; + box-shadow: rgba(44, 187, 99, 0.2) 0 -25px 18px -14px inset, + rgba(44, 187, 99, 0.15) 0 1px 2px, rgba(44, 187, 99, 0.15) 0 2px 4px, + rgba(44, 187, 99, 0.15) 0 4px 8px, rgba(44, 187, 99, 0.15) 0 8px 16px, + rgba(44, 187, 99, 0.15) 0 16px 32px; + position: relative; +} + +.dev-jokes-btn:hover { + box-shadow: rgba(44, 187, 99, 0.35) 0 -25px 18px -14px inset, + rgba(44, 187, 99, 0.25) 0 1px 2px, rgba(44, 187, 99, 0.25) 0 2px 4px, + rgba(44, 187, 99, 0.25) 0 4px 8px, rgba(44, 187, 99, 0.25) 0 8px 16px, + rgba(44, 187, 99, 0.25) 0 16px 32px; + transform: scale(1.05) rotate(-1deg); +} +@media screen and (max-width: 764px) { + .jokecontanier { + width: 75%; + min-height: 40%; + margin-top: 50px; + font-size: larger; + word-break: break-all; + } + .dev-jokes-btn { + padding: 0.5rem 1rem 0.5rem; + } +} diff --git a/src/plays/dev-jokes/spinner.css b/src/plays/dev-jokes/spinner.css new file mode 100644 index 000000000..dbe704d69 --- /dev/null +++ b/src/plays/dev-jokes/spinner.css @@ -0,0 +1,16 @@ +@keyframes spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + .loading-spinner { + width: 40px; + height: 40px; + border: 10px solid #fefefe; /* Light grey */ + border-top: 10px solid #383636; /* Black */ + border-radius: 50%; + animation: spinner 1.5s linear infinite; + } \ No newline at end of file diff --git a/src/plays/git-hub-profile-search/GithubProfileSearch.js b/src/plays/git-hub-profile-search/GithubProfileSearch.js new file mode 100644 index 000000000..c6d5341ec --- /dev/null +++ b/src/plays/git-hub-profile-search/GithubProfileSearch.js @@ -0,0 +1,36 @@ +import PlayHeader from 'common/playlists/PlayHeader'; +import './styles.css'; +import Input from './components/Input'; +import Results from './components/Results'; +import { ResultContextProvider } from './context/ResultContextProvider'; + +// WARNING: Do not change the entry componenet name +function GithubProfileSearch(props) { + + // Your Code Start below. + + return ( + <> +
+ +
+ {/* Your Code Starts Here */} +
+ +

+ Github Profile Search +

+ +
+ +
+ +
+ {/* Your Code Ends Here */} +
+
+ + ); +} + +export default GithubProfileSearch; \ No newline at end of file diff --git a/src/plays/git-hub-profile-search/Readme.md b/src/plays/git-hub-profile-search/Readme.md new file mode 100644 index 000000000..67099ff3c --- /dev/null +++ b/src/plays/git-hub-profile-search/Readme.md @@ -0,0 +1,22 @@ +# GitHub Profile Search + +A play where you can search anybody's public github profile. I have made it using Context Api for showing basic implementation which you can practice in order to get comfortable with using Context Api for bigger projects. + +The search result provides you with one user whose username matches with his/her profile link, bio, followers, as well as the current 5 public repositories made by the user starting from the latest. + +## Play Demographic + +- Language: js +- Level: Beginner + +## Creator Information + +- User: nirban256 +- Gihub Link: https://github.com/nirban256 +- Blog: NA +- Video: NA + + +## Resources + +[GitHub RESST API](https://docs.github.com/rest) diff --git a/src/plays/git-hub-profile-search/components/Input.jsx b/src/plays/git-hub-profile-search/components/Input.jsx new file mode 100644 index 000000000..671199f63 --- /dev/null +++ b/src/plays/git-hub-profile-search/components/Input.jsx @@ -0,0 +1,26 @@ +import React, { useState } from 'react'; +import { useResultContext } from '../context/ResultContextProvider'; + +const Input = () => { + + const { getRepos, getUser } = useResultContext(); + const [username, setUsername] = useState(''); + + const handleSubmit = (e) => { + e.preventDefault(); + getUser(username); + getRepos(username); + setUsername(''); + } + + return ( +
+ setUsername(e.target.value)} className="nirban-github-profile-search" /> + +
+ ) +} + +export default Input \ No newline at end of file diff --git a/src/plays/git-hub-profile-search/components/Results.jsx b/src/plays/git-hub-profile-search/components/Results.jsx new file mode 100644 index 000000000..9e67947b1 --- /dev/null +++ b/src/plays/git-hub-profile-search/components/Results.jsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { useResultContext } from '../context/ResultContextProvider'; + +const Results = () => { + + const { results, repoDetails } = useResultContext(); + + const showRepo = (repo) => { + return ( +
+

+ + + {repo.name.length > 15 ? repo.name.slice(0, 15) : repo.name} + + +

+
+ ) + } + + return ( + +
+ {results ? ( +
+
+
+ +
+
+ {results.bio === '' ? '' :

Bio: {results.bio}

} + {results.location === '' ? '' :

Location: {results.location}

} + {results.twitter_username === '' ? '' :

Twitter: {results.twitter_username}

} +
    +
  • {results.followers} Followers
    • +
  • {results.following} Following
    • +
  • {results.public_repos} Repos
    • +
+
+
+

+ Latest repositories +

+
+ {repoDetails?.map(showRepo).slice(0, 5)} +
+
+
+
+
+
+ ) + : + ( +
+

+ No users to show +

+
+ )} +
+ ) +} + +export default Results \ No newline at end of file diff --git a/src/plays/git-hub-profile-search/context/ResultContextProvider.jsx b/src/plays/git-hub-profile-search/context/ResultContextProvider.jsx new file mode 100644 index 000000000..e58f6bad8 --- /dev/null +++ b/src/plays/git-hub-profile-search/context/ResultContextProvider.jsx @@ -0,0 +1,37 @@ +import { createContext, useState, useContext } from "react"; +import axios from "axios"; + +const ResultContext = createContext(); +const baseUrl = 'https://api.github.com/users/'; + +export const ResultContextProvider = ({ children }) => { + + const [results, setResults] = useState(''); + const [repoDetails, setRepoDetails] = useState([]); + + const getUser = (user) => { + axios({ + method: "get", + url: `${baseUrl}${user}`, + }).then(res => { + setResults(res.data); + }) + } + + const getRepos = (user) => { + axios({ + method: "get", + url: `${baseUrl}${user}/repos?sort=created` + }).then(res => { + setRepoDetails(res.data); + }) + } + + return ( + + {children} + + ) +} + +export const useResultContext = () => useContext(ResultContext); \ No newline at end of file diff --git a/src/plays/git-hub-profile-search/cover.png b/src/plays/git-hub-profile-search/cover.png new file mode 100644 index 000000000..ec3335a45 Binary files /dev/null and b/src/plays/git-hub-profile-search/cover.png differ diff --git a/src/plays/git-hub-profile-search/styles.css b/src/plays/git-hub-profile-search/styles.css new file mode 100644 index 000000000..a69b8477e --- /dev/null +++ b/src/plays/git-hub-profile-search/styles.css @@ -0,0 +1,190 @@ +/* enter stlyes here */ +.nirban-github-profile-heading { + display: flex; + justify-content: center; + margin-bottom: 1rem; + font-size: 2rem; + color: #010326; + font-weight: 600; +} + +.nirban-github-profile-form { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 2rem; + flex-direction: column; +} + +.nirban-github-profile-search { + border: none; + outline: none; + margin-bottom: 1.5rem; + padding: 10px; + border-radius: 6px; + box-shadow: 0px 0px 4px 4px #01032609; +} + +.nirban-github-profile-search ::placeholder { + color: #010326; +} + +.nirban-github-profile-search:focus { + box-shadow: 0px 0px 4px 4px #01032638; +} + +.nirban-github-profile-btn { + background-color: #00f1feab; + color: #010326; + padding: 4px 15px; + border-radius: 10px; + box-shadow: 0px 0px 4px 4px rgba(173, 169, 169, 0.377); +} + +.nirban-github-profile-btn:hover { + background-color: #00f1fe; +} + +.nirban-github-profile-result { + display: flex; + justify-content: center; +} + +.nirban-github-profile-results { + max-width: 500px; + background: #ffff; + padding: 1rem; + border-radius: 25px; + box-shadow: 0px 0px 4px 4px rgba(173, 169, 169, 0.377); + color: #010326; + font-weight: 500; +} + +.nirban-github-profile-results-info { + padding-left: 1rem; +} + +.nirban-github-profile-bio, +.nirban-github-profile-location, +.nirban-github-profile-twitter { + margin-bottom: 0.5rem; +} + +.nirban-github-profile-details { + display: flex; + justify-content: space-evenly; + align-items: center; + margin-bottom: 1rem; +} + +.nirban-github-profile-link { + font-size: x-large; + font-weight: 600; + text-decoration: underline; +} + +.nirban-github-profile-avatar { + border-radius: 50%; + border: 10px solid #fff; + max-height: 125px; + max-width: 125px; +} + +.nirban-github-profile-socials { + display: flex; + margin-bottom: 1rem; +} + +.nirban-github-profile-socials>:first-child { + margin-right: 1rem; +} + +.nirban-github-profile-socials>:nth-child(2) { + margin: 0 1rem; +} + +.nirban-github-profile-socials>:last-child { + margin-left: 1rem; +} + +.nirban-github-profile-repos-heading { + font-size: 1.4rem; + font-weight: 600; + text-align: center; + margin-bottom: 0.25rem; + margin-top: 1rem; +} + +.nirban-github-profile-repos { + display: grid; + grid-template-columns: repeat(2, 1fr); +} + +.nirban-github-profile-repo-link { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + text-align: center; + text-decoration: underline; +} + +.nirban-github-profile-no-user { + color: #010326; + font-weight: 400; + font-size: 1.2rem; + margin-top: 2rem; + background: #fff; + padding: 1rem 1.5rem; + border-radius: 10px; +} + +/* Media Queries */ + +@media screen and (max-width: 600px) { + + .nirban-github-profile-results { + max-width: 450px; + } + + .nirban-github-profile-details { + flex-direction: column; + } + + .nirban-github-profile-repos-heading { + text-align: left; + } + + .nirban-github-profile-repos { + display: block; + } + + .nirban-github-profile-repo-link { + text-align: left; + } +} + +@media screen and (max-width: 450px) { + + .nirban-github-profile-top { + text-align: center; + } + + .nirban-github-profile-results { + max-width: 300px; + } + + .nirban-github-profile-socials { + display: block; + } + + .nirban-github-profile-socials>:first-child { + margin-right: 0; + } + + .nirban-github-profile-socials>:nth-child(2) { + margin: 0; + } + + .nirban-github-profile-socials>:last-child { + margin-left: 0; + } +} \ No newline at end of file diff --git a/src/plays/navbar/NavBar.css b/src/plays/navbar/NavBar.css index cd1872ac5..06a3f7d11 100644 --- a/src/plays/navbar/NavBar.css +++ b/src/plays/navbar/NavBar.css @@ -1,9 +1,9 @@ -.contain { +.navbar-play-contain { display: grid; grid-template-columns: repeat(2, minmax(0, 20rem)); } -.card { +.navbar-side-card { position: relative; top: -18rem; left: 8rem; @@ -23,7 +23,7 @@ box-shadow: 0px 0px 100px rgba(88, 199, 250, .15); } -.images { +.nav-card-images { position: relative; font-size: 33px; font-family: roboto; @@ -36,12 +36,12 @@ border-radius: 15px; } -.card:hover .images { +.navbar-side-card:hover .nav-card-images { transform: translateY(-150px); opacity: 0 } -.text1 { +.nav-side-card-description { color: #dbf9ff; font-family: roboto; font-weight: 100; @@ -53,7 +53,7 @@ opacity: 0 } -.heading { +.nav-side-card-heading { font-size: 38px; font-family: roboto; color: rgb(88 199 250); @@ -66,7 +66,7 @@ opacity: 0 } -.button { +.nav-card-button { transform: translatey(200px); transition: .88s; opacity: 0; @@ -85,35 +85,35 @@ cursor: pointer } -.card:hover .hover { +.navbar-side-card:hover .nav-side-card-hover { display: block } -.card:hover .heading { +.navbar-side-card:hover .nav-side-card-heading { transform: translatey(-170px); opacity: 1 } -.card:hover .text1 { +.navbar-side-card:hover .nav-side-card-description { transform: translatey(-150px); opacity: 1 } -.card:hover .button { +.navbar-side-card:hover .nav-card-button { transform: translatey(-100px); opacity: 1 } -.card:hover { +.navbar-side-card:hover { transform: scale(110%); box-shadow: 0px 0px 100px rgb(88 199 250); } -.button:active { +.nav-card-button:active { color: #0beef9 } -h1.headings { +h1.side-animated-heading { color: #333; font-family: tahoma; font-size: 3rem; @@ -126,12 +126,12 @@ h1.headings { width: 610px; } -h1.headings span { +h1.side-animated-heading span { font-size: 40px; margin-left: 2px; } -.message { +.nav-side-message-box { background-color: #76cfe5; color: #333; display: block; @@ -144,9 +144,9 @@ h1.headings span { animation: openclose 5s ease-in-out infinite; } -.word1, -.word2, -.word3 { +.side-box-animated-word1, +.side-box-animated-word2, +.side-box-animated-word3 { font-family: tahoma; } @@ -229,7 +229,7 @@ h1.headings span { } } -.contentiner-box { +.side-box-contentiner { background-color: #485461; background-image: linear-gradient(315deg, #485461 0%, #28313b 74%); color: white; @@ -243,40 +243,40 @@ h1.headings span { height: 200px; } -p.contentiner-box-sub { +p.side-box-contentiner-sub { padding: 2rem; text-align: center; } -button#neon { +button#side-box-neon { font-size: 29px; } -#neon:hover span { +#side-box-neon:hover span { animation: flicker 1s linear forwards; } -#neon:hover #a { +#side-box-neon:hover #a { animation-delay: .2s; } -#neon:hover #c { +#side-box-neon:hover #c { animation-delay: .5s; } -#neon:hover #t { +#side-box-neon:hover #t { animation-delay: .6s; } -#neon:hover #pl { +#side-box-neon:hover #pl { animation-delay: .8s; } -#neon:hover #a2 { +#side-box-neon:hover #a2 { animation-delay: .9s; } -#neon:hover #y { +#side-box-neon:hover #y { animation-delay: .9s; } @@ -301,33 +301,33 @@ button#neon { } } -#neon:focus { +#side-box-neon:focus { outline: none; } -.allIcons { +.side-box-twt-icon { width: 70px; cursor: pointer; color: #19d2ef; font-size: 20px; } -.allIcons:hover { +.side-box-twt-icon:hover { font-size: 26px; transition: 0.3s ease-in-out; } /* Media Query */ @media(max-width: 990px) { - h1.headings span { + h1.side-animated-heading span { font-size: 29px; } - .message { + .nav-side-message-box { left: 168px; } - h1.headings { + h1.side-animated-heading { font-size: 2rem; width: 478px; } @@ -413,15 +413,15 @@ button#neon { } @media (max-width: 790px) { - h1.headings span { + h1.side-animated-heading span { font-size: 19px; } - .message { + .nav-side-message-box { left: 109px; } - h1.headings { + h1.side-animated-heading { font-size: 22px; width: 291px; } @@ -507,43 +507,43 @@ button#neon { } @media(max-width:713px) { - .card { + .navbar-side-card { height: 220px; width: 180px; left: 4rem; top: -17rem; } - .card:hover .heading { - transform: translatey(-122px); + .navbar-side-card:hover .nav-side-card-heading { + transform: translatey(-101px); opacity: 1; } - .card:hover .text1 { - transform: translatey(-118px); + .navbar-side-card:hover .nav-side-card-description { + transform: translatey(-105px); opacity: 1; } - .text1 { + .nav-side-card-description { font-size: 11px; } } @media (max-width: 620px) { - .contentiner-box { + .side-box-contentiner { margin-top: 30px; height: 137px; width: 243px; } - p.contentiner-box-sub { + p.side-box-contentiner-sub { padding: 0rem; text-align: center; font-size: 12px; } - .allIcons { + .side-box-twt-icon { width: 26px; } } @@ -560,7 +560,7 @@ button#neon { visibility: hidden; } - h1.headings.text-white.origin-left.font-medium.text-xl.duration-300.false { + h1.side-animated-heading.text-white.origin-left.font-medium.text-xl.duration-300.false { visibility: hidden; } @@ -572,16 +572,16 @@ button#neon { visibility: hidden; } - .contentiner-box { + .side-box-contentiner { position: relative; left: -6rem; } - h1.headings { + h1.side-animated-heading { left: -7rem; } - .card { + .navbar-side-card { top: -10rem; } } @@ -591,7 +591,7 @@ button#neon { width: 5rem; } - .card { + .navbar-side-card { height: 195px; width: 180px; left: -1rem; @@ -621,41 +621,41 @@ button#neon { } @media(max-width:418px) { - .contentiner-box { + .side-box-contentiner { padding: 3rem 1rem; height: 211px; width: 174px; left: -3rem; } - .message { + .nav-side-message-box { left: 60px; } - h1.headings span { + h1.side-animated-heading span { visibility: hidden; } } @media(max-width: 341px) { - .text1 { + .nav-side-card-description { font-size: 10px; text-align: center; } - .card { + .navbar-side-card { width: 158px; left: -3rem; top: -16rem; } - .heading { + .nav-side-card-heading { font-size: 28px; } } @media(max-width:292px) { - .card { + .navbar-side-card { left: -1.5rem; } } diff --git a/src/plays/navbar/navListItems.js b/src/plays/navbar/navListItems.js index 41c3462b9..7941c0c7b 100644 --- a/src/plays/navbar/navListItems.js +++ b/src/plays/navbar/navListItems.js @@ -38,7 +38,7 @@ const NavListItems = (props) => { return ( <> {/* Code Starts Here */} -
+
collasp filterResult('search')} >
{/* Fetching Values */}
-
-

It is a responsive NavBar that helps you to navigate - .

- +
-

+

Made with -
-
CSS3
-
React JS
-
Tailwind CSS
+
+
CSS3
+
React JS
+
Tailwind CSS

@@ -131,12 +131,12 @@ mt-2 menu-items`} onClick={() => filterResult('search')} > const { id, image, title, discription, statement, url } = values return ( <> -
- {"card-images"} -
-

{title}

-
{discription}
- +
+ {"nav-card-images"} +
+

{title}

+
{discription}
+