diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..e796aa4c --- /dev/null +++ b/.eslintignore @@ -0,0 +1,22 @@ +# Dependencies +node_modules/ + +# Build output +build/ +dist/ +out/ + +# Caches / temp +.cache/ +.tmp/ +.eslintcache + +# Config files (optional) +*.config.js +babel.config.js + +# Docs +*.md +*.mdx +docs/**/*.md +blog/**/*.md diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 00000000..58d5657e --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,59 @@ +module.exports = { + root: true, + env: { + browser: true, + es2021: true, + node: true, + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:react/jsx-runtime", + "plugin:@typescript-eslint/recommended", + "prettier", + ], + parser: "@typescript-eslint/parser", + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + ecmaVersion: "latest", + sourceType: "module", + }, + plugins: ["react", "@typescript-eslint", "prettier"], + settings: { + react: { + version: "detect", + }, + }, + rules: { + "prettier/prettier": "error", + "react/react-in-jsx-scope": "off", + "react/prop-types": "off", + "react/no-unknown-property": "off", + "react/display-name": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-var-requires": "off", + "@typescript-eslint/no-require-imports": "off", + "@typescript-eslint/ban-ts-comment": "off", + "@typescript-eslint/no-empty-object-type": "off", + "no-console": "off", + "no-undef": "off", + "no-useless-escape": "off", + "no-prototype-builtins": "off", + "no-constant-condition": "off", + "no-misleading-character-class": "off", + "react/no-unescaped-entities": "off", + }, + ignorePatterns: [ + "node_modules/", + "build/", + ".docusaurus/", + ".cache-loader/", + "tmp/", + "static/", + "*.config.js", + "babel.config.js", + ], +}; diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..9904b049 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,17 @@ +# Documentation +docs/**/*.md +docs/**/*.mdx +blog/**/*.md +blog/**/*.mdx +*.md +*.mdx + +# Build outputs +node_modules/ +build/ +.docusaurus/ +.cache-loader/ +tmp/ + +# Package files +package-lock.json diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..ad37b825 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "singleQuote": false, + "semi": true, + "tabWidth": 2, + "printWidth": 80 +} diff --git a/components.json b/components.json index a2c09eba..833053cc 100644 --- a/components.json +++ b/components.json @@ -1,22 +1,21 @@ { - "$schema": "https://ui.shadcn.com/schema.json", - "style": "new-york", - "rsc": false, - "tsx": true, - "tailwind": { - "config": "", - "css": "src/styles/globals.css", - "baseColor": "neutral", - "cssVariables": true, - "prefix": "" - }, - "aliases": { - "components": "@site/src/components", - "utils": "@site/src/lib/utils", - "ui": "@site/src/components/ui", - "lib": "@site/src/lib", - "hooks": "@site/src/hooks" - }, - "iconLibrary": "lucide" - } - \ No newline at end of file + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "", + "css": "src/styles/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@site/src/components", + "utils": "@site/src/lib/utils", + "ui": "@site/src/components/ui", + "lib": "@site/src/lib", + "hooks": "@site/src/hooks" + }, + "iconLibrary": "lucide" +} diff --git a/docs/GitHub/GitHub-basics/_category_.json b/docs/GitHub/GitHub-basics/_category_.json index f35dff73..a76ebc95 100644 --- a/docs/GitHub/GitHub-basics/_category_.json +++ b/docs/GitHub/GitHub-basics/_category_.json @@ -1,8 +1,8 @@ { - "label": "GitHub Basics", - "position": 4, - "link": { - "type": "generated-index", - "description": "In this section, you will learn the basics of HTML, including how to create a simple webpage and how to use HTML tags to structure your content." - } - } \ No newline at end of file + "label": "GitHub Basics", + "position": 4, + "link": { + "type": "generated-index", + "description": "In this section, you will learn the basics of HTML, including how to create a simple webpage and how to use HTML tags to structure your content." + } +} diff --git a/docs/GitHub/Maintainer-guide/_category_.json b/docs/GitHub/Maintainer-guide/_category_.json index 22a098a0..2639ca5c 100644 --- a/docs/GitHub/Maintainer-guide/_category_.json +++ b/docs/GitHub/Maintainer-guide/_category_.json @@ -1,8 +1,8 @@ { - "label": "Maintainer Guide", - "position": 4, - "link": { - "type": "generated-index", - "description": "In this section, you will learn the basics of HTML, including how to create a simple webpage and how to use HTML tags to structure your content." - } - } \ No newline at end of file + "label": "Maintainer Guide", + "position": 4, + "link": { + "type": "generated-index", + "description": "In this section, you will learn the basics of HTML, including how to create a simple webpage and how to use HTML tags to structure your content." + } +} diff --git a/docs/GitHub/setup-environment/_category_.json b/docs/GitHub/setup-environment/_category_.json index 06e9f6fb..745d4ac2 100644 --- a/docs/GitHub/setup-environment/_category_.json +++ b/docs/GitHub/setup-environment/_category_.json @@ -1,8 +1,8 @@ { - "label": "Setting up environment", - "position": 2, - "link": { - "type": "generated-index", - "description": "In this section, In this tutorial, you will learn how to set up your development environment for Git And GitHub.." - } - } \ No newline at end of file + "label": "Setting up environment", + "position": 2, + "link": { + "type": "generated-index", + "description": "In this section, In this tutorial, you will learn how to set up your development environment for Git And GitHub.." + } +} diff --git a/docs/sql/SQL-basics/_category_.json b/docs/sql/SQL-basics/_category_.json index 1fa1b375..c315813e 100644 --- a/docs/sql/SQL-basics/_category_.json +++ b/docs/sql/SQL-basics/_category_.json @@ -1,8 +1,8 @@ { - "label": "SQL Basics", - "position": 4, - "link": { - "type": "generated-index", - "description": "In this section, you will learn the basics of HTML, including how to create a simple webpage and how to use HTML tags to structure your content." - } - } \ No newline at end of file + "label": "SQL Basics", + "position": 4, + "link": { + "type": "generated-index", + "description": "In this section, you will learn the basics of HTML, including how to create a simple webpage and how to use HTML tags to structure your content." + } +} diff --git a/docs/sql/table-transformation/_category_.json b/docs/sql/table-transformation/_category_.json index 4004e3e6..0c9b4e1d 100644 --- a/docs/sql/table-transformation/_category_.json +++ b/docs/sql/table-transformation/_category_.json @@ -1,8 +1,8 @@ { - "label": "Table Transformation", - "position": 4, - "link": { - "type": "generated-index", - "description": "In this section, you will learn the basics of HTML, including how to create a simple webpage and how to use HTML tags to structure your content." - } - } \ No newline at end of file + "label": "Table Transformation", + "position": 4, + "link": { + "type": "generated-index", + "description": "In this section, you will learn the basics of HTML, including how to create a simple webpage and how to use HTML tags to structure your content." + } +} diff --git a/docusaurus.config.ts b/docusaurus.config.ts index ad48b898..4c4b875a 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -270,8 +270,11 @@ const config: Config = { customFields: { gitToken: process.env.DOCUSAURUS_GIT_TOKEN, // Shopify credentials for merch store - SHOPIFY_STORE_DOMAIN: process.env.SHOPIFY_STORE_DOMAIN || 'junh9v-gw.myshopify.com', - SHOPIFY_STOREFRONT_ACCESS_TOKEN: process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN || '2503dfbf93132b42e627e7d53b3ba3e9', + SHOPIFY_STORE_DOMAIN: + process.env.SHOPIFY_STORE_DOMAIN || "junh9v-gw.myshopify.com", + SHOPIFY_STOREFRONT_ACCESS_TOKEN: + process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN || + "2503dfbf93132b42e627e7d53b3ba3e9", hooks: { onBrokenMarkdownLinks: "warn", }, diff --git a/package.json b/package.json index ac0ba67e..a8b1fe0f 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,11 @@ "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids", - "typecheck": "tsc" + "typecheck": "tsc", + "lint": "eslint . --ext .ts,.tsx,.js,.jsx", + "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix", + "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css}\"", + "format:check": "prettier --check ." }, "dependencies": { "@docusaurus/core": "^3.9.1", @@ -65,8 +69,15 @@ "@types/canvas-confetti": "^1.9.0", "@types/react": "^19.1.9", "@types/react-dom": "^19.1.7", + "@typescript-eslint/eslint-plugin": "^8.45.0", + "@typescript-eslint/parser": "^8.45.0", "autoprefixer": "^10.4.21", + "eslint": "^8.57.1", + "eslint-config-prettier": "^10.1.8", + "eslint-plugin-prettier": "^5.5.4", + "eslint-plugin-react": "^7.37.5", "postcss": "^8.5.3", + "prettier": "^3.6.2", "tailwindcss": "^4.1.4", "typescript": "~5.3" }, diff --git a/postcss.config.ts b/postcss.config.ts index 7c25e20e..483f3785 100644 --- a/postcss.config.ts +++ b/postcss.config.ts @@ -1,5 +1,5 @@ module.exports = { - plugins: { - '@tailwindcss/postcss': {}, - } - } \ No newline at end of file + plugins: { + "@tailwindcss/postcss": {}, + }, +}; diff --git a/sidebars.ts b/sidebars.ts index 6fdd0282..2a796354 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -1,4 +1,4 @@ -import type {SidebarsConfig} from '@docusaurus/plugin-content-docs'; +import type { SidebarsConfig } from "@docusaurus/plugin-content-docs"; // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...) @@ -16,40 +16,39 @@ const sidebars: SidebarsConfig = { // Custom manual sidebar configuration for complete control tutorialSidebar: [ { - type: 'doc', - id: 'docs', // document ID - label: '๐Ÿ  Home', // sidebar label - className: 'custom-sidebar-home', - + type: "doc", + id: "docs", // document ID + label: "๐Ÿ  Home", // sidebar label + className: "custom-sidebar-home", }, { - type: 'doc', - id: 'Getting-Started', - label: '๐Ÿš€ Getting Started', - className: 'custom-sidebar-contributing', + type: "doc", + id: "Getting-Started", + label: "๐Ÿš€ Getting Started", + className: "custom-sidebar-contributing", }, { - type: 'category', - label: '๐Ÿ™ GitHub', - className: 'custom-sidebar-github', + type: "category", + label: "๐Ÿ™ GitHub", + className: "custom-sidebar-github", items: [ - 'GitHub/intro-github', - 'GitHub/intro-gitlab', + "GitHub/intro-github", + "GitHub/intro-gitlab", { - type: 'category', - label: 'โš™๏ธ Setup Environment', - className: 'custom-sidebar-setup', + type: "category", + label: "โš™๏ธ Setup Environment", + className: "custom-sidebar-setup", items: [ - 'GitHub/setup-environment/setup-environment', - 'GitHub/setup-environment/setup-git-on-windows', - 'GitHub/setup-environment/setup-git-on-mac', - 'GitHub/setup-environment/git-commands', + "GitHub/setup-environment/setup-environment", + "GitHub/setup-environment/setup-git-on-windows", + "GitHub/setup-environment/setup-git-on-mac", + "GitHub/setup-environment/git-commands", ], }, { - type: 'category', - label: '๐Ÿ“š GitHub Basics', - className: 'custom-sidebar-basics', + type: "category", + label: "๐Ÿ“š GitHub Basics", + className: "custom-sidebar-basics", items: [ 'GitHub/GitHub-basics/create-github-repo', 'GitHub/GitHub-basics/github-repo-command-line', @@ -59,123 +58,121 @@ const sidebars: SidebarsConfig = { ], }, { - type: 'category', - label: '๐Ÿ‘จโ€๐Ÿ’ผ Maintainer Guide', - className: 'custom-sidebar-maintainer', + type: "category", + label: "๐Ÿ‘จโ€๐Ÿ’ผ Maintainer Guide", + className: "custom-sidebar-maintainer", items: [ - 'GitHub/Maintainer-guide/github-labels', - 'GitHub/Maintainer-guide/milestone', - 'GitHub/Maintainer-guide/github-project', - 'GitHub/Maintainer-guide/enable-dicussion', + "GitHub/Maintainer-guide/github-labels", + "GitHub/Maintainer-guide/milestone", + "GitHub/Maintainer-guide/github-project", + "GitHub/Maintainer-guide/enable-dicussion", ], }, ], }, { - type: 'category', - label: '๐Ÿ Python', - className: 'custom-sidebar-python', + type: "category", + label: "๐Ÿ Python", + className: "custom-sidebar-python", items: [ - 'python/intro-python', - 'python/setup-environment', - 'python/python-syntax', - 'python/python-variables', - 'python/datatype-python', - 'python/python-casting', - 'python/python-string', - 'python/python-operators', - 'python/python-list', - 'python/python-tuple', - 'python/python-set', - 'python/python-dictionaries', - 'python/python-array', - 'python/python-conditional-statements', - 'python/python-loops', - 'python/python-functions', - 'python/python-errors-and-exceptions', - 'python/python-oops', + "python/intro-python", + "python/setup-environment", + "python/python-syntax", + "python/python-variables", + "python/datatype-python", + "python/python-casting", + "python/python-string", + "python/python-operators", + "python/python-list", + "python/python-tuple", + "python/python-set", + "python/python-dictionaries", + "python/python-array", + "python/python-conditional-statements", + "python/python-loops", + "python/python-functions", + "python/python-errors-and-exceptions", + "python/python-oops", ], }, { - type: 'category', - label: '๐Ÿ—„๏ธ SQL', - className: 'custom-sidebar-sql', + type: "category", + label: "๐Ÿ—„๏ธ SQL", + className: "custom-sidebar-sql", items: [ - 'sql/intro-sql', - 'sql/setup-environment', + "sql/intro-sql", + "sql/setup-environment", { - type: 'category', - label: '๐Ÿ“Š SQL Basics', - className: 'custom-sidebar-sql-basics', + type: "category", + label: "๐Ÿ“Š SQL Basics", + className: "custom-sidebar-sql-basics", items: [ - 'sql/SQL-basics/sql-constraints', - 'sql/SQL-basics/selecting-data', - 'sql/SQL-basics/filtering-data', - 'sql/SQL-basics/ordering-data', - 'sql/SQL-basics/grouping-data', - 'sql/SQL-basics/the-inequality-operator', - 'sql/SQL-basics/sql-datatypes', - 'sql/SQL-basics/primary-key-foreign-key', - 'sql/SQL-basics/sql-operators' + "sql/SQL-basics/sql-constraints", + "sql/SQL-basics/selecting-data", + "sql/SQL-basics/filtering-data", + "sql/SQL-basics/ordering-data", + "sql/SQL-basics/grouping-data", + "sql/SQL-basics/the-inequality-operator", + "sql/SQL-basics/sql-datatypes", + "sql/SQL-basics/primary-key-foreign-key", + "sql/SQL-basics/sql-operators", ], }, { - type: 'category', - label: '๐Ÿ”„ Table Transformation', - className: 'custom-sidebar-sql-transform', + type: "category", + label: "๐Ÿ”„ Table Transformation", + className: "custom-sidebar-sql-transform", items: [ - 'sql/table-transformation/table-creation', - 'sql/table-transformation/alter-table', - 'sql/table-transformation/data-operations', - 'sql/table-transformation/list-drop-table', + "sql/table-transformation/table-creation", + "sql/table-transformation/alter-table", + "sql/table-transformation/data-operations", + "sql/table-transformation/list-drop-table", ], }, { - type: 'category', - label: 'SQL Joins', - className: 'custom-sidebar-sql-joins', + type: "category", + label: "SQL Joins", + className: "custom-sidebar-sql-joins", items: [ - 'sql/SQL-joins/intro-sql-joins', - 'sql/SQL-joins/inner-join', - 'sql/SQL-joins/left-join', - 'sql/SQL-joins/right-join', - 'sql/SQL-joins/full-outer-join', - 'sql/SQL-joins/cross-join', - 'sql/SQL-joins/self-join', + "sql/SQL-joins/intro-sql-joins", + "sql/SQL-joins/inner-join", + "sql/SQL-joins/left-join", + "sql/SQL-joins/right-join", + "sql/SQL-joins/full-outer-join", + "sql/SQL-joins/cross-join", + "sql/SQL-joins/self-join", ], }, ], }, { - type: 'category', - label: 'โšก Next.js', - className: 'custom-sidebar-nextjs', + type: "category", + label: "โšก Next.js", + className: "custom-sidebar-nextjs", items: [ - 'Nextjs/intro-nextjs', - 'Nextjs/setup-environment', + "Nextjs/intro-nextjs", + "Nextjs/setup-environment", // 'Nextjs/git-commands', ], }, { - type: 'category', - label: '๐ŸŽ“ Google Student Ambassador', - className: 'custom-sidebar-gsa', + type: "category", + label: "๐ŸŽ“ Google Student Ambassador", + className: "custom-sidebar-gsa", items: [ - 'Google-Student-Ambassador/part-1-getting-started/gsa-part-1', - 'Google-Student-Ambassador/part-2-application-process/gsa-part-2', - 'Google-Student-Ambassador/part-3-eligibility/gsa-part-3', - 'Google-Student-Ambassador/part-4-gemini-pro/gsa-part-4', + "Google-Student-Ambassador/part-1-getting-started/gsa-part-1", + "Google-Student-Ambassador/part-2-application-process/gsa-part-2", + "Google-Student-Ambassador/part-3-eligibility/gsa-part-3", + "Google-Student-Ambassador/part-4-gemini-pro/gsa-part-4", ], }, { - type: 'category', - label: '๐Ÿ”ง Technical', - className: 'custom-sidebar-technical', - items: [ - 'Technical/intro-github', - ], + type: "category", + label: "๐Ÿ”ง Technical", + className: "custom-sidebar-technical", + items: ["Technical/intro-github"], }, ], }; -export default sidebars; \ No newline at end of file +export default sidebars; diff --git a/src/components/BrowserWindow/BrowserWindow.module.css b/src/components/BrowserWindow/BrowserWindow.module.css index e39fe5f9..977b6c1b 100644 --- a/src/components/BrowserWindow/BrowserWindow.module.css +++ b/src/components/BrowserWindow/BrowserWindow.module.css @@ -38,7 +38,9 @@ background-color: var(--ifm-background-color); color: var(--ifm-color-gray-800); padding: 5px 15px; - font: 400 13px Arial, sans-serif; + font: + 400 13px Arial, + sans-serif; user-select: none; } @@ -69,7 +71,7 @@ } .browserWindowBody { -/* background-color: var(--ifm-background-color); */ + /* background-color: var(--ifm-background-color); */ border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; padding: 1rem; diff --git a/src/components/BrowserWindow/index.tsx b/src/components/BrowserWindow/index.tsx index 18b68c26..e153ddfd 100644 --- a/src/components/BrowserWindow/index.tsx +++ b/src/components/BrowserWindow/index.tsx @@ -1,7 +1,7 @@ -import React, {type CSSProperties, type ReactNode} from 'react'; -import clsx from 'clsx'; +import React, { type CSSProperties, type ReactNode } from "react"; +import clsx from "clsx"; -import styles from './BrowserWindow.module.css'; +import styles from "./BrowserWindow.module.css"; interface Props { children: ReactNode; @@ -14,19 +14,19 @@ interface Props { export default function BrowserWindow({ children, minHeight, - url = 'http://localhost:3000', + url = "http://localhost:3000", style, bodyStyle, }: Props): JSX.Element { return ( -
+
- - - + + +
-
+
{url}
@@ -43,4 +43,4 @@ export default function BrowserWindow({
); -} \ No newline at end of file +} diff --git a/src/components/Comming/index.tsx b/src/components/Comming/index.tsx index 71cd7012..af4e91b2 100644 --- a/src/components/Comming/index.tsx +++ b/src/components/Comming/index.tsx @@ -38,4 +38,4 @@ const Coming: React.FC = () => { ); }; -export default Coming; \ No newline at end of file +export default Coming; diff --git a/src/components/Community/LandingCommunity.css b/src/components/Community/LandingCommunity.css index 516f6954..29b3abe4 100644 --- a/src/components/Community/LandingCommunity.css +++ b/src/components/Community/LandingCommunity.css @@ -4,219 +4,285 @@ } .landing-community .landing-community__header { - display: flex; - justify-content: space-between; - align-items: center; - max-width: 100%; - margin-bottom: 1rem; - padding: auto 1rem; - flex-wrap: wrap; + display: flex; + justify-content: space-between; + align-items: center; + max-width: 100%; + margin-bottom: 1rem; + padding: auto 1rem; + flex-wrap: wrap; } .landing-community .landing-community__header .landing-community__title { - font-size: 2rem; - line-height: 2rem; - text-align: start; - font-weight: 500; - padding: 0; + font-size: 2rem; + line-height: 2rem; + text-align: start; + font-weight: 500; + padding: 0; } .landing-community .landing-community__header .landing-community__highlight { - font-weight: 600; - color: var(--ifm-color-primary); - text-shadow: 0 0 1px var(--ifm-color-primary); + font-weight: 600; + color: var(--ifm-color-primary); + text-shadow: 0 0 1px var(--ifm-color-primary); } .landing-community .landing-community__header .landing-community__error { - color: var(--ifm-color-warning); - font-size: 0.9rem; - margin-top: 0.5rem; + color: var(--ifm-color-warning); + font-size: 0.9rem; + margin-top: 0.5rem; } .landing-community .landing-community__content { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; - text-align: center; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + text-align: center; } .landing-community .landing-community__content .landing-community__stats { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 1rem; - border-radius: 1rem; - background-color: var(--ifm-color-background); - box-shadow: 0 0 1px var(--ifm-color-primary); - transition: all 0.3s ease; - position: relative; +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 1rem; + border-radius: 1rem; + background-color: var(--ifm-color-background); + box-shadow: 0 0 1px var(--ifm-color-primary); + transition: all 0.3s ease; + position: relative; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.clickable { - cursor: pointer; +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item.clickable { + cursor: pointer; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.clickable:hover, -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.clickable:focus { - transform: scale(1.02); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); - outline: none; +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item.clickable:hover, +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item.clickable:focus { + transform: scale(1.02); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + outline: none; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.loading { - opacity: 0.7; +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item.loading { + opacity: 0.7; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item:hover { - cursor: pointer; - transform: scale(1.01); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item:hover { + cursor: pointer; + transform: scale(1.01); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item .landing-community__stat-value { - font-size: 3.5rem; - font-weight: 600; - color: var(--ifm-color-primary); - text-shadow: 0 0 1px var(--ifm-color-primary); - padding-bottom: 0.5rem; - position: relative; +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item + .landing-community__stat-value { + font-size: 3.5rem; + font-weight: 600; + color: var(--ifm-color-primary); + text-shadow: 0 0 1px var(--ifm-color-primary); + padding-bottom: 0.5rem; + position: relative; } /* SlotCounter styling */ .landing-community .slot-counter-number { - font-size: inherit; - font-weight: inherit; - color: inherit; - text-shadow: inherit; + font-size: inherit; + font-weight: inherit; + color: inherit; + text-shadow: inherit; } .landing-community .slot-counter-separator { - font-size: inherit; - font-weight: inherit; - color: inherit; - text-shadow: inherit; + font-size: inherit; + font-weight: inherit; + color: inherit; + text-shadow: inherit; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item .landing-community__loading { - display: flex; - align-items: center; - justify-content: center; - font-size: 2rem; +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item + .landing-community__loading { + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; } .landing-community .loading-spinner { - animation: spin 2s linear infinite; + animation: spin 2s linear infinite; } @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } .landing-community .external-link-icon { - font-size: 0.8em; - margin-left: 0.3rem; - opacity: 0.7; - transition: opacity 0.2s ease; + font-size: 0.8em; + margin-left: 0.3rem; + opacity: 0.7; + transition: opacity 0.2s ease; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item.clickable:hover .external-link-icon { - opacity: 1; +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item.clickable:hover + .external-link-icon { + opacity: 1; } -.landing-community .landing-community__content .landing-community__stats .landing-community__stat-item .landing-community__stat-description { - font-size: 1rem; - text-shadow: 0 0 1px var(--ifm-color-primary); +.landing-community + .landing-community__content + .landing-community__stats + .landing-community__stat-item + .landing-community__stat-description { + font-size: 1rem; + text-shadow: 0 0 1px var(--ifm-color-primary); } .landing-community .landing-community__content .landing-community__info { - width: 100%; - padding: 1rem; - border-radius: 1rem; - background-color: var(--ifm-color-background); - box-shadow: 0 0 1px var(--ifm-color-primary); - transition: all 0.3s ease; - position: relative; + width: 100%; + padding: 1rem; + border-radius: 1rem; + background-color: var(--ifm-color-background); + box-shadow: 0 0 1px var(--ifm-color-primary); + transition: all 0.3s ease; + position: relative; } -.landing-community .landing-community__content .landing-community__info.clickable { - cursor: pointer; +.landing-community + .landing-community__content + .landing-community__info.clickable { + cursor: pointer; } -.landing-community .landing-community__content .landing-community__info.clickable:hover, -.landing-community .landing-community__content .landing-community__info.clickable:focus { - transform: scale(1.01); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); - outline: none; +.landing-community + .landing-community__content + .landing-community__info.clickable:hover, +.landing-community + .landing-community__content + .landing-community__info.clickable:focus { + transform: scale(1.01); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + outline: none; } -.landing-community .landing-community__content .landing-community__info .landing-community__image { - width: 100%; - object-fit: cover; - border-radius: 1rem; +.landing-community + .landing-community__content + .landing-community__info + .landing-community__image { + width: 100%; + object-fit: cover; + border-radius: 1rem; } -.landing-community .landing-community__content .landing-community__info .landing-community__info-text { - margin-top: 1rem; - padding: 0; - font-size: 1rem; - text-shadow: 0 0 1px var(--ifm-color-primary); +.landing-community + .landing-community__content + .landing-community__info + .landing-community__info-text { + margin-top: 1rem; + padding: 0; + font-size: 1rem; + text-shadow: 0 0 1px var(--ifm-color-primary); } -.landing-community .landing-community__content .landing-community__info .landing-community__info-text .landing-community__link { - color: var(--ifm-color-primary); - text-shadow: 0 0 1px var(--ifm-color-primary); - text-decoration: none; - font-weight: 600; +.landing-community + .landing-community__content + .landing-community__info + .landing-community__info-text + .landing-community__link { + color: var(--ifm-color-primary); + text-shadow: 0 0 1px var(--ifm-color-primary); + text-decoration: none; + font-weight: 600; } -.landing-community .landing-community__content .landing-community__info .landing-community__info-text .landing-community__link:hover { - text-decoration: underline; +.landing-community + .landing-community__content + .landing-community__info + .landing-community__info-text + .landing-community__link:hover { + text-decoration: underline; } .landing-community .external-link-indicator { - display: flex; - align-items: center; - justify-content: center; - margin-top: 0.5rem; - gap: 0.5rem; - opacity: 0.7; - transition: opacity 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + margin-top: 0.5rem; + gap: 0.5rem; + opacity: 0.7; + transition: opacity 0.2s ease; } -.landing-community .landing-community__content .landing-community__info.clickable:hover .external-link-indicator { - opacity: 1; +.landing-community + .landing-community__content + .landing-community__info.clickable:hover + .external-link-indicator { + opacity: 1; } @media screen and (max-width: 768px) { - .landing-community .landing-community__content { - grid-template-columns: 1fr; - } + .landing-community .landing-community__content { + grid-template-columns: 1fr; + } - .landing-community .landing-community__content .landing-community__stats { - grid-template-columns: 1fr; - } + .landing-community .landing-community__content .landing-community__stats { + grid-template-columns: 1fr; + } - .landing-community .landing-community__content .landing-community__info { - width: 100%; - } - - .landing-community .landing-community__content .landing-community__info .landing-community__image { - width: 100%; - } + .landing-community .landing-community__content .landing-community__info { + width: 100%; + } - .landing-community .landing-community__content .landing-community__info .landing-community__info-text { - margin-top: 1rem; - padding: 0; - font-size: 1rem; - text-shadow: 0 0 1px var(--ifm-color-primary); - } + .landing-community + .landing-community__content + .landing-community__info + .landing-community__image { + width: 100%; + } + .landing-community + .landing-community__content + .landing-community__info + .landing-community__info-text { + margin-top: 1rem; + padding: 0; + font-size: 1rem; + text-shadow: 0 0 1px var(--ifm-color-primary); + } } diff --git a/src/components/Community/index.tsx b/src/components/Community/index.tsx index 82697a18..da9053b8 100644 --- a/src/components/Community/index.tsx +++ b/src/components/Community/index.tsx @@ -1,5 +1,5 @@ import React, { type FC, useEffect, useState, useMemo } from "react"; -import SlotCounter from 'react-slot-counter'; +import SlotCounter from "react-slot-counter"; import "./LandingCommunity.css"; import { useCommunityStatsContext } from "@site/src/lib/statsProvider"; @@ -8,9 +8,9 @@ type Props = { }; export const LandingCommunity: FC = ({ className }) => { - const { - githubStarCountText, - githubContributorsCountText, + const { + githubStarCountText, + githubContributorsCountText, githubForksCountText, githubReposCountText, githubStarCount, @@ -18,44 +18,59 @@ export const LandingCommunity: FC = ({ className }) => { githubForksCount, githubReposCount, loading, - error + error, } = useCommunityStatsContext(); - - - const generateList = useMemo(() => [ - { - stat: githubStarCount, - statText: githubStarCountText, - description: "Stars across all our GitHub repositories, showcasing the support and appreciation from the community.", - href: "https://github.com/recodehive/Support", - label: "GitHub Stars" - }, - { - stat: githubReposCount, - statText: githubReposCountText, - description: "Live public projects on recode hive, demonstrating the power of open-source collaboration.", - href: "https://github.com/orgs/recodehive/repositories?q=visibility%3Apublic+archived%3Afalse", - label: "Public Repositories" - }, - { - stat: githubContributorsCount, - statText: githubContributorsCountText, - description: "Amazing contributors who have made our repositories better and helped build our community.", - href: "https://github.com/orgs/recodehive/people", - label: "Contributors" - }, - { - stat: githubForksCount, - statText: githubForksCountText, - description: "Forks of our repositories, showing how our community extends and builds upon our work.", - href: "https://github.com/orgs/recodehive/discussions", - label: "Community Forks" - }, - ], [githubStarCount, githubStarCountText, githubReposCount, githubReposCountText, githubContributorsCount, githubContributorsCountText, githubForksCount, githubForksCountText]); + + const generateList = useMemo( + () => [ + { + stat: githubStarCount, + statText: githubStarCountText, + description: + "Stars across all our GitHub repositories, showcasing the support and appreciation from the community.", + href: "https://github.com/recodehive/Support", + label: "GitHub Stars", + }, + { + stat: githubReposCount, + statText: githubReposCountText, + description: + "Live public projects on recode hive, demonstrating the power of open-source collaboration.", + href: "https://github.com/orgs/recodehive/repositories?q=visibility%3Apublic+archived%3Afalse", + label: "Public Repositories", + }, + { + stat: githubContributorsCount, + statText: githubContributorsCountText, + description: + "Amazing contributors who have made our repositories better and helped build our community.", + href: "https://github.com/orgs/recodehive/people", + label: "Contributors", + }, + { + stat: githubForksCount, + statText: githubForksCountText, + description: + "Forks of our repositories, showing how our community extends and builds upon our work.", + href: "https://github.com/orgs/recodehive/discussions", + label: "Community Forks", + }, + ], + [ + githubStarCount, + githubStarCountText, + githubReposCount, + githubReposCountText, + githubContributorsCount, + githubContributorsCountText, + githubForksCount, + githubForksCountText, + ], + ); const handleCardClick = (href: string) => { if (href) { - window.open(href, '_blank', 'noopener,noreferrer'); + window.open(href, "_blank", "noopener,noreferrer"); } }; @@ -64,7 +79,10 @@ export const LandingCommunity: FC = ({ className }) => {

Discover the strength of our{" "} - amazing community. + + amazing community + + .

{error && (
@@ -76,14 +94,14 @@ export const LandingCommunity: FC = ({ className }) => {
{generateList.map((item, index) => ( -
handleCardClick(item.href)} role={item.href ? "button" : "presentation"} tabIndex={item.href ? 0 : -1} onKeyDown={(e) => { - if (item.href && (e.key === 'Enter' || e.key === ' ')) { + if (item.href && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); handleCardClick(item.href); } @@ -97,17 +115,19 @@ export const LandingCommunity: FC = ({ className }) => {
) : ( - - {item.href && โ†—} + {item.href && ( + โ†— + )} )}
@@ -118,13 +138,13 @@ export const LandingCommunity: FC = ({ className }) => { ))}
-
handleCardClick("https://github.com/recodehive")} role="button" tabIndex={0} onKeyDown={(e) => { - if (e.key === 'Enter' || e.key === ' ') { + if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleCardClick("https://github.com/recodehive"); } @@ -138,11 +158,9 @@ export const LandingCommunity: FC = ({ className }) => { loading="lazy" />
- Our developers are the core of recode hive community. We take pride in - our{" "} - - GitHub organization - {" "} + Our developers are the core of recode hive community. We take pride + in our{" "} + GitHub organization{" "} with amazing{" "} contributors and maintainers diff --git a/src/components/FloatingContributors/FloatingContributors.css b/src/components/FloatingContributors/FloatingContributors.css index f5fbbdaf..cd499e63 100644 --- a/src/components/FloatingContributors/FloatingContributors.css +++ b/src/components/FloatingContributors/FloatingContributors.css @@ -38,7 +38,13 @@ position: relative; overflow: hidden; color: #1a202c; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-family: + "Inter", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + sans-serif; min-width: 330px; width: 330px; min-height: 290px; /* Increased min-height for better content fit */ @@ -79,23 +85,25 @@ padding: 8px 10px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.08); - transition: background-color 0.2s ease, transform 0.2s ease; + transition: + background-color 0.2s ease, + transform 0.2s ease; cursor: pointer; /* Add pointer cursor to indicate clickable */ } -[data-theme='dark'] .contributor-activity-item { +[data-theme="dark"] .contributor-activity-item { background-color: rgba(71, 85, 105, 0.3); } -[data-theme='dark'] .contributor-activity-item:hover { +[data-theme="dark"] .contributor-activity-item:hover { background-color: rgba(71, 85, 105, 0.5); } -[data-theme='light'] .contributor-activity-item { +[data-theme="light"] .contributor-activity-item { background-color: rgba(241, 245, 249, 0.6); } -[data-theme='light'] .contributor-activity-item:hover { +[data-theme="light"] .contributor-activity-item:hover { background-color: rgba(226, 232, 240, 0.8); } @@ -147,11 +155,11 @@ color: rgba(255, 255, 255, 0.95); } -[data-theme='dark'] .activity-item-username { +[data-theme="dark"] .activity-item-username { color: #f1f5f9; } -[data-theme='light'] .activity-item-username { +[data-theme="light"] .activity-item-username { color: #1e293b; } @@ -163,12 +171,12 @@ color: rgba(255, 255, 255, 0.9); } -[data-theme='dark'] .activity-item-badge { +[data-theme="dark"] .activity-item-badge { background-color: rgba(139, 92, 246, 0.2); color: #c084fc; } -[data-theme='light'] .activity-item-badge { +[data-theme="light"] .activity-item-badge { background-color: rgba(59, 130, 246, 0.15); color: #3b82f6; } @@ -179,11 +187,11 @@ margin-top: 2px; } -[data-theme='dark'] .activity-item-action { +[data-theme="dark"] .activity-item-action { color: rgba(203, 213, 225, 0.8); } -[data-theme='light'] .activity-item-action { +[data-theme="light"] .activity-item-action { color: rgba(71, 85, 105, 0.8); } @@ -197,12 +205,12 @@ margin-top: 4px; } -[data-theme='dark'] .activities-more { +[data-theme="dark"] .activities-more { color: rgba(203, 213, 225, 0.8); background-color: rgba(71, 85, 105, 0.2); } -[data-theme='light'] .activities-more { +[data-theme="light"] .activities-more { color: rgba(71, 85, 105, 0.8); background-color: rgba(241, 245, 249, 0.5); } @@ -220,105 +228,107 @@ gap: 16px; } - -[data-theme='light'] .floating-contributors-card { +[data-theme="light"] .floating-contributors-card { background: linear-gradient( 135deg, - #fff7e1 0%, /* pastel yellow */ - #fde2e4 30%, /* peachy pink */ - #e3d5ff 65%, /* soft lavender */ - #d0e1ff 100% /* light sky blue */ + #fff7e1 0%, + /* pastel yellow */ #fde2e4 30%, + /* peachy pink */ #e3d5ff 65%, + /* soft lavender */ #d0e1ff 100% /* light sky blue */ ); color: #1a202c; /* dark text */ border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 1rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); - transition: background 0.3s ease, box-shadow 0.3s ease; + transition: + background 0.3s ease, + box-shadow 0.3s ease; } - -[data-theme='dark'] .floating-contributors-card { +[data-theme="dark"] .floating-contributors-card { background: linear-gradient( 135deg, - #1a1a2e 0%, /* dark navy */ - #2e2e3e 30%, /* muted purple/gray */ - #3a3a4f 65%, /* desaturated indigo */ - #2b2b3b 100% /* deep midnight blue */ + #1a1a2e 0%, + /* dark navy */ #2e2e3e 30%, + /* muted purple/gray */ #3a3a4f 65%, + /* desaturated indigo */ #2b2b3b 100% /* deep midnight blue */ ); color: #e0e0e0; /* light text for contrast */ border: 1px solid rgba(255, 255, 255, 0.1); /* subtle border */ border-radius: 1rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); /* stronger shadow for depth */ - transition: background 0.3s ease, box-shadow 0.3s ease; + transition: + background 0.3s ease, + box-shadow 0.3s ease; } /* Dark mode text color overrides */ -[data-theme='dark'] .floating-contributors-title { +[data-theme="dark"] .floating-contributors-title { color: #f1f5f9; } -[data-theme='dark'] .floating-contributors-subtitle { +[data-theme="dark"] .floating-contributors-subtitle { color: rgba(203, 213, 225, 0.8); } -[data-theme='dark'] .floating-contributors-close { +[data-theme="dark"] .floating-contributors-close { color: rgba(203, 213, 225, 0.7); background: rgba(71, 85, 105, 0.3); } -[data-theme='dark'] .activity-username { +[data-theme="dark"] .activity-username { color: #f1f5f9; } -[data-theme='dark'] .activity-message { +[data-theme="dark"] .activity-message { color: rgba(203, 213, 225, 0.8); } -[data-theme='dark'] .activity-time { +[data-theme="dark"] .activity-time { color: rgba(148, 163, 184, 0.7); } -[data-theme='dark'] .contributors-grid-header { +[data-theme="dark"] .contributors-grid-header { color: #f1f5f9; background: rgba(71, 85, 105, 0.4); } -[data-theme='dark'] .floating-contributors-activity { +[data-theme="dark"] .floating-contributors-activity { background: rgba(71, 85, 105, 0.3); } -[data-theme='dark'] .floating-contributors-activity:hover { +[data-theme="dark"] .floating-contributors-activity:hover { background: rgba(71, 85, 105, 0.5); } -[data-theme='dark'] .contributors-avatars { +[data-theme="dark"] .contributors-avatars { background: rgba(71, 85, 105, 0.2); } -[data-theme='dark'] .activity-action-badge { +[data-theme="dark"] .activity-action-badge { background: rgba(139, 92, 246, 0.2); color: #c084fc; } -[data-theme='dark'] .contributors-count { +[data-theme="dark"] .contributors-count { background: rgba(139, 92, 246, 0.2); color: #c084fc; } -[data-theme='dark'] .contributors-more { +[data-theme="dark"] .contributors-more { background: rgba(71, 85, 105, 0.3); border-color: rgba(148, 163, 184, 0.3); color: rgba(203, 213, 225, 0.8); } -[data-theme='dark'] .contributors-more:hover { +[data-theme="dark"] .contributors-more:hover { background: rgba(139, 92, 246, 0.3); border-color: rgba(139, 92, 246, 0.5); color: #f1f5f9; } .floating-contributors-card::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; @@ -335,7 +345,8 @@ } /* Header embedded version gradient */ -.floating-contributors-container.header-embedded .floating-contributors-card::before { +.floating-contributors-container.header-embedded + .floating-contributors-card::before { border-radius: 24px; background: linear-gradient( 135deg, @@ -372,7 +383,7 @@ transform: scale(1.1); } -[data-theme='light'] .floating-contributors-close { +[data-theme="light"] .floating-contributors-close { color: rgba(0, 0, 0, 0.7); background: rgba(148, 163, 184, 0.3); } @@ -395,7 +406,7 @@ margin-bottom: 4px; } -[data-theme='light'] .floating-contributors-title { +[data-theme="light"] .floating-contributors-title { color: #333; } @@ -416,7 +427,7 @@ margin-top: 4px; } -[data-theme='light'] .floating-contributors-subtitle { +[data-theme="light"] .floating-contributors-subtitle { color: rgba(30, 41, 59, 0.6); } @@ -472,12 +483,12 @@ opacity: 1; } -[data-theme='light'] .floating-contributors-activity { +[data-theme="light"] .floating-contributors-activity { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); } -[data-theme='light'] .floating-contributors-activity:hover { +[data-theme="light"] .floating-contributors-activity:hover { background: rgba(102, 126, 234, 0.05); border-color: rgba(102, 126, 234, 0.2); } @@ -526,7 +537,8 @@ } @keyframes pulse { - 0%, 100% { + 0%, + 100% { opacity: 1; transform: scale(1); } @@ -563,7 +575,7 @@ max-width: 140px; /* Limit username width */ } -[data-theme='light'] .activity-username { +[data-theme="light"] .activity-username { color: #333; } @@ -583,7 +595,7 @@ box-shadow: 0 2px 4px rgba(108, 74, 232, 0.1); } -[data-theme='light'] .activity-action-badge { +[data-theme="light"] .activity-action-badge { background: rgba(102, 126, 234, 0.1); color: #667eea; border-color: rgba(102, 126, 234, 0.2); @@ -599,7 +611,7 @@ font-weight: 400; } -[data-theme='light'] .activity-time { +[data-theme="light"] .activity-time { color: rgba(60, 60, 60, 0.5); } @@ -613,7 +625,7 @@ line-height: 1.4; } -[data-theme='light'] .activity-message { +[data-theme="light"] .activity-message { color: rgba(60, 60, 60, 0.8); } @@ -639,7 +651,7 @@ box-shadow: none; } -[data-theme='light'] .contributors-grid-header { +[data-theme="light"] .contributors-grid-header { color: rgba(30, 41, 59, 0.8); } @@ -653,7 +665,7 @@ box-shadow: 0 2px 4px rgba(108, 74, 232, 0.1); } -[data-theme='light'] .contributors-count { +[data-theme="light"] .contributors-count { background: rgba(102, 126, 234, 0.1); color: #667eea; } @@ -704,7 +716,7 @@ } .contributor-link::after { - content: ''; + content: ""; position: absolute; inset: 0; border-radius: 50%; @@ -721,11 +733,11 @@ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); } -[data-theme='light'] .contributor-avatar { +[data-theme="light"] .contributor-avatar { border-color: rgba(0, 0, 0, 0.2); } -[data-theme='light'] .contributor-avatar:hover { +[data-theme="light"] .contributor-avatar:hover { border-color: rgba(102, 126, 234, 0.8); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15); } @@ -743,7 +755,10 @@ white-space: nowrap; opacity: 0; visibility: hidden; - transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; + transition: + opacity 0.2s ease, + visibility 0.2s ease, + transform 0.2s ease; z-index: 100; pointer-events: none; backdrop-filter: blur(8px); @@ -751,7 +766,7 @@ } .contributor-tooltip::after { - content: ''; + content: ""; position: absolute; top: 100%; left: 50%; @@ -807,13 +822,13 @@ transform: scale(1.1); } -[data-theme='light'] .contributors-more { +[data-theme="light"] .contributors-more { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.2); color: rgba(30, 41, 59, 0.7); } -[data-theme='light'] .contributors-more:hover { +[data-theme="light"] .contributors-more:hover { background: rgba(102, 126, 234, 0.1); border-color: rgba(102, 126, 234, 0.3); color: rgba(30, 41, 59, 0.9); @@ -824,7 +839,7 @@ margin-top: auto; } -[data-theme='light'] .floating-contributors-footer { +[data-theme="light"] .floating-contributors-footer { border-top-color: rgba(0, 0, 0, 0.1); } @@ -857,13 +872,18 @@ } .contributors-cta::before { - content: ''; + content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); transition: left 0.6s ease; } @@ -994,12 +1014,12 @@ font-size: 10px; } -.contributors-more span { - font-size: 6.5px; - line-height: 1; - display: inline-block; - text-align: center; -} + .contributors-more span { + font-size: 6.5px; + line-height: 1; + display: inline-block; + text-align: center; + } .contributors-cta { padding: 10px 14px; @@ -1086,7 +1106,8 @@ /* Animation enhancements */ @keyframes float { - 0%, 100% { + 0%, + 100% { transform: translateY(0px); } 50% { @@ -1190,7 +1211,7 @@ inset 0 1px 0 rgba(255, 255, 255, 0.25); } -[data-theme='light'] .floating-contributors-card:hover { +[data-theme="light"] .floating-contributors-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(102, 126, 234, 0.2), @@ -1198,7 +1219,8 @@ } /* Subtle hover effects for header embedded version */ -.floating-contributors-container.header-embedded .floating-contributors-card:hover { +.floating-contributors-container.header-embedded + .floating-contributors-card:hover { transform: scale(1.01); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), @@ -1207,7 +1229,9 @@ border-color: rgba(102, 126, 234, 0.3); } -[data-theme='light'] .floating-contributors-container.header-embedded .floating-contributors-card:hover { +[data-theme="light"] + .floating-contributors-container.header-embedded + .floating-contributors-card:hover { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(102, 126, 234, 0.2), diff --git a/src/components/FloatingContributors/index.tsx b/src/components/FloatingContributors/index.tsx index e6f4855d..171af61f 100644 --- a/src/components/FloatingContributors/index.tsx +++ b/src/components/FloatingContributors/index.tsx @@ -1,6 +1,6 @@ -import React, { useState, useEffect, useCallback, useRef } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; -import './FloatingContributors.css'; +import React, { useState, useEffect, useCallback, useRef } from "react"; +import { motion, AnimatePresence } from "framer-motion"; +import "./FloatingContributors.css"; // Format relative time (e.g., "2 hours ago") const formatTimeAgo = (date: Date): string => { @@ -86,7 +86,14 @@ interface ContributorActivity { avatar_url: string; html_url: string; }; - action: 'pushed' | 'created' | 'merged' | 'opened' | 'commented' | 'closed' | 'other'; + action: + | "pushed" + | "created" + | "merged" + | "opened" + | "commented" + | "closed" + | "other"; message?: string; timestamp: Date; timeAgo: string; @@ -96,7 +103,9 @@ interface FloatingContributorsProps { headerEmbedded?: boolean; } -const FloatingContributors: React.FC = ({ headerEmbedded = false }) => { +const FloatingContributors: React.FC = ({ + headerEmbedded = false, +}) => { const [contributors, setContributors] = useState([]); const [activities, setActivities] = useState([]); const [currentActivityIndex, setCurrentActivityIndex] = useState(0); @@ -109,47 +118,55 @@ const FloatingContributors: React.FC = ({ headerEmbed const createFallbackActivities = useCallback((): ContributorActivity[] => { const fallbackContributors = [ { - login: 'sanjay-kv', - avatar_url: 'https://avatars.githubusercontent.com/u/30715153?v=4', - html_url: 'https://github.com/sanjay-kv', + login: "sanjay-kv", + avatar_url: "https://avatars.githubusercontent.com/u/30715153?v=4", + html_url: "https://github.com/sanjay-kv", }, { - login: 'recodehive-team', - avatar_url: 'https://avatars.githubusercontent.com/u/150000000?v=4', - html_url: 'https://github.com/recodehive', + login: "recodehive-team", + avatar_url: "https://avatars.githubusercontent.com/u/150000000?v=4", + html_url: "https://github.com/recodehive", }, { - login: 'open-source-contributor', - avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=4', - html_url: 'https://github.com/open-source-contributor', + login: "open-source-contributor", + avatar_url: "https://avatars.githubusercontent.com/u/583231?v=4", + html_url: "https://github.com/open-source-contributor", }, { - login: 'developer', - avatar_url: 'https://avatars.githubusercontent.com/u/9919?v=4', - html_url: 'https://github.com/developer', + login: "developer", + avatar_url: "https://avatars.githubusercontent.com/u/9919?v=4", + html_url: "https://github.com/developer", }, { - login: 'coder', - avatar_url: 'https://avatars.githubusercontent.com/u/6154722?v=4', - html_url: 'https://github.com/coder', + login: "coder", + avatar_url: "https://avatars.githubusercontent.com/u/6154722?v=4", + html_url: "https://github.com/coder", }, ]; - const actions: ContributorActivity['action'][] = ['pushed', 'created', 'merged', 'opened', 'commented']; + const actions: ContributorActivity["action"][] = [ + "pushed", + "created", + "merged", + "opened", + "commented", + ]; const timeOffsets = [5, 10, 30, 60, 120, 240, 480]; // minutes const messages = [ - 'Updated documentation', - 'Fixed styling issues', - 'Added new feature', - 'Resolved conflict in package.json', - 'Implemented responsive design', - 'Updated dependencies', - 'Fixed typo in README' + "Updated documentation", + "Fixed styling issues", + "Added new feature", + "Resolved conflict in package.json", + "Implemented responsive design", + "Updated dependencies", + "Fixed typo in README", ]; return fallbackContributors.map((contributor, index) => { const now = new Date(); - const timestamp = new Date(now.getTime() - (timeOffsets[index % timeOffsets.length] * 60 * 1000)); + const timestamp = new Date( + now.getTime() - timeOffsets[index % timeOffsets.length] * 60 * 1000, + ); return { id: `fallback-${index}`, @@ -170,7 +187,7 @@ const FloatingContributors: React.FC = ({ headerEmbed const fetchLiveData = useCallback(async () => { try { // Use specific cache key for this repository's events - const CACHE_KEY = 'recodehive_website_events'; + const CACHE_KEY = "recodehive_website_events"; const CACHE_DURATION = 2 * 60 * 1000; // 2 minutes - short for "live" data // Check if we have recent data already @@ -182,7 +199,7 @@ const FloatingContributors: React.FC = ({ headerEmbed // Check for cached events let events: GitHubEvent[] = []; - if (typeof window !== 'undefined') { + if (typeof window !== "undefined") { try { const cachedData = localStorage.getItem(CACHE_KEY); if (cachedData) { @@ -192,7 +209,7 @@ const FloatingContributors: React.FC = ({ headerEmbed } } } catch (e) { - console.warn('Error retrieving cached events', e); + console.warn("Error retrieving cached events", e); } } @@ -201,7 +218,9 @@ const FloatingContributors: React.FC = ({ headerEmbed setLoading(true); // Fetch repository events from GitHub API - const eventsResponse = await fetch('https://api.github.com/repos/recodehive/recode-website/events?per_page=30'); + const eventsResponse = await fetch( + "https://api.github.com/repos/recodehive/recode-website/events?per_page=30", + ); if (!eventsResponse.ok) { throw new Error(`GitHub API error: ${eventsResponse.status}`); @@ -210,14 +229,17 @@ const FloatingContributors: React.FC = ({ headerEmbed events = await eventsResponse.json(); // Save to cache - if (typeof window !== 'undefined' && Array.isArray(events)) { + if (typeof window !== "undefined" && Array.isArray(events)) { try { - localStorage.setItem(CACHE_KEY, JSON.stringify({ - data: events, - timestamp: now, - })); + localStorage.setItem( + CACHE_KEY, + JSON.stringify({ + data: events, + timestamp: now, + }), + ); } catch (e) { - console.warn('Error caching events data', e); + console.warn("Error caching events data", e); } } } @@ -227,30 +249,36 @@ const FloatingContributors: React.FC = ({ headerEmbed // Convert GitHub events to our activity format const newActivities: ContributorActivity[] = events.map((event) => { // Map GitHub event types to our action types - let action: ContributorActivity['action'] = 'other'; + let action: ContributorActivity["action"] = "other"; let message: string | undefined; switch (event.type) { - case 'PushEvent': - action = 'pushed'; - message = event.payload.commits && event.payload.commits[0]?.message?.slice(0, 50); + case "PushEvent": + action = "pushed"; + message = + event.payload.commits && + event.payload.commits[0]?.message?.slice(0, 50); break; - case 'PullRequestEvent': - if (event.payload.action === 'opened') action = 'opened'; - else if (event.payload.action === 'closed' && event.payload.pull_request?.merged) action = 'merged'; - else if (event.payload.action === 'closed') action = 'closed'; + case "PullRequestEvent": + if (event.payload.action === "opened") action = "opened"; + else if ( + event.payload.action === "closed" && + event.payload.pull_request?.merged + ) + action = "merged"; + else if (event.payload.action === "closed") action = "closed"; break; - case 'CreateEvent': - action = 'created'; + case "CreateEvent": + action = "created"; break; - case 'IssueCommentEvent': - case 'CommitCommentEvent': - case 'PullRequestReviewCommentEvent': - action = 'commented'; + case "IssueCommentEvent": + case "CommitCommentEvent": + case "PullRequestReviewCommentEvent": + action = "commented"; message = event.payload.comment?.body?.slice(0, 50); break; default: - action = 'other'; + action = "other"; } const timestamp = new Date(event.created_at); @@ -278,14 +306,16 @@ const FloatingContributors: React.FC = ({ headerEmbed // Also fetch contributors directly for contribution counts try { - const contributorsResponse = await fetch('https://api.github.com/repos/recodehive/recode-website/contributors?per_page=100'); + const contributorsResponse = await fetch( + "https://api.github.com/repos/recodehive/recode-website/contributors?per_page=100", + ); if (contributorsResponse.ok) { const contributorsData = await contributorsResponse.json(); if (Array.isArray(contributorsData)) { - contributorsData.forEach(contributor => { - if (contributor.login && contributor.type === 'User') { + contributorsData.forEach((contributor) => { + if (contributor.login && contributor.type === "User") { contributorsMap.set(contributor.login, { id: contributor.id.toString(), login: contributor.login, @@ -298,10 +328,10 @@ const FloatingContributors: React.FC = ({ headerEmbed } } } catch (error) { - console.warn('Error fetching contributors:', error); + console.warn("Error fetching contributors:", error); // If we couldn't get contributors data, at least use actors from events - events.forEach(event => { + events.forEach((event) => { const login = event.actor.login; if (!contributorsMap.has(login)) { contributorsMap.set(login, { @@ -332,9 +362,8 @@ const FloatingContributors: React.FC = ({ headerEmbed refreshTimerRef.current = setTimeout(() => { fetchLiveData(); }, 60000); // Refresh every minute - } catch (error) { - console.warn('Error fetching GitHub events:', error); + console.warn("Error fetching GitHub events:", error); // Use fallback data if we have no activities yet if (activities.length === 0) { @@ -343,7 +372,7 @@ const FloatingContributors: React.FC = ({ headerEmbed // Create fallback contributors const contributorsMap = new Map(); - fallbackActivities.forEach(activity => { + fallbackActivities.forEach((activity) => { const login = activity.contributor.login; if (!contributorsMap.has(login)) { contributorsMap.set(login, { @@ -392,18 +421,18 @@ const FloatingContributors: React.FC = ({ headerEmbed // Get GitHub URL for event const getGitHubEventUrl = (activity: ContributorActivity): string => { - const repoUrl = 'https://github.com/recodehive/recode-website'; + const repoUrl = "https://github.com/recodehive/recode-website"; switch (activity.action) { - case 'pushed': + case "pushed": return `${repoUrl}/commits`; - case 'merged': - case 'opened': - case 'closed': + case "merged": + case "opened": + case "closed": return `${repoUrl}/pulls`; - case 'commented': + case "commented": return `${repoUrl}/issues`; - case 'created': + case "created": return repoUrl; default: return repoUrl; @@ -411,28 +440,42 @@ const FloatingContributors: React.FC = ({ headerEmbed }; // Get icon for action type - const getActionIcon = (action: ContributorActivity['action']): string => { + const getActionIcon = (action: ContributorActivity["action"]): string => { switch (action) { - case 'pushed': return '๐Ÿš€'; - case 'created': return 'โœจ'; - case 'merged': return '๐Ÿ”„'; - case 'opened': return '๐Ÿ“'; - case 'commented': return '๐Ÿ’ฌ'; - case 'closed': return 'โœ…'; - default: return '๐Ÿ’ป'; + case "pushed": + return "๐Ÿš€"; + case "created": + return "โœจ"; + case "merged": + return "๐Ÿ”„"; + case "opened": + return "๐Ÿ“"; + case "commented": + return "๐Ÿ’ฌ"; + case "closed": + return "โœ…"; + default: + return "๐Ÿ’ป"; } }; // Get text for action type - const getActionText = (action: ContributorActivity['action']): string => { + const getActionText = (action: ContributorActivity["action"]): string => { switch (action) { - case 'pushed': return 'PUSHED'; - case 'created': return 'CREATED'; - case 'merged': return 'MERGED'; - case 'opened': return 'OPENED'; - case 'commented': return 'COMMENTED'; - case 'closed': return 'CLOSED'; - default: return 'ACTIVE'; + case "pushed": + return "PUSHED"; + case "created": + return "CREATED"; + case "merged": + return "MERGED"; + case "opened": + return "OPENED"; + case "commented": + return "COMMENTED"; + case "closed": + return "CLOSED"; + default: + return "ACTIVE"; } }; @@ -448,30 +491,46 @@ const FloatingContributors: React.FC = ({ headerEmbed {isVisible && ( {/* Main floating card */} {/* Close button */} diff --git a/src/components/StatsSection/index.tsx b/src/components/StatsSection/index.tsx index 38cab1bd..64aaf1b0 100644 --- a/src/components/StatsSection/index.tsx +++ b/src/components/StatsSection/index.tsx @@ -1,6 +1,6 @@ -import React from 'react'; -import { motion } from 'framer-motion'; -import styles from './styles.module.css'; +import React from "react"; +import { motion } from "framer-motion"; +import styles from "./styles.module.css"; interface StatItem { value: string; @@ -9,56 +9,53 @@ interface StatItem { } const stats: StatItem[] = [ - { value: '10,000+', label: 'Active Learners', icon: '๐Ÿ‘ฅ' }, - { value: '100+', label: 'Hours of Content', icon: 'โฑ๏ธ' }, - { value: '24/7', label: 'Community Support', icon: '๐Ÿ’ฌ' }, - { value: '4.9/5', label: 'Average Rating', icon: 'โญ' }, + { value: "10,000+", label: "Active Learners", icon: "๐Ÿ‘ฅ" }, + { value: "100+", label: "Hours of Content", icon: "โฑ๏ธ" }, + { value: "24/7", label: "Community Support", icon: "๐Ÿ’ฌ" }, + { value: "4.9/5", label: "Average Rating", icon: "โญ" }, ]; -const StatCard: React.FC<{ stat: StatItem; index: number }> = ({ stat, index }) => { +const StatCard: React.FC<{ stat: StatItem; index: number }> = ({ + stat, + index, +}) => { return ( - - {stat.icon && ( -
- {stat.icon} -
- )} - {stat.icon}
} + {stat.value} -
- {stat.label} -
+
{stat.label}
); }; @@ -67,7 +64,7 @@ const StatsSection: React.FC = () => { return (
- { visible: { opacity: 1, transition: { - staggerChildren: 0.1 - } - } + staggerChildren: 0.1, + }, + }, }} > {stats.map((stat, index) => ( diff --git a/src/components/StatsSection/styles.module.css b/src/components/StatsSection/styles.module.css index 273a923e..9364dba9 100644 --- a/src/components/StatsSection/styles.module.css +++ b/src/components/StatsSection/styles.module.css @@ -40,7 +40,7 @@ } .statCard::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; @@ -82,7 +82,7 @@ } .statValue::after { - content: ''; + content: ""; position: absolute; bottom: -5px; left: 50%; @@ -121,11 +121,11 @@ grid-template-columns: 1fr 1fr; gap: 1rem; } - + .statCard { padding: 1.5rem 1rem; } - + .statValue { font-size: 2rem; } @@ -135,7 +135,7 @@ .statsGrid { grid-template-columns: 1fr; } - + .section { padding: 3rem 1rem; } @@ -143,12 +143,18 @@ /* Animation keyframes */ @keyframes float { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-10px); } + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } } @keyframes pulse { - 0%, 100% { + 0%, + 100% { transform: scale(1); opacity: 1; } diff --git a/src/components/Svg/index.tsx b/src/components/Svg/index.tsx index 85a92373..14294334 100644 --- a/src/components/Svg/index.tsx +++ b/src/components/Svg/index.tsx @@ -5,14 +5,14 @@ * LICENSE file in the root directory of this source tree. */ -import React, {type ReactNode, type ComponentProps} from 'react'; -import clsx from 'clsx'; -import styles from './styles.module.css'; +import React, { type ReactNode, type ComponentProps } from "react"; +import clsx from "clsx"; +import styles from "./styles.module.css"; -export type SvgIconProps = ComponentProps<'svg'> & { +export type SvgIconProps = ComponentProps<"svg"> & { viewBox?: string; - size?: 'inherit' | 'small' | 'medium' | 'large'; - color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'warning'; + size?: "inherit" | "small" | "medium" | "large"; + color?: "inherit" | "primary" | "secondary" | "success" | "error" | "warning"; svgClass?: string; // Class attribute on the child colorAttr?: string; // Applies a color attribute to the SVG element. children: ReactNode; // Node passed into the SVG element. @@ -23,9 +23,9 @@ export default function Svg(props: SvgIconProps): JSX.Element { svgClass, colorAttr, children, - color = 'inherit', - size = 'medium', - viewBox = '0 0 24 24', + color = "inherit", + size = "medium", + viewBox = "0 0 24 24", ...rest } = props; @@ -40,4 +40,4 @@ export default function Svg(props: SvgIconProps): JSX.Element { {children} ); -} \ No newline at end of file +} diff --git a/src/components/Svg/styles.module.css b/src/components/Svg/styles.module.css index 0b72b2fd..db2d48e3 100644 --- a/src/components/Svg/styles.module.css +++ b/src/components/Svg/styles.module.css @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ - .svgIcon { +.svgIcon { user-select: none; width: 1em; height: 1em; @@ -51,4 +51,4 @@ .inherit { color: inherit; -} \ No newline at end of file +} diff --git a/src/components/TeamProfileCards/index.tsx b/src/components/TeamProfileCards/index.tsx index 366d4199..50158364 100644 --- a/src/components/TeamProfileCards/index.tsx +++ b/src/components/TeamProfileCards/index.tsx @@ -39,7 +39,7 @@ function TeamProfileCard({ children, githubUrl, twitterUrl, - linkedInUrl + linkedInUrl, }: ProfileProps) { return (
@@ -104,7 +104,9 @@ export function ActiveTeamRow(): JSX.Element { values={{ website: , devto: Dev.to, - optimumAi: OptimumAI, + optimumAi: ( + OptimumAI + ), }} > { diff --git a/src/components/TeamProfileCards/teamcards.css b/src/components/TeamProfileCards/teamcards.css index 1f3dc710..7e51aa0a 100644 --- a/src/components/TeamProfileCards/teamcards.css +++ b/src/components/TeamProfileCards/teamcards.css @@ -1,45 +1,58 @@ /* teamcards.css */ .team-profile-card > .card { - transition: transform 0.3s ease, box-shadow 0.3s ease; - border: 0.5px solid black; - } - -[data-theme='dark'] .team-profile-card > .card { - border-color: var(--dark-border); - background: var(--dark-card-bg); - color: var(--dark-text-primary); - } - - .team-profile-card > .card:hover { - transform: translateY(-5px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); - } - -[data-theme='dark'] .team-profile-card > .card:hover { - box-shadow: var(--dark-shadow-lg); - } - - .team-profile-card > .card > .card__header > .avatar > .avatar__photo--xl { - border-radius: 50%; - transition: transform 0.3s ease; - } - - .team-profile-card > .card > .card__footer > .button-group > .button { - transition: background-color 0.3s ease, transform 0.3s ease; - } - - .team-profile-card > .card > .card__footer > .button-group > .button:hover { - background-color: #0056b3; - } - -[data-theme='dark'] .team-profile-card > .card > .card__footer > .button-group > .button { - background: var(--dark-bg-tertiary); - color: var(--dark-text-primary); - border-color: var(--dark-border); - } - -[data-theme='dark'] .team-profile-card > .card > .card__footer > .button-group > .button:hover { - background: var(--dark-card-hover-bg); - } - + transition: + transform 0.3s ease, + box-shadow 0.3s ease; + border: 0.5px solid black; +} + +[data-theme="dark"] .team-profile-card > .card { + border-color: var(--dark-border); + background: var(--dark-card-bg); + color: var(--dark-text-primary); +} + +.team-profile-card > .card:hover { + transform: translateY(-5px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); +} + +[data-theme="dark"] .team-profile-card > .card:hover { + box-shadow: var(--dark-shadow-lg); +} + +.team-profile-card > .card > .card__header > .avatar > .avatar__photo--xl { + border-radius: 50%; + transition: transform 0.3s ease; +} + +.team-profile-card > .card > .card__footer > .button-group > .button { + transition: + background-color 0.3s ease, + transform 0.3s ease; +} + +.team-profile-card > .card > .card__footer > .button-group > .button:hover { + background-color: #0056b3; +} + +[data-theme="dark"] + .team-profile-card + > .card + > .card__footer + > .button-group + > .button { + background: var(--dark-bg-tertiary); + color: var(--dark-text-primary); + border-color: var(--dark-border); +} + +[data-theme="dark"] + .team-profile-card + > .card + > .card__footer + > .button-group + > .button:hover { + background: var(--dark-card-hover-bg); +} diff --git a/src/components/blogCarousel/blogCard.tsx b/src/components/blogCarousel/blogCard.tsx index 1f8a0932..2fb7f2be 100644 --- a/src/components/blogCarousel/blogCard.tsx +++ b/src/components/blogCarousel/blogCard.tsx @@ -6,16 +6,7 @@ import Link from "@docusaurus/Link"; import { Card, CardContent } from "../ui/card"; import { getAuthorNames } from "../../utils/authors"; -const BlogCard = ({ - type, - date, - title, - content, - imageUrl, - id, - authors -}) => { - +const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => { const [isHovered, setIsHovered] = useState(false); if (!id || !type) { @@ -24,10 +15,22 @@ const BlogCard = ({ // Get category from title for demo purposes const getCategory = (title) => { - if (title.toLowerCase().includes('design') || title.toLowerCase().includes('ux')) return 'Design'; - if (title.toLowerCase().includes('ai') || title.toLowerCase().includes('deepmind')) return 'AI & Tech'; - if (title.toLowerCase().includes('github') || title.toLowerCase().includes('git')) return 'Development'; - return 'Resources'; + if ( + title.toLowerCase().includes("design") || + title.toLowerCase().includes("ux") + ) + return "Design"; + if ( + title.toLowerCase().includes("ai") || + title.toLowerCase().includes("deepmind") + ) + return "AI & Tech"; + if ( + title.toLowerCase().includes("github") || + title.toLowerCase().includes("git") + ) + return "Development"; + return "Resources"; }; const category = getCategory(title); @@ -40,7 +43,7 @@ const BlogCard = ({ whileHover={{ y: -8, scale: 1.02, - transition: { duration: 0.4, ease: "easeOut" } + transition: { duration: 0.4, ease: "easeOut" }, }} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} @@ -49,7 +52,7 @@ const BlogCard = ({
{/* Category Badge */} @@ -69,15 +72,18 @@ const BlogCard = ({
๐Ÿ‘ค - {getAuthorNames(authors || [])} + + {getAuthorNames(authors || [])} +
5 min read
{/* Read More Button */} -
- Read Article โ†’ -
+
Read Article โ†’
diff --git a/src/components/blogCarousel/blogCarousel.css b/src/components/blogCarousel/blogCarousel.css index 6a3ae08c..bc9923a0 100644 --- a/src/components/blogCarousel/blogCarousel.css +++ b/src/components/blogCarousel/blogCarousel.css @@ -16,7 +16,7 @@ flex-direction: column; } -[data-theme='dark'] .article-card { +[data-theme="dark"] .article-card { background: #242526; border: 1px solid rgba(74, 85, 104, 0.3); box-shadow: @@ -25,13 +25,17 @@ } .article-card::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: linear-gradient(135deg, rgba(99, 102, 241, 0.02) 0%, rgba(168, 85, 247, 0.02) 100%); + background: linear-gradient( + 135deg, + rgba(99, 102, 241, 0.02) 0%, + rgba(168, 85, 247, 0.02) 100% + ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; @@ -45,7 +49,11 @@ position: absolute; top: 20px; left: 20px; - background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%); + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(255, 255, 255, 0.9) 100% + ); color: #6366f1; padding: 8px 16px; border-radius: 25px; @@ -60,8 +68,12 @@ letter-spacing: 0.5px; } -[data-theme='dark'] .card-category { - background: linear-gradient(135deg, rgba(36, 37, 38, 0.95) 0%, rgba(26, 32, 44, 0.9) 100%); +[data-theme="dark"] .card-category { + background: linear-gradient( + 135deg, + rgba(36, 37, 38, 0.95) 0%, + rgba(26, 32, 44, 0.9) 100% + ); color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); @@ -73,7 +85,7 @@ transform: scale(1.05); } -[data-theme='dark'] .article-card:hover .card-category { +[data-theme="dark"] .article-card:hover .card-category { background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%); color: #1a202c; } @@ -87,13 +99,17 @@ } .card-image::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); + background: linear-gradient( + 135deg, + rgba(99, 102, 241, 0.1) 0%, + rgba(168, 85, 247, 0.1) 100% + ); opacity: 0; transition: opacity 0.3s ease; z-index: 1; @@ -119,14 +135,22 @@ .card-content { padding: 24px; position: relative; - background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%); + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(248, 250, 252, 0.95) 100% + ); flex: 1; display: flex; flex-direction: column; } -[data-theme='dark'] .card-content { - background: linear-gradient(135deg, rgba(36, 37, 38, 0.95) 0%, rgba(26, 32, 44, 0.95) 100%); +[data-theme="dark"] .card-content { + background: linear-gradient( + 135deg, + rgba(36, 37, 38, 0.95) 0%, + rgba(26, 32, 44, 0.95) 100% + ); } .card-title { @@ -147,11 +171,11 @@ color: #6366f1; } -[data-theme='dark'] .card-title { +[data-theme="dark"] .card-title { color: #f1f5f9; } -[data-theme='dark'] .article-card:hover .card-title { +[data-theme="dark"] .article-card:hover .card-title { color: #a78bfa; } @@ -168,7 +192,7 @@ flex: 1; } -[data-theme='dark'] .card-description { +[data-theme="dark"] .card-description { color: #94a3b8; } @@ -183,12 +207,12 @@ gap: 12px; } -[data-theme='dark'] .card-meta { +[data-theme="dark"] .card-meta { border-bottom-color: rgba(74, 85, 104, 0.3); } .card-meta::before { - content: ''; + content: ""; position: absolute; bottom: -1px; left: 0; @@ -248,11 +272,11 @@ color: #6366f1; } -[data-theme='dark'] .author-name { +[data-theme="dark"] .author-name { color: #cbd5e1; } -[data-theme='dark'] .author-name:hover { +[data-theme="dark"] .author-name:hover { color: #a78bfa; } @@ -266,7 +290,7 @@ flex-shrink: 0; } -[data-theme='dark'] .card-read-time { +[data-theme="dark"] .card-read-time { color: #64748b; background: rgba(100, 116, 139, 0.2); } @@ -281,7 +305,11 @@ font-weight: 700; padding: 10px 16px; border-radius: 12px; - background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%); + background: linear-gradient( + 135deg, + rgba(99, 102, 241, 0.1) 0%, + rgba(139, 92, 246, 0.1) 100% + ); border: 1px solid rgba(99, 102, 241, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; @@ -290,7 +318,7 @@ } .card-read-more::before { - content: ''; + content: ""; position: absolute; top: 0; left: -100%; @@ -311,13 +339,17 @@ left: 0; } -[data-theme='dark'] .card-read-more { +[data-theme="dark"] .card-read-more { color: #a78bfa; - background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(192, 132, 252, 0.1) 100%); + background: linear-gradient( + 135deg, + rgba(167, 139, 250, 0.1) 0%, + rgba(192, 132, 252, 0.1) 100% + ); border-color: rgba(167, 139, 250, 0.2); } -[data-theme='dark'] .card-read-more:hover { +[data-theme="dark"] .card-read-more:hover { color: white; } @@ -326,42 +358,42 @@ .card-image { height: 160px; } - + .card-content { padding: 20px; } - + .card-title { font-size: 16px; margin-bottom: 10px; } - + .card-description { font-size: 13px; margin-bottom: 16px; -webkit-line-clamp: 2; } - + .card-meta { margin-bottom: 12px; padding-bottom: 12px; } - + .author-avatar { width: 24px; height: 24px; font-size: 12px; } - + .author-name { font-size: 11px; } - + .card-read-time { font-size: 10px; padding: 3px 6px; } - + .card-read-more { font-size: 12px; padding: 8px 12px; @@ -377,7 +409,9 @@ .page-transition-enter-active { opacity: 1; transform: translateY(0); - transition: opacity 0.6s ease-out, transform 0.6s ease-out; + transition: + opacity 0.6s ease-out, + transform 0.6s ease-out; } .page-transition-exit { @@ -388,7 +422,9 @@ .page-transition-exit-active { opacity: 0; transform: translateY(-20px); - transition: opacity 0.4s ease-in, transform 0.4s ease-in; + transition: + opacity 0.4s ease-in, + transform 0.4s ease-in; } /* Blog Carousel Section Enhancements */ @@ -399,7 +435,7 @@ overflow: hidden; } -[data-theme='dark'] .blog-carousel-section { +[data-theme="dark"] .blog-carousel-section { background: linear-gradient(135deg, #1b1b1d 0%, #121212 50%, #1a202c 100%); } @@ -417,4 +453,4 @@ a[href*="/blog/"] { a[href*="/blog/"]:hover { text-decoration: none; -} \ No newline at end of file +} diff --git a/src/components/blogCarousel/blogCarousel.tsx b/src/components/blogCarousel/blogCarousel.tsx index b4061bbd..2f7e2c53 100644 --- a/src/components/blogCarousel/blogCarousel.tsx +++ b/src/components/blogCarousel/blogCarousel.tsx @@ -34,7 +34,6 @@ export function BlogCarousel() { return (
- {blogs.map((blog, index) => ( - + void; } -export default function PRListModal({ contributor, isOpen, onClose }: PRListModalProps): JSX.Element | null { +export default function PRListModal({ + contributor, + isOpen, + onClose, +}: PRListModalProps): JSX.Element | null { const { colorMode } = useColorMode(); const isDark = colorMode === "dark"; - + // Get filtered PRs from context - const { getFilteredPRsForContributor, currentTimeFilter } = useCommunityStatsContext(); + const { getFilteredPRsForContributor, currentTimeFilter } = + useCommunityStatsContext(); if (!contributor) return null; @@ -46,10 +51,10 @@ export default function PRListModal({ contributor, isOpen, onClose }: PRListModa const formatDate = (dateString: string) => { const date = new Date(dateString); - return date.toLocaleDateString('en-US', { - year: 'numeric', - month: 'short', - day: 'numeric' + return date.toLocaleDateString("en-US", { + year: "numeric", + month: "short", + day: "numeric", }); }; @@ -60,7 +65,7 @@ export default function PRListModal({ contributor, isOpen, onClose }: PRListModa }; const handleKeyDown = (e: React.KeyboardEvent) => { - if (e.key === 'Escape') { + if (e.key === "Escape") { onClose(); } }; @@ -68,20 +73,25 @@ export default function PRListModal({ contributor, isOpen, onClose }: PRListModa // Helper function to get filter display text const getFilterDisplayText = (filter: string) => { switch (filter) { - case 'week': return 'This Week'; - case 'month': return 'This Month'; - case 'year': return 'This Year'; - case 'all': return 'All Time'; - default: return 'All Time'; + case "week": + return "This Week"; + case "month": + return "This Month"; + case "year": + return "This Year"; + case "all": + return "All Time"; + default: + return "All Time"; } }; // Helper function to get badge color based on points const getPointsBadgeColor = (points: number) => { - if (points >= 50) return '#10b981'; // Green for Level 3 - if (points >= 30) return '#f59e0b'; // Orange for Level 2 - if (points >= 10) return '#3b82f6'; // Blue for Level 1 - return '#6b7280'; // Gray for no points + if (points >= 50) return "#10b981"; // Green for Level 3 + if (points >= 30) return "#f59e0b"; // Orange for Level 2 + if (points >= 10) return "#3b82f6"; // Blue for Level 1 + return "#6b7280"; // Gray for no points }; return ( @@ -109,20 +119,27 @@ export default function PRListModal({ contributor, isOpen, onClose }: PRListModa {/* Modal Header */}
- {contributor.username}
-

+

{contributor.username}'s Pull Requests

-

+

{/* Show filtered count with actual total points */} - {filteredPRs.length} merged PR{filteredPRs.length !== 1 ? 's' : ''} โ€ข {totalPoints} point{totalPoints !== 1 ? 's' : ''} - {currentTimeFilter !== 'all' && ( - + {filteredPRs.length} merged PR + {filteredPRs.length !== 1 ? "s" : ""} โ€ข {totalPoints} point + {totalPoints !== 1 ? "s" : ""} + {currentTimeFilter !== "all" && ( + ({getFilterDisplayText(currentTimeFilter)}) )} @@ -152,30 +169,32 @@ export default function PRListModal({ contributor, isOpen, onClose }: PRListModa transition={{ delay: index * 0.05 }} >

-

+

{pr.title}

{/* Points badge */} {pr.points > 0 && ( - +{pr.points} pts )} -
- + {pr.repoName} - + #{pr.number} - + Merged on {formatDate(pr.mergedAt)}
@@ -203,16 +228,14 @@ export default function PRListModal({ contributor, isOpen, onClose }: PRListModa

- {currentTimeFilter === 'all' - ? 'No pull request details available' - : `No PRs found for ${getFilterDisplayText(currentTimeFilter).toLowerCase()}` - } + {currentTimeFilter === "all" + ? "No pull request details available" + : `No PRs found for ${getFilterDisplayText(currentTimeFilter).toLowerCase()}`}

- {currentTimeFilter === 'all' - ? 'PR details might not be loaded yet or this contributor has no merged PRs.' - : `Try selecting a different time period or check "All Time" to see all PRs.` - } + {currentTimeFilter === "all" + ? "PR details might not be loaded yet or this contributor has no merged PRs." + : `Try selecting a different time period or check "All Time" to see all PRs.`}

)} @@ -235,4 +258,4 @@ export default function PRListModal({ contributor, isOpen, onClose }: PRListModa )} ); -} \ No newline at end of file +} diff --git a/src/components/dashboard/LeaderBoard/leaderboard.css b/src/components/dashboard/LeaderBoard/leaderboard.css index 810cb4a0..2a126e6b 100644 --- a/src/components/dashboard/LeaderBoard/leaderboard.css +++ b/src/components/dashboard/LeaderBoard/leaderboard.css @@ -343,9 +343,17 @@ } @keyframes select-pulse { - 0% { border-color: #6366f1; box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } - 70% { border-color: #6366f1; box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); } - 100% { border-color: inherit; } + 0% { + border-color: #6366f1; + box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); + } + 70% { + border-color: #6366f1; + box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); + } + 100% { + border-color: inherit; + } } .time-filter-select.highlight-change { @@ -353,7 +361,7 @@ } .time-filter-wrapper::after { - content: ''; + content: ""; position: absolute; right: 15px; top: 50%; @@ -379,7 +387,11 @@ font-weight: 600; letter-spacing: 0.3px; appearance: none; - background: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%); + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.05) 0%, + rgba(0, 0, 0, 0.05) 100% + ); cursor: pointer; transition: all 0.25s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); @@ -857,7 +869,32 @@ .points-cell { justify-self: center; } - + + /* Pagination mobile styles */ + .pagination { + flex-wrap: wrap; + gap: 6px; + padding: 16px 0; + } + + .page-numbers { + order: 2; + width: 100%; + justify-content: center; + margin-top: 8px; + } + + .pagination-btn { + width: 36px; + height: 36px; + } + + .page-btn, + .pagination-ellipsis { + width: 32px; + height: 32px; + font-size: 14px; + } } /* Skeleton Loader Styles */ @@ -1292,7 +1329,7 @@ } .pr-item-number { - font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; font-weight: 500; } @@ -1406,80 +1443,30 @@ max-height: 90vh; margin: 20px; } - + .pr-modal-header { padding: 20px 20px 12px; } - + .pr-modal-body { padding: 0 20px; } - + .pr-modal-footer { padding: 12px 20px 20px; } - + .pr-item-header { flex-direction: column; align-items: flex-start; gap: 8px; } - + .pr-item-actions { align-self: flex-end; } - + .pr-item-meta { gap: 12px; } } - -/* Pagination mobile styles */ -/* Pagination responsive styles */ -@media (max-width: 768px) { - .contributors-container .pagination { - flex-direction: row; - gap: 0; - } - .contributors-container .page-numbers { - flex-wrap: nowrap; - gap: 0; - padding: 0; - } - .contributors-container .page-numbers .page-btn, - .contributors-container .pagination .pagination-btn, - .contributors-container .pagination-ellipsis { - min-width: 32px; - width: 32px; - height: 32px; - padding: 8px; - font-size: 14px; - } - .contributors-container .pagination span { - min-width: 32px; - border-radius: 8px; - } -} - -@media (max-width: 475px) { - .contributors-container .page-numbers .page-btn, - .contributors-container .pagination .pagination-btn, - .contributors-container .pagination-ellipsis { - min-width: 24px; - width: 24px; - height: 24px; - margin: 0 4px; - font-size: 12px; - } - .contributors-container .pagination span { - min-width: 24px; - } -} - -@media (max-width: 320px) { - .contributors-container .page-numbers .page-btn, - .contributors-container .pagination .pagination-btn, - .contributors-container .pagination-ellipsis { - margin: 0 2px; - } -} \ No newline at end of file diff --git a/src/components/dashboard/LeaderBoard/leaderboard.tsx b/src/components/dashboard/LeaderBoard/leaderboard.tsx index e4c105fe..c8ea692f 100644 --- a/src/components/dashboard/LeaderBoard/leaderboard.tsx +++ b/src/components/dashboard/LeaderBoard/leaderboard.tsx @@ -16,7 +16,7 @@ import PRListModal from "./PRListModal"; import { mockContributors } from "./mockData"; import "./leaderboard.css"; -const GITHUB_ORG = "recodehive"; +const GITHUB_ORG = "recodehive"; // Users to exclude from the leaderboard const EXCLUDED_USERS = ["sanjay-kv", "allcontributors", "allcontributors[bot]"]; @@ -44,23 +44,23 @@ interface Stats { flooredTotalPoints: number; } -function Badge({ - count, - label, - color, +function Badge({ + count, + label, + color, onClick, - clickable = false -}: { - count: number; - label: string; + clickable = false, +}: { + count: number; + label: string; color: { background: string; color: string }; onClick?: () => void; clickable?: boolean; }) { const badgeStyle = { ...color, - cursor: clickable ? 'pointer' : 'default', - transition: clickable ? 'all 0.2s ease' : 'none', + cursor: clickable ? "pointer" : "default", + transition: clickable ? "all 0.2s ease" : "none", }; const handleClick = () => { @@ -70,20 +70,20 @@ function Badge({ }; const handleKeyDown = (e: React.KeyboardEvent) => { - if (clickable && (e.key === 'Enter' || e.key === ' ')) { + if (clickable && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); if (onClick) onClick(); } }; return ( - {count} {label} @@ -91,38 +91,51 @@ function Badge({ ); } -function TopPerformerCard({ - contributor, - rank, - onPRClick -}: { - contributor: Contributor; +function TopPerformerCard({ + contributor, + rank, + onPRClick, +}: { + contributor: Contributor; rank: number; onPRClick: (contributor: Contributor) => void; }) { const { colorMode } = useColorMode(); const isDark = colorMode === "dark"; const rankClass = rank === 1 ? "top-1" : rank === 2 ? "top-2" : "top-3"; - + return (
- {contributor.username} + {contributor.username}
{rank}
- + {contributor.username}
- onPRClick(contributor)} clickable={true} /> - +
@@ -131,21 +144,22 @@ function TopPerformerCard({ export default function LeaderBoard(): JSX.Element { // Get time filter functions from context - const { - contributors, - stats, - loading, - error, - currentTimeFilter, - setTimeFilter + const { + contributors, + stats, + loading, + error, + currentTimeFilter, + setTimeFilter, } = useCommunityStatsContext(); - + const { colorMode } = useColorMode(); const isDark = colorMode === "dark"; const [searchQuery, setSearchQuery] = useState(""); const [currentPage, setCurrentPage] = useState(1); - const [selectedContributor, setSelectedContributor] = useState(null); + const [selectedContributor, setSelectedContributor] = + useState(null); const [isModalOpen, setIsModalOpen] = useState(false); const [isSelectChanged, setIsSelectChanged] = useState(false); const itemsPerPage = 10; @@ -163,22 +177,23 @@ export default function LeaderBoard(): JSX.Element { // Use mock data only in development mode when there's an error or no contributors const displayContributors = - (error || contributors.length === 0) - ? (typeof process !== "undefined" && process.env.NODE_ENV === "development" - ? mockContributors - : []) + error || contributors.length === 0 + ? typeof process !== "undefined" && process.env.NODE_ENV === "development" + ? mockContributors + : [] : contributors; - // Filter out excluded users and apply search filter const filteredContributors = contributors - .filter((contributor) => - !EXCLUDED_USERS.some(excludedUser => - contributor.username.toLowerCase() === excludedUser.toLowerCase() - ) + .filter( + (contributor) => + !EXCLUDED_USERS.some( + (excludedUser) => + contributor.username.toLowerCase() === excludedUser.toLowerCase(), + ), ) .filter((contributor) => - contributor.username.toLowerCase().includes(searchQuery.toLowerCase()) + contributor.username.toLowerCase().includes(searchQuery.toLowerCase()), ); const totalPages = Math.ceil(filteredContributors.length / itemsPerPage); @@ -186,12 +201,13 @@ export default function LeaderBoard(): JSX.Element { const indexOfFirst = indexOfLast - itemsPerPage; const currentItems = filteredContributors.slice(indexOfFirst, indexOfLast); - const paginate = (pageNumber: number) => setCurrentPage(Math.max(1, Math.min(pageNumber, totalPages))); + const paginate = (pageNumber: number) => + setCurrentPage(Math.max(1, Math.min(pageNumber, totalPages))); const renderPaginationButtons = () => { const pages = []; const maxVisibleButtons = 5; // Maximum number of page buttons to show directly - + // Special case: if we have 7 or fewer pages, show all of them without ellipsis if (totalPages <= 7) { for (let i = 1; i <= totalPages; i++) { @@ -202,14 +218,14 @@ export default function LeaderBoard(): JSX.Element { className={`page-btn ${currentPage === i ? "active" : ""}`} > {i} - + , ); } return pages; } - + // For more than 7 pages, use the ellipsis approach - + // Always show first page pages.push( + , ); - + // Calculate the range of pages to show (middle section) // We want to show current page and 1-2 pages before and after when possible let startPage = Math.max(2, currentPage - 1); let endPage = Math.min(totalPages - 1, currentPage + 1); - + // Adjust start and end page if we're near the beginning or end if (currentPage <= 3) { // Near the beginning, show pages 2, 3, 4 @@ -236,14 +252,16 @@ export default function LeaderBoard(): JSX.Element { endPage = totalPages - 1; startPage = Math.max(2, totalPages - 3); } - + // Show ellipsis if needed before the middle range if (startPage > 2) { pages.push( - ... + + ... + , ); } - + // Show pages in the middle range for (let i = startPage; i <= endPage; i++) { pages.push( @@ -253,17 +271,19 @@ export default function LeaderBoard(): JSX.Element { className={`page-btn ${currentPage === i ? "active" : ""}`} > {i} - + , ); } - + // Show ellipsis if needed after the middle range if (endPage < totalPages - 1) { pages.push( - ... + + ... + , ); } - + // Always show last page pages.push( + , ); - + return pages; }; @@ -288,11 +308,16 @@ export default function LeaderBoard(): JSX.Element { // Helper function for time filter display const getTimeFilterLabel = (filter: string) => { switch (filter) { - case 'week': return '๐Ÿ“Š This Week'; - case 'month': return '๐Ÿ“† This Month'; - case 'year': return '๐Ÿ“… This Year'; - case 'all': return '๐Ÿ† All Time'; - default: return '๐Ÿ† All Time'; + case "week": + return "๐Ÿ“Š This Week"; + case "month": + return "๐Ÿ“† This Month"; + case "year": + return "๐Ÿ“… This Year"; + case "all": + return "๐Ÿ† All Time"; + default: + return "๐Ÿ† All Time"; } }; @@ -308,7 +333,8 @@ export default function LeaderBoard(): JSX.Element { >

recode hive Leaderboard

- Top contributors across the {GITHUB_ORG} organization + Top contributors across the {GITHUB_ORG}{" "} + organization

@@ -316,9 +342,15 @@ export default function LeaderBoard(): JSX.Element { {!loading && filteredContributors.length > 2 && (
-

recode hive Top Performers

+

+ recode hive Top Performers +

- + setSearchTerm(e.target.value)} + className="pl-12 h-12 custom-input bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white border-gray-200 dark:border-gray-600 rounded-xl text-lg" + /> +
+
+ + +
+
+ +
+
+ + Showing {filteredCompanies.length} of {companyTips?.length || 0}{" "} + companies +
+
+ + Updated weekly with latest interview insights +
+
+ + +
+ {filteredCompanies.map((company, companyIndex) => { + const isOpen = expandedCompanies[companyIndex] || false; + return ( + + + {/* --------- HEADER --------- */} + + {/* Background pattern */} +
-
- -
-
-

- ๐Ÿข - FAANG+ Companies Overview -

-

- Navigate the unique interview processes of the world's most competitive tech companies -

-
- -
- {[ - { - title: "Big Tech Focus", - icon: "๐ŸŽฏ", - description: "Google, Amazon, Meta, Apple, Netflix, Microsoft + emerging unicorns", - color: "from-blue-500 to-blue-600", - bgColor: "bg-blue-500", - stats: "6+ Companies", - }, - { - title: "Interview Styles", - icon: "๐Ÿ’ผ", - description: "System Design, Behavioral, Coding, Product Sense, Leadership", - color: "from-green-500 to-green-600", - bgColor: "bg-green-500", - stats: "5 Categories", - }, - { - title: "Success Factors", - icon: "โญ", - description: "Company culture fit, technical excellence, leadership principles", - color: "from-purple-500 to-purple-600", - bgColor: "bg-purple-500", - stats: "95% Success", - }, - { - title: "Real Questions", - icon: "โ“", - description: "Actual questions from recent interviews with detailed answers", - color: "from-orange-500 to-orange-600", - bgColor: "bg-orange-500", - stats: "100+ Questions", - }, - ]?.map((item, i) => ( - item ? ( + +
+
+ {/* logo */} + + {`${company.company} +
+ +
+ + + {/* title + focus */} +
+ + {company.company} + +
+
+ +
+

+ Focus: {company.focus} +

+
+ +
+ {company.focusAreas.slice(0, 4).map((area, i) => ( + -
- - {item.icon} -
-

{item.title}

-

{item.description}

-
- {item.stats} -
- ) : null - ))} + {area} + + ))} + {company.focusAreas.length > 4 && ( + + +{company.focusAreas.length - 4} more + + )} +
+
+ + {/* demand + industry */} +
+
+ + High Demand +
+
+ {company.industry} +
+
-
- {[ - { metric: "92%", label: "Interview Success Rate", icon: "๐Ÿ“ˆ", color: "text-green-600" }, - { metric: "150+", label: "Companies Covered", icon: "๐Ÿข", color: "text-blue-600" }, - { metric: "50K+", label: "Successful Candidates", icon: "๐Ÿ‘ฅ", color: "text-purple-600" }, - ]?.map((stat, i) => ( - stat ? ( - -
{stat.metric}
-
- {stat.icon} - {stat.label} -
- ) : null +
+ + + Common roles: + {company.roleTypes.map((role, i) => ( + + {role} + ))} -
-
- - - -
-
- - setSearchTerm(e.target.value)} - className="pl-12 h-12 custom-input bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white border-gray-200 dark:border-gray-600 rounded-xl text-lg" - /> -
-
- - -
-
- -
-
- - Showing {filteredCompanies.length} of {companyTips?.length || 0} companies -
-
- - Updated weekly with latest interview insights -
-
- - -
- {filteredCompanies.map((company, companyIndex) => { - const isOpen = expandedCompanies[companyIndex] || false - return ( - - - {/* --------- HEADER --------- */} - - {/* Background pattern */} -
-
-
- -
-
- {/* logo */} - - {`${company.company} -
- -
- - - {/* title + focus */} -
- - {company.company} - -
-
- -
-

- Focus: {company.focus} -

-
- -
- {company.focusAreas.slice(0, 4).map((area, i) => ( - - {area} - - ))} - {company.focusAreas.length > 4 && ( - - +{company.focusAreas.length - 4} more - - )} -
-
- - {/* demand + industry */} -
-
- - High Demand -
-
{company.industry}
-
-
- -
- - - Common roles: - {company.roleTypes.map((role, i) => ( - - {role} - - ))} - - - {/* collapse toggle */} - -
-
- - - {/* --------- COLLAPSIBLE CONTENT --------- */} - - -
- {/* Key Preparation Tips */} - -

-
- -
- Key Preparation Tips -

-
    - {company.tips.map((tip, i) => ( - -
    - {i + 1} -
    - {tip} -     - ))} -
- - - {/* Common Interview Questions */} - -

-
- -
- Common Interview Questions -

-
- {company.commonQuestions.map((item, i) => { - const questionKey = `${companyIndex}-${i}` - const isExpanded = expandedQuestions[questionKey] - - return ( - - toggleQuestion(companyIndex, i)} - className="w-full text-left" - > - -
-

- "{item.question}" -

- - {item.category} - -
- - - - - - - -

- {item.answer} -

- - - - ) - })} -
- -
- - {/* Contributors Section */} - -
-
๐Ÿš€
-
-
-
- -
-
- Community Contributors Needed! -
-
-

- Help keep {company.company}'s interview information current! Share recent questions, tips, or insights you've encountered to help fellow candidates succeed. -

-
- - -
-
-
- - - - + - ) - })} -
- - {filteredCompanies.length === 0 && ( - -
๐Ÿ”
-

No companies match your current filters.

- - - )} - - - {/* Background elements */} -
๐Ÿค
-
๐Ÿ’ก
- -
-
-

- ๐Ÿค - Join Our Interview Prep Community -

-

- Help build the most comprehensive company interview resource and accelerate your career growth -

+
- -
- {[ - { - title: "Share Experiences", - icon: "๐Ÿ’ฌ", - description: "Recent interview questions and experiences from your interviews", - color: "from-blue-500 to-blue-600", - bgColor: "bg-blue-500", - benefit: "Help 1000+ candidates", - }, - { - title: "Update Tips", - icon: "๐Ÿ’ก", - description: "Company-specific preparation strategies and insider knowledge", - color: "from-green-500 to-green-600", - bgColor: "bg-green-500", - benefit: "Earn community points", - }, - { - title: "Add Companies", - icon: "๐Ÿข", - description: "Request coverage for new companies and emerging startups", - color: "from-purple-500 to-purple-600", - bgColor: "bg-purple-500", - benefit: "Shape our roadmap", - }, - { - title: "Improve Content", - icon: "โœจ", - description: "Enhance existing company profiles with updated information", - color: "from-orange-500 to-orange-600", - bgColor: "bg-orange-500", - benefit: "Get featured contributor", - }, - ].map((item, i) => ( - + + + {/* --------- COLLAPSIBLE CONTENT --------- */} + + +
+ {/* Key Preparation Tips */} + +

+
+ +
+ Key Preparation Tips +

+
    + {company.tips.map((tip, i) => ( + -
    + + {i + 1} + +
    + + {tip} + +     + ))} +
+ + + {/* Common Interview Questions */} + +

+
+ +
+ Common Interview Questions +

+
+ {company.commonQuestions.map((item, i) => { + const questionKey = `${companyIndex}-${i}`; + const isExpanded = expandedQuestions[questionKey]; + + return ( + + + toggleQuestion(companyIndex, i) + } + className="w-full text-left" > + +
+

+ "{item.question}" +

+ + {item.category} + +
- {item.icon} -
-

{item.title}

-

{item.description}

-
- {item.benefit} -
- - ))} + animate={{ rotate: isExpanded ? 180 : 0 }} + transition={{ duration: 0.2 }} + > + + + + + + +

+ {item.answer} +

+ + + + ); + })} +
+
-
- - - -

- Join 50,000+ developers preparing for their dream jobs -

-
-
+ +
+
+
+ + + + + ); + })} +
+ + {filteredCompanies.length === 0 && ( + +
๐Ÿ”
+

+ No companies match your current filters. +

+ - ) -} + )} + + + {/* Background elements */} +
๐Ÿค
+
๐Ÿ’ก
+ +
+
+

+ ๐Ÿค + Join Our Interview Prep Community +

+

+ Help build the most comprehensive company interview resource and + accelerate your career growth +

+
+ +
+ {[ + { + title: "Share Experiences", + icon: "๐Ÿ’ฌ", + description: + "Recent interview questions and experiences from your interviews", + color: "from-blue-500 to-blue-600", + bgColor: "bg-blue-500", + benefit: "Help 1000+ candidates", + }, + { + title: "Update Tips", + icon: "๐Ÿ’ก", + description: + "Company-specific preparation strategies and insider knowledge", + color: "from-green-500 to-green-600", + bgColor: "bg-green-500", + benefit: "Earn community points", + }, + { + title: "Add Companies", + icon: "๐Ÿข", + description: + "Request coverage for new companies and emerging startups", + color: "from-purple-500 to-purple-600", + bgColor: "bg-purple-500", + benefit: "Shape our roadmap", + }, + { + title: "Improve Content", + icon: "โœจ", + description: + "Enhance existing company profiles with updated information", + color: "from-orange-500 to-orange-600", + bgColor: "bg-orange-500", + benefit: "Get featured contributor", + }, + ].map((item, i) => ( + +
+ + + {item.icon} + +
+

+ {item.title} +

+

+ {item.description} +

+
+ {item.benefit} +
+ + ))} +
-export default CompaniesTab +
+ + + +

+ Join 50,000+ developers preparing for their dream jobs +

+
+
+ + + ); +}; + +export default CompaniesTab; diff --git a/src/pages/interview-prep/OverviewTab.tsx b/src/pages/interview-prep/OverviewTab.tsx index 1b49590a..09ce8e4c 100644 --- a/src/pages/interview-prep/OverviewTab.tsx +++ b/src/pages/interview-prep/OverviewTab.tsx @@ -1,626 +1,693 @@ import React from "react"; import { motion, AnimatePresence } from "framer-motion"; -const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } } }; -const staggerContainer = { hidden: {}, visible: { transition: { staggerChildren: 0.2 } } }; +const fadeIn = { + hidden: { opacity: 0, y: 20 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }, +}; +const staggerContainer = { + hidden: {}, + visible: { transition: { staggerChildren: 0.2 } }, +}; interface OverviewTabProps { - toggleTips: (index: number) => void; - toggleQuestions: (index: number) => void; - showTips: { [key: number]: boolean }; - showQuestions: { [key: number]: boolean }; - setActiveTab: React.Dispatch>; + toggleTips: (index: number) => void; + toggleQuestions: (index: number) => void; + showTips: { [key: number]: boolean }; + showQuestions: { [key: number]: boolean }; + setActiveTab: React.Dispatch>; } const OverviewTab: React.FC = ({ - toggleTips = () => { }, - toggleQuestions = () => { }, - showTips = {}, - showQuestions = {}, - setActiveTab = () => { }, + toggleTips = () => {}, + toggleQuestions = () => {}, + showTips = {}, + showQuestions = {}, + setActiveTab = () => {}, }) => { - const stages = [ - { - step: "01", - title: "Resume Optimization", - subtitle: "Foundation Building Phase", - icon: "๐Ÿ“„", - description: - "Craft a compelling resume that showcases your achievements, aligns with job requirements, and passes ATS screening systems", - color: "from-blue-500 to-blue-600", - bgColor: "bg-blue-500", - duration: "Ongoing preparation", - difficulty: "Medium", - keyFocus: "Professional Presentation & ATS Optimization", - tips: [ - "Tailor resume for each specific role and company", - "Use action verbs and quantify achievements with metrics", - "Optimize for ATS with relevant keywords from job description", - "Keep format clean, consistent, and easy to scan", - "Include relevant projects, certifications, and technical skills", - ], - commonQuestions: [ - "Walk me through your resume", - "Tell me about this project on your resume", - "Why did you choose this career path?", - ], - }, - { - step: "02", - title: "Technical Assessment", - subtitle: "Core Competency Evaluation", - icon: "๐Ÿ’ป", - description: - "Deep dive into coding abilities, algorithmic thinking, system design knowledge, and technical problem-solving approach", - color: "from-green-500 to-green-600", - bgColor: "bg-green-500", - duration: "60-120 minutes", - difficulty: "Hard", - keyFocus: "Problem Solving & Code Quality", - tips: [ - "Practice coding on whiteboard/shared editor daily", - "Think out loud - explain your thought process clearly", - "Ask clarifying questions before jumping into code", - "Test your solution with edge cases and optimize", - "Know time/space complexity of your solutions", - ], - commonQuestions: [ - "Implement [data structure/algorithm]", - "Design a system for [specific use case]", - "Optimize this code for better performance", - ], - }, - { - step: "03", - title: "Behavioral Deep-Dive", - subtitle: "Leadership & Culture Assessment", - icon: "๐Ÿค", - description: - "Comprehensive evaluation of soft skills, leadership potential, conflict resolution abilities, and team collaboration style", - color: "from-purple-500 to-purple-600", - bgColor: "bg-purple-500", - duration: "45-75 minutes", - difficulty: "Medium", - keyFocus: "Leadership & Collaboration", - tips: [ - "Master the STAR method (Situation, Task, Action, Result)", - "Prepare 5-7 detailed stories covering different competencies", - "Show growth mindset - discuss lessons learned from failures", - "Demonstrate impact with specific metrics and outcomes", - "Practice active listening and ask follow-up questions", - ], - commonQuestions: [ - "Tell me about a time you led a difficult project", - "Describe a conflict with a teammate and resolution", - "Share an example of when you failed and what you learned", - ], - }, - { - step: "04", - title: "Final Alignment", - subtitle: "Mutual Fit Confirmation", - icon: "๐ŸŽฏ", - description: - "Final evaluation covering compensation expectations, role clarity, team dynamics, and long-term career alignment", - color: "from-orange-500 to-red-500", - bgColor: "bg-orange-500", - duration: "30-60 minutes", - difficulty: "Medium", - keyFocus: "Mutual Fit & Expectations", - tips: [ - "Research industry salary benchmarks thoroughly", - "Prepare thoughtful questions about team and growth", - "Show genuine enthusiasm for the role and company", - "Discuss career goals and how role aligns with them", - "Be ready to negotiate professionally and respectfully", - ], - commonQuestions: [ - "What are your career goals for the next 2-3 years?", - "How do you handle work-life balance?", - "What questions do you have for us?", - ], - }, - ] - return ( - - -
-
-
- - Your Complete Interview Success Guide -
-

- What Our Interview Prep Section Covers -

-
+ const stages = [ + { + step: "01", + title: "Resume Optimization", + subtitle: "Foundation Building Phase", + icon: "๐Ÿ“„", + description: + "Craft a compelling resume that showcases your achievements, aligns with job requirements, and passes ATS screening systems", + color: "from-blue-500 to-blue-600", + bgColor: "bg-blue-500", + duration: "Ongoing preparation", + difficulty: "Medium", + keyFocus: "Professional Presentation & ATS Optimization", + tips: [ + "Tailor resume for each specific role and company", + "Use action verbs and quantify achievements with metrics", + "Optimize for ATS with relevant keywords from job description", + "Keep format clean, consistent, and easy to scan", + "Include relevant projects, certifications, and technical skills", + ], + commonQuestions: [ + "Walk me through your resume", + "Tell me about this project on your resume", + "Why did you choose this career path?", + ], + }, + { + step: "02", + title: "Technical Assessment", + subtitle: "Core Competency Evaluation", + icon: "๐Ÿ’ป", + description: + "Deep dive into coding abilities, algorithmic thinking, system design knowledge, and technical problem-solving approach", + color: "from-green-500 to-green-600", + bgColor: "bg-green-500", + duration: "60-120 minutes", + difficulty: "Hard", + keyFocus: "Problem Solving & Code Quality", + tips: [ + "Practice coding on whiteboard/shared editor daily", + "Think out loud - explain your thought process clearly", + "Ask clarifying questions before jumping into code", + "Test your solution with edge cases and optimize", + "Know time/space complexity of your solutions", + ], + commonQuestions: [ + "Implement [data structure/algorithm]", + "Design a system for [specific use case]", + "Optimize this code for better performance", + ], + }, + { + step: "03", + title: "Behavioral Deep-Dive", + subtitle: "Leadership & Culture Assessment", + icon: "๐Ÿค", + description: + "Comprehensive evaluation of soft skills, leadership potential, conflict resolution abilities, and team collaboration style", + color: "from-purple-500 to-purple-600", + bgColor: "bg-purple-500", + duration: "45-75 minutes", + difficulty: "Medium", + keyFocus: "Leadership & Collaboration", + tips: [ + "Master the STAR method (Situation, Task, Action, Result)", + "Prepare 5-7 detailed stories covering different competencies", + "Show growth mindset - discuss lessons learned from failures", + "Demonstrate impact with specific metrics and outcomes", + "Practice active listening and ask follow-up questions", + ], + commonQuestions: [ + "Tell me about a time you led a difficult project", + "Describe a conflict with a teammate and resolution", + "Share an example of when you failed and what you learned", + ], + }, + { + step: "04", + title: "Final Alignment", + subtitle: "Mutual Fit Confirmation", + icon: "๐ŸŽฏ", + description: + "Final evaluation covering compensation expectations, role clarity, team dynamics, and long-term career alignment", + color: "from-orange-500 to-red-500", + bgColor: "bg-orange-500", + duration: "30-60 minutes", + difficulty: "Medium", + keyFocus: "Mutual Fit & Expectations", + tips: [ + "Research industry salary benchmarks thoroughly", + "Prepare thoughtful questions about team and growth", + "Show genuine enthusiasm for the role and company", + "Discuss career goals and how role aligns with them", + "Be ready to negotiate professionally and respectfully", + ], + commonQuestions: [ + "What are your career goals for the next 2-3 years?", + "How do you handle work-life balance?", + "What questions do you have for us?", + ], + }, + ]; + return ( + + +
+
+
+ + Your Complete Interview Success Guide +
+

+ What Our Interview Prep Section Covers +

+
-
-
-

- - ๐Ÿ“š - - Comprehensive Coverage -

-
    -
  • - - - Technical Mastery: 500+ coding problems, algorithms, data structures, and - system design challenges - -
    • -
  • - - - Behavioral Excellence: STAR method framework, leadership scenarios, and - communication skills - -
    • -
  • - - - Company Intelligence: FAANG-specific strategies, culture insights, and - insider tips - -
    • -
  • - - - Mock Practice: Real-time simulations with feedback and performance tracking - -
    • -
-
+
+
+

+ + ๐Ÿ“š + + Comprehensive Coverage +

+
    +
  • + + + Technical Mastery: 500+ coding problems, + algorithms, data structures, and system design challenges + +
    • +
  • + + + Behavioral Excellence: STAR method + framework, leadership scenarios, and communication skills + +
    • +
  • + + + Company Intelligence: FAANG-specific + strategies, culture insights, and insider tips + +
    • +
  • + + + Mock Practice: Real-time simulations with + feedback and performance tracking + +
    • +
+
-
-

- - โšก - - Why Both Technical & Behavioral Matter -

-
-
-

- Technical Skills (60% Weight) -

-

- Prove you can solve complex problems, write clean code, and design scalable systems. - Technical competence is your entry ticket. -

-
-
-

- Behavioral Skills (40% Weight) -

-

- Demonstrate leadership, collaboration, and cultural fit. Many technically strong candidates - fail here due to poor communication or team dynamics. -

-
-
-
-

- ๐Ÿ’ก Key Insight: Top companies hire for both technical excellence AND cultural - alignment. Neglecting either aspect significantly reduces your success rate. -

-
-
-
+
+

+ + โšก + + Why Both Technical & Behavioral Matter +

+
+
+

+ Technical Skills (60% Weight) +

+

+ Prove you can solve complex problems, write clean code, and + design scalable systems. Technical competence is your entry + ticket. +

- - - -
-

Interview Process Journey

-

- Navigate each stage strategically with our comprehensive roadmap -

+
+

+ Behavioral Skills (40% Weight) +

+

+ Demonstrate leadership, collaboration, and cultural fit. + Many technically strong candidates fail here due to poor + communication or team dynamics. +

+
+
+

+ ๐Ÿ’ก Key Insight: Top companies hire for both + technical excellence AND cultural alignment. Neglecting either + aspect significantly reduces your success rate. +

+
+
+
+
+ -
- {/* Background pattern */} -
-
-
- - {/* Diagonal flowchart */} -
- {(stages || []).map((stage, index) => { - return ( - stage ? ( - {index < 3 && ( -
-
- -
- - - - - -
- )} - -
+ +
+

+ Interview Process Journey +

+

+ Navigate each stage strategically with our comprehensive roadmap +

+
- -
- - {stage.step} -
- - {stage.icon} - - +
+ {/* Background pattern */} +
+
+
- -
-
-
- -
-
-
-

- {stage.title} -

-

- {stage.subtitle} -

-
-
- - {stage.difficulty} - - - {stage.duration} - -
-
+ {/* Diagonal flowchart */} +
+ {(stages || []).map((stage, index) => { + return stage ? ( + + {index < 3 && ( +
+
+ +
+ + + + + +
+ )} -

- {stage.description} -

+
+ +
+ + + {stage.step} + +
+ + {stage.icon} + + -
-

- - Key Focus: {stage.keyFocus} -

-
+ +
+
+
-
- - - {showTips[index] && ( - -
    - {stage.tips?.map((tip, tipIndex) => ( - - - {tip} - - ))} -
- - )} - -
+
+
+
+

+ {stage.title} +

+

+ {stage.subtitle} +

+
+
+ + {stage.difficulty} + + + {stage.duration} + +
+
-
- - - {showQuestions[index] && ( - -
- {stage.commonQuestions?.map((question, qIndex) => ( - -

"{question}"

- - ))} -
- - )} - -
-
- -
- - ) : null) - })} -
-
- +

+ {stage.description} +

- -
-

Preparation Strategy

-
-
-
-
-
- ๐Ÿง  -
-

Problem-Solving Mastery

-

- Build strong algorithmic thinking through consistent practice. Focus on understanding patterns - rather than memorizing solutions. -

+
+

+ + Key Focus: {stage.keyFocus} +

-
-
- ๐Ÿ’ฌ -
-

Communication Excellence

-

- Practice explaining complex concepts clearly. Develop your ability to think out loud and - collaborate effectively. -

+ +
+ + + {showTips[index] && ( + +
    + {stage.tips?.map((tip, tipIndex) => ( + + + + {tip} + + + ))} +
+ + )} +
-
-
- ๐ŸŽญ -
-

Behavioral Readiness

-

- Prepare compelling stories using the STAR method. Showcase leadership, growth mindset, and - cultural alignment. -

+ +
+ + + {showQuestions[index] && ( + +
+ {stage.commonQuestions?.map( + (question, qIndex) => ( + +

+ "{question}" +

+ + ), + )} +
+ + )} +
-
+
+ +
+ + ) : null; + })} +
+
+ -
-
- ๐Ÿ’ก - Pro Tip: Balance Your Preparation -
-

- Allocate 60% of your time to technical skills, 30% to behavioral preparation, and 10% to company - research. This balance ensures you're well-rounded and confident in all interview stages. -

-
-
- + +
+

+ Preparation Strategy +

+
+
+
+
+
+ ๐Ÿง  +
+

+ Problem-Solving Mastery +

+

+ Build strong algorithmic thinking through consistent practice. + Focus on understanding patterns rather than memorizing + solutions. +

+
+
+
+ ๐Ÿ’ฌ +
+

+ Communication Excellence +

+

+ Practice explaining complex concepts clearly. Develop your + ability to think out loud and collaborate effectively. +

+
+
+
+ ๐ŸŽญ +
+

+ Behavioral Readiness +

+

+ Prepare compelling stories using the STAR method. Showcase + leadership, growth mindset, and cultural alignment. +

+
+
- -

- Quick Access to Resources -

-
- {[ - { - id: "technical", - title: "Technical Prep", - icon: "๐Ÿ’ป", - description: "Coding challenges, algorithms, system design", - color: "from-blue-500 to-blue-600", - items: ["500+ Problems", "System Design", "Code Review"], - }, - { - id: "behavioral", - title: "Behavioral Prep", - icon: "๐Ÿค", - description: "STAR method, leadership stories, soft skills", - color: "from-green-500 to-green-600", - items: ["STAR Framework", "Leadership", "Communication"], - }, - { - id: "companies", - title: "Company Guides", - icon: "๐Ÿข", - description: "Company-specific tips and strategies", - color: "from-purple-500 to-purple-600", - items: ["FAANG Tips", "Culture Fit", "Specific Questions"], - }, - { - id: "practice", - title: "Mock Practice", - icon: "๐ŸŽฏ", - description: "Simulate real interview conditions", - color: "from-orange-500 to-orange-600", - items: ["Live Practice", "Feedback", "Time Management"], - }, - ]?.map((section) => ( - section ? ( setActiveTab(section.id as any)} - whileHover={{ y: -5 }} - > -
-
{section.icon}
-

{section.title}

-
-
-

{section.description}

-
- {section.items?.map((item, i) => ( - item ? (
- - {item} -
) : null - ))} -
-
- - Explore Section โ†’ - -
-
- ) : null - ))} -
- - {/* Quick Stats */} - +
+ ๐Ÿ’ก + Pro Tip: Balance Your Preparation +
+

+ Allocate 60% of your time to technical skills, 30% to behavioral + preparation, and 10% to company research. This balance ensures + you're well-rounded and confident in all interview stages. +

+
+
+ + + +

+ Quick Access to Resources +

+
+ {[ + { + id: "technical", + title: "Technical Prep", + icon: "๐Ÿ’ป", + description: "Coding challenges, algorithms, system design", + color: "from-blue-500 to-blue-600", + items: ["500+ Problems", "System Design", "Code Review"], + }, + { + id: "behavioral", + title: "Behavioral Prep", + icon: "๐Ÿค", + description: "STAR method, leadership stories, soft skills", + color: "from-green-500 to-green-600", + items: ["STAR Framework", "Leadership", "Communication"], + }, + { + id: "companies", + title: "Company Guides", + icon: "๐Ÿข", + description: "Company-specific tips and strategies", + color: "from-purple-500 to-purple-600", + items: ["FAANG Tips", "Culture Fit", "Specific Questions"], + }, + { + id: "practice", + title: "Mock Practice", + icon: "๐ŸŽฏ", + description: "Simulate real interview conditions", + color: "from-orange-500 to-orange-600", + items: ["Live Practice", "Feedback", "Time Management"], + }, + ]?.map((section) => + section ? ( + -
-
-
500+
-
Practice Questions
-
-
-
50+
-
System Design Topics
-
-
-
20+
-
Company Guides
-
-
-
95%
-
Success Rate
-
+ onClick={() => setActiveTab(section.id as any)} + whileHover={{ y: -5 }} + > +
+
{section.icon}
+

{section.title}

+
+
+

+ {section.description} +

+
+ {section.items?.map((item, i) => + item ? ( +
+ + {item} +
+ ) : null, + )} +
+
+ + Explore Section โ†’ + +
- - - ); + + ) : null, + )} +
+ + {/* Quick Stats */} + +
+
+
500+
+
Practice Questions
+
+
+
50+
+
System Design Topics
+
+
+
20+
+
Company Guides
+
+
+
95%
+
Success Rate
+
+
+ + + ); }; export default OverviewTab; diff --git a/src/pages/interview-prep/PracticeTab.tsx b/src/pages/interview-prep/PracticeTab.tsx index c0bafca0..b45a2680 100644 --- a/src/pages/interview-prep/PracticeTab.tsx +++ b/src/pages/interview-prep/PracticeTab.tsx @@ -1,933 +1,1081 @@ -import React from "react" -import { useState, useEffect } from "react" -import { motion, AnimatePresence } from "framer-motion" +import React from "react"; +import { useState, useEffect } from "react"; +import { motion, AnimatePresence } from "framer-motion"; interface MockQuestion { - id: string - type: "technical" | "behavioral" | "system-design" | (string & {}) - question: string - difficulty: "Easy" | "Medium" | "Hard" | (string & {}) - framework?: string - hints: string[] - estimatedTime: number - category?: string - links?: { - title: string - url: string - type: "documentation" | "tutorial" | "example" | "reference" | "tool" | (string & {}) - }[] + id: string; + type: "technical" | "behavioral" | "system-design" | (string & {}); + question: string; + difficulty: "Easy" | "Medium" | "Hard" | (string & {}); + framework?: string; + hints: string[]; + estimatedTime: number; + category?: string; + links?: { + title: string; + url: string; + type: + | "documentation" + | "tutorial" + | "example" + | "reference" + | "tool" + | (string & {}); + }[]; } interface PracticeSession { - questionId: string - timeSpent: number - completed: boolean - startTime?: number + questionId: string; + timeSpent: number; + completed: boolean; + startTime?: number; } interface PracticeStats { - totalCompleted: number - averageTime: number - easyCompleted: number - mediumCompleted: number - hardCompleted: number - technicalCompleted: number - behavioralCompleted: number - systemDesignCompleted: number + totalCompleted: number; + averageTime: number; + easyCompleted: number; + mediumCompleted: number; + hardCompleted: number; + technicalCompleted: number; + behavioralCompleted: number; + systemDesignCompleted: number; } interface PracticeTabProps { - mockInterviewQuestions?: MockQuestion[] - onTabChange?: (tab: string) => void + mockInterviewQuestions?: MockQuestion[]; + onTabChange?: (tab: string) => void; } -const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } } } -const staggerContainer = { hidden: {}, visible: { transition: { staggerChildren: 0.1 } } } -const scaleIn = { hidden: { scale: 0.8, opacity: 0 }, visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } } } - -const PracticeTab: React.FC = ({ mockInterviewQuestions = [], onTabChange }) => { - const [selectedQuestion, setSelectedQuestion] = useState(null) - const [activeSession, setActiveSession] = useState(null) - const [timer, setTimer] = useState(0) - const [isTimerRunning, setIsTimerRunning] = useState(false) - const [completedQuestions, setCompletedQuestions] = useState>(new Set()) - const [practiceStats, setPracticeStats] = useState({ - totalCompleted: 0, - averageTime: 0, - easyCompleted: 0, - mediumCompleted: 0, - hardCompleted: 0, - technicalCompleted: 0, - behavioralCompleted: 0, - systemDesignCompleted: 0, - }) - const [filterType, setFilterType] = useState("all") - const [filterDifficulty, setFilterDifficulty] = useState("all") - const [showHints, setShowHints] = useState>(new Set()) - const [showResources, setShowResources] = useState>(new Set()) - const [showConfetti, setShowConfetti] = useState(false) - const [recentlyCompleted, setRecentlyCompleted] = useState(null) - - const allQuestions = [...mockInterviewQuestions] - - useEffect(() => { - let interval: NodeJS.Timeout - if (isTimerRunning && activeSession) { - interval = setInterval(() => { - setTimer((prev) => prev + 1) - }, 1000) - } - return () => { - if (interval) clearInterval(interval) - } - }, [isTimerRunning, activeSession]) - - useEffect(() => { - if (showConfetti) { - const timeout = setTimeout(() => setShowConfetti(false), 3000) - return () => clearTimeout(timeout) - } - }, [showConfetti]) - - const filteredQuestions = allQuestions.filter((q) => { - const typeMatch = filterType === "all" || q.type === filterType - const difficultyMatch = filterDifficulty === "all" || q.difficulty === filterDifficulty - return typeMatch && difficultyMatch - }) - - const startPractice = (question: MockQuestion) => { - const session: PracticeSession = { - questionId: question.id, - timeSpent: 0, - completed: false, - startTime: Date.now(), - } - setActiveSession(session) - setTimer(0) - setIsTimerRunning(true) - setSelectedQuestion(question.id) - } +const fadeIn = { + hidden: { opacity: 0, y: 20 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }, +}; +const staggerContainer = { + hidden: {}, + visible: { transition: { staggerChildren: 0.1 } }, +}; +const scaleIn = { + hidden: { scale: 0.8, opacity: 0 }, + visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } }, +}; - const completePractice = () => { - if (activeSession) { - const timeSpent = Math.floor(timer / 60) - setCompletedQuestions((prev) => new Set([...prev, activeSession.questionId])) - setRecentlyCompleted(activeSession.questionId) - setShowConfetti(true) - - const question = allQuestions.find((q) => q.id === activeSession.questionId) - if (question) { - setPracticeStats((prev) => ({ - ...prev, - totalCompleted: prev.totalCompleted + 1, - averageTime: Math.round((prev.averageTime * prev.totalCompleted + timeSpent) / (prev.totalCompleted + 1)), - })) - } - } - setIsTimerRunning(false) - setActiveSession(null) - setSelectedQuestion(null) - setTimer(0) - - setTimeout(() => setRecentlyCompleted(null), 2000) - } +const PracticeTab: React.FC = ({ + mockInterviewQuestions = [], + onTabChange, +}) => { + const [selectedQuestion, setSelectedQuestion] = useState(null); + const [activeSession, setActiveSession] = useState( + null, + ); + const [timer, setTimer] = useState(0); + const [isTimerRunning, setIsTimerRunning] = useState(false); + const [completedQuestions, setCompletedQuestions] = useState>( + new Set(), + ); + const [practiceStats, setPracticeStats] = useState({ + totalCompleted: 0, + averageTime: 0, + easyCompleted: 0, + mediumCompleted: 0, + hardCompleted: 0, + technicalCompleted: 0, + behavioralCompleted: 0, + systemDesignCompleted: 0, + }); + const [filterType, setFilterType] = useState("all"); + const [filterDifficulty, setFilterDifficulty] = useState("all"); + const [showHints, setShowHints] = useState>(new Set()); + const [showResources, setShowResources] = useState>(new Set()); + const [showConfetti, setShowConfetti] = useState(false); + const [recentlyCompleted, setRecentlyCompleted] = useState( + null, + ); - const formatTime = (seconds: number) => { - const mins = Math.floor(seconds / 60) - const secs = seconds % 60 - return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}` - } + const allQuestions = [...mockInterviewQuestions]; - const getDifficultyColor = (difficulty: string) => { - switch (difficulty) { - case "Easy": - return "bg-gradient-to-r from-emerald-100 to-green-100 text-emerald-800 dark:from-emerald-900/30 dark:to-green-900/30 dark:text-emerald-200 border border-emerald-200 dark:border-emerald-700" - case "Medium": - return "bg-gradient-to-r from-amber-100 to-yellow-100 text-amber-800 dark:from-amber-900/30 dark:to-yellow-900/30 dark:text-amber-200 border border-amber-200 dark:border-amber-700" - case "Hard": - return "bg-gradient-to-r from-rose-100 to-red-100 text-rose-800 dark:from-rose-900/30 dark:to-red-900/30 dark:text-rose-200 border border-rose-200 dark:border-rose-700" - default: - return "bg-gradient-to-r from-gray-100 to-slate-100 text-gray-800 dark:from-gray-700 dark:to-slate-700 dark:text-gray-200 border border-gray-200 dark:border-gray-600" - } + useEffect(() => { + let interval: NodeJS.Timeout; + if (isTimerRunning && activeSession) { + interval = setInterval(() => { + setTimer((prev) => prev + 1); + }, 1000); } + return () => { + if (interval) clearInterval(interval); + }; + }, [isTimerRunning, activeSession]); - const getTypeColor = (type: string) => { - switch (type) { - case "technical": - return "bg-gradient-to-r from-blue-100 to-cyan-100 text-blue-800 dark:from-blue-900/30 dark:to-cyan-900/30 dark:text-blue-200 border border-blue-200 dark:border-blue-700" - case "behavioral": - return "bg-gradient-to-r from-green-100 to-emerald-100 text-green-800 dark:from-green-900/30 dark:to-emerald-900/30 dark:text-green-200 border border-green-200 dark:border-green-700" - case "system-design": - return "bg-gradient-to-r from-purple-100 to-violet-100 text-purple-800 dark:from-purple-900/30 dark:to-violet-900/30 dark:text-purple-200 border border-purple-200 dark:border-purple-700" - default: - return "bg-gradient-to-r from-gray-100 to-slate-100 text-gray-800 dark:from-gray-700 dark:to-slate-700 dark:text-gray-200 border border-gray-200 dark:border-gray-600" - } + useEffect(() => { + if (showConfetti) { + const timeout = setTimeout(() => setShowConfetti(false), 3000); + return () => clearTimeout(timeout); } + }, [showConfetti]); + + const filteredQuestions = allQuestions.filter((q) => { + const typeMatch = filterType === "all" || q.type === filterType; + const difficultyMatch = + filterDifficulty === "all" || q.difficulty === filterDifficulty; + return typeMatch && difficultyMatch; + }); + + const startPractice = (question: MockQuestion) => { + const session: PracticeSession = { + questionId: question.id, + timeSpent: 0, + completed: false, + startTime: Date.now(), + }; + setActiveSession(session); + setTimer(0); + setIsTimerRunning(true); + setSelectedQuestion(question.id); + }; - const toggleHints = (questionId: string) => { - setShowHints((prev) => { - const newSet = new Set(prev) - if (newSet.has(questionId)) { - newSet.delete(questionId) - } else { - newSet.add(questionId) - } - return newSet - }) + const completePractice = () => { + if (activeSession) { + const timeSpent = Math.floor(timer / 60); + setCompletedQuestions( + (prev) => new Set([...prev, activeSession.questionId]), + ); + setRecentlyCompleted(activeSession.questionId); + setShowConfetti(true); + + const question = allQuestions.find( + (q) => q.id === activeSession.questionId, + ); + if (question) { + setPracticeStats((prev) => ({ + ...prev, + totalCompleted: prev.totalCompleted + 1, + averageTime: Math.round( + (prev.averageTime * prev.totalCompleted + timeSpent) / + (prev.totalCompleted + 1), + ), + })); + } } + setIsTimerRunning(false); + setActiveSession(null); + setSelectedQuestion(null); + setTimer(0); + + setTimeout(() => setRecentlyCompleted(null), 2000); + }; + + const formatTime = (seconds: number) => { + const mins = Math.floor(seconds / 60); + const secs = seconds % 60; + return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`; + }; - const toggleResources = (questionId: string) => { - setShowResources((prev) => { - const newSet = new Set(prev) - if (newSet.has(questionId)) { - newSet.delete(questionId) - } else { - newSet.add(questionId) - } - return newSet - }) + const getDifficultyColor = (difficulty: string) => { + switch (difficulty) { + case "Easy": + return "bg-gradient-to-r from-emerald-100 to-green-100 text-emerald-800 dark:from-emerald-900/30 dark:to-green-900/30 dark:text-emerald-200 border border-emerald-200 dark:border-emerald-700"; + case "Medium": + return "bg-gradient-to-r from-amber-100 to-yellow-100 text-amber-800 dark:from-amber-900/30 dark:to-yellow-900/30 dark:text-amber-200 border border-amber-200 dark:border-amber-700"; + case "Hard": + return "bg-gradient-to-r from-rose-100 to-red-100 text-rose-800 dark:from-rose-900/30 dark:to-red-900/30 dark:text-rose-200 border border-rose-200 dark:border-rose-700"; + default: + return "bg-gradient-to-r from-gray-100 to-slate-100 text-gray-800 dark:from-gray-700 dark:to-slate-700 dark:text-gray-200 border border-gray-200 dark:border-gray-600"; } + }; - const handleTabNavigation = (tab: string) => { - if (onTabChange) { - onTabChange(tab) - } + const getTypeColor = (type: string) => { + switch (type) { + case "technical": + return "bg-gradient-to-r from-blue-100 to-cyan-100 text-blue-800 dark:from-blue-900/30 dark:to-cyan-900/30 dark:text-blue-200 border border-blue-200 dark:border-blue-700"; + case "behavioral": + return "bg-gradient-to-r from-green-100 to-emerald-100 text-green-800 dark:from-green-900/30 dark:to-emerald-900/30 dark:text-green-200 border border-green-200 dark:border-green-700"; + case "system-design": + return "bg-gradient-to-r from-purple-100 to-violet-100 text-purple-800 dark:from-purple-900/30 dark:to-violet-900/30 dark:text-purple-200 border border-purple-200 dark:border-purple-700"; + default: + return "bg-gradient-to-r from-gray-100 to-slate-100 text-gray-800 dark:from-gray-700 dark:to-slate-700 dark:text-gray-200 border border-gray-200 dark:border-gray-600"; } + }; - const progressPercentage = allQuestions.length > 0 ? (practiceStats.totalCompleted / allQuestions.length) * 100 : 0 + const toggleHints = (questionId: string) => { + setShowHints((prev) => { + const newSet = new Set(prev); + if (newSet.has(questionId)) { + newSet.delete(questionId); + } else { + newSet.add(questionId); + } + return newSet; + }); + }; - return ( - - - {showConfetti && ( - -
๐ŸŽ‰
-
- - )} - + const toggleResources = (questionId: string) => { + setShowResources((prev) => { + const newSet = new Set(prev); + if (newSet.has(questionId)) { + newSet.delete(questionId); + } else { + newSet.add(questionId); + } + return newSet; + }); + }; - -
-
- - - Interactive Practice Sessions - - - Mock Interview Practice - -

- Simulate real interview scenarios with our interactive practice sessions. Track your progress, time your - responses, and get instant feedback to improve your interview performance. -

-
+ const handleTabNavigation = (tab: string) => { + if (onTabChange) { + onTabChange(tab); + } + }; -
- handleTabNavigation("technical")} - whileHover={{ scale: 1.03, y: -5 }} - whileTap={{ scale: 0.98 }} - > -
-
- - ๐Ÿ’ป - -

Technical Deep Dive

-

- Explore comprehensive technical resources, coding patterns, and algorithm practice. -

-
- Go to Technical Tab - - โ†’ - -
-
- + const progressPercentage = + allQuestions.length > 0 + ? (practiceStats.totalCompleted / allQuestions.length) * 100 + : 0; - handleTabNavigation("behavioral")} - whileHover={{ scale: 1.03, y: -5 }} - whileTap={{ scale: 0.98 }} - > -
-
- - ๐Ÿ—ฃ๏ธ - -

Behavioral Mastery

-

- Master the STAR method and practice storytelling for behavioral interviews. -

-
- Go to Behavioral Tab - - โ†’ - -
-
- + return ( + + + {showConfetti && ( + +
๐ŸŽ‰
+
+ + )} + - handleTabNavigation("companies")} - whileHover={{ scale: 1.03, y: -5 }} - whileTap={{ scale: 0.98 }} - > -
-
- - ๐Ÿข - -

Company Research

-

- Research specific companies, their interview processes, and preparation strategies. -

-
- Go to Companies Tab - - โ†’ - -
-
- -
-
+ +
+
+ + + Interactive Practice Sessions + + Mock Interview Practice + +

+ Simulate real interview scenarios with our interactive practice + sessions. Track your progress, time your responses, and get + instant feedback to improve your interview performance. +

+
- +
+ handleTabNavigation("technical")} + whileHover={{ scale: 1.03, y: -5 }} + whileTap={{ scale: 0.98 }} + > +
+
-
-
- - {practiceStats.totalCompleted} - -
Completed
-
+ ๐Ÿ’ป +

+ Technical Deep Dive +

+

+ Explore comprehensive technical resources, coding patterns, + and algorithm practice. +

+
+ Go to Technical Tab + + โ†’ + +
+
+ + handleTabNavigation("behavioral")} + whileHover={{ scale: 1.03, y: -5 }} + whileTap={{ scale: 0.98 }} + > +
+
-
-
-
- {practiceStats.averageTime}m -
-
Avg Time
-
+ ๐Ÿ—ฃ๏ธ +

+ Behavioral Mastery +

+

+ Master the STAR method and practice storytelling for + behavioral interviews. +

+
+ Go to Behavioral Tab + + โ†’ + +
+
+ + handleTabNavigation("companies")} + whileHover={{ scale: 1.03, y: -5 }} + whileTap={{ scale: 0.98 }} + > +
+
-
-
-
- {Math.round(progressPercentage)}% -
-
Progress
-
- -
-
+ ๐Ÿข +

+ Company Research +

+

+ Research specific companies, their interview processes, and + preparation strategies. +

+
+ Go to Companies Tab + + โ†’ + +
+
+ +
+
+ - -
-
- - {isTimerRunning ? formatTime(timer) : "00:00"} - -
Current
- {isTimerRunning && ( - - )} -
- + + +
+
+ + {practiceStats.totalCompleted} + +
+ Completed +
+
+ + + +
+
+
+ {practiceStats.averageTime}m +
+
+ Avg Time +
+
+ + + +
+
+
+ {Math.round(progressPercentage)}% +
+
+ Progress +
+
+ +
+
+ + + +
+
+ + {isTimerRunning ? formatTime(timer) : "00:00"} +
+ Current +
+ {isTimerRunning && ( + + )} +
+ + + +
+
+ + setFilterType(e.target.value)} + className="px-6 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-500/50 focus:border-blue-500 transition-all shadow-lg font-medium" + whileFocus={{ scale: 1.02 }} + > + + + + + +
+
+ + setFilterDifficulty(e.target.value)} + className="px-6 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-500/50 focus:border-blue-500 transition-all shadow-lg font-medium" + whileFocus={{ scale: 1.02 }} + > + + + + + +
+ + + {filteredQuestions.length} + {" "} + of{" "} + + {allQuestions.length} + {" "} + questions + +
+ + +
+ + {filteredQuestions.map((question, index) => ( -
-
- - setFilterType(e.target.value)} - className="px-6 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-500/50 focus:border-blue-500 transition-all shadow-lg font-medium" - whileFocus={{ scale: 1.02 }} - > - - - - - -
-
- - setFilterDifficulty(e.target.value)} - className="px-6 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-500/50 focus:border-blue-500 transition-all shadow-lg font-medium" - whileFocus={{ scale: 1.02 }} + + {recentlyCompleted === question.id && ( + + + โœจ + + + )} + + +
+
+
+ + {question.type === "system-design" + ? "System Design" + : question.type.charAt(0).toUpperCase() + + question.type.slice(1)} + + + {completedQuestions.has(question.id) && ( + - - - - - -
+ + โœ“ + + + Completed + + + )} + +
+
+ + {question.difficulty} + - {filteredQuestions.length} of{" "} - {allQuestions.length} questions + ~{question.estimatedTime}min +
- -
+

+ {question.question} +

+ + {question.framework && ( + +
+ + ๐Ÿ’ก + +

+ Framework: {question.framework} +

+
+ + )} + + {question.category && ( +
+ ๐Ÿ“‚ + + {question.category} + +
+ )} +
+ +
+ toggleHints(question.id)} + className="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors group bg-gray-50 dark:bg-gray-700/50 px-4 py-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-600/50 w-full justify-between shadow-lg border border-gray-200 dark:border-gray-600" + whileHover={{ scale: 1.02 }} + whileTap={{ scale: 0.98 }} + > +
+ + {showHints.has(question.id) ? "๐Ÿ”ฝ" : "โ–ถ๏ธ"} + + + {showHints.has(question.id) ? "Hide Hints" : "Show Hints"} + +
+ + {question.hints.length} + + + - {filteredQuestions.map((question, index) => ( + {showHints.has(question.id) && ( + +

+ + ๐Ÿ’ก + + + Helpful Hints: + +

+
    + {question.hints.map((hint, i) => ( + + + {i + 1} + + + {hint} + + + ))} +
+ + )} + + + {question.links && question.links.length > 0 && ( +
+ toggleResources(question.id)} + className="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors group bg-gradient-to-r from-indigo-50 via-purple-50 to-pink-50 dark:from-indigo-900/30 dark:via-purple-900/30 dark:to-pink-900/30 px-4 py-3 rounded-xl hover:from-indigo-100 hover:via-purple-100 hover:to-pink-100 dark:hover:from-indigo-800/40 dark:hover:via-purple-800/40 dark:hover:to-pink-800/40 w-full justify-between shadow-lg border-2 border-indigo-200/50 dark:border-indigo-700/50" + whileHover={{ scale: 1.02 }} + whileTap={{ scale: 0.98 }} + > +
+ + {showResources.has(question.id) ? "๐Ÿ”ฝ" : "โ–ถ๏ธ"} + + + {showResources.has(question.id) + ? "Hide Resources" + : "Show Resources"} + +
+ + {question.links.length} + + + + + {showResources.has(question.id) && ( - - {recentlyCompleted === question.id && ( - - - โœจ - - - )} - - -
-
-
- - {question.type === "system-design" - ? "System Design" - : question.type.charAt(0).toUpperCase() + question.type.slice(1)} - - - {completedQuestions.has(question.id) && ( - - - โœ“ - - Completed - - )} - -
-
- - {question.difficulty} - - - ~{question.estimatedTime}min - -
-
- -

- {question.question} -

- - {question.framework && ( - -
- - ๐Ÿ’ก - -

- Framework: {question.framework} -

-
- - )} - - {question.category && ( -
- ๐Ÿ“‚ - - {question.category} - -
- )} -
- -
- toggleHints(question.id)} - className="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors group bg-gray-50 dark:bg-gray-700/50 px-4 py-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-600/50 w-full justify-between shadow-lg border border-gray-200 dark:border-gray-600" - whileHover={{ scale: 1.02 }} - whileTap={{ scale: 0.98 }} +

+ + ๐Ÿ”— + + + Helpful Resources: + +

+
+ {question.links.map((link, i) => { + const getLinkTypeIcon = (type: string) => { + switch (type) { + case "documentation": + return "๐Ÿ“š"; + case "tutorial": + return "๐ŸŽ“"; + case "example": + return "๐Ÿ’ก"; + case "reference": + return "๐Ÿ“–"; + case "tool": + return "๐Ÿ› ๏ธ"; + default: + return "๐Ÿ”—"; + } + }; + + const getLinkTypeColor = (type: string) => { + switch (type) { + case "documentation": + return "from-blue-100 to-cyan-100 dark:from-blue-900/40 dark:to-cyan-900/40 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-700"; + case "tutorial": + return "from-green-100 to-emerald-100 dark:from-green-900/40 dark:to-emerald-900/40 text-green-700 dark:text-green-300 border-green-200 dark:border-green-700"; + case "example": + return "from-yellow-100 to-amber-100 dark:from-yellow-900/40 dark:to-amber-900/40 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-700"; + case "reference": + return "from-purple-100 to-violet-100 dark:from-purple-900/40 dark:to-violet-900/40 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-700"; + case "tool": + return "from-orange-100 to-red-100 dark:from-orange-900/40 dark:to-red-900/40 text-orange-700 dark:text-orange-300 border-orange-200 dark:border-orange-700"; + default: + return "from-gray-100 to-slate-100 dark:from-gray-700 dark:to-slate-700 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-600"; + } + }; + + return ( + -
- - {showHints.has(question.id) ? "๐Ÿ”ฝ" : "โ–ถ๏ธ"} - - {showHints.has(question.id) ? "Hide Hints" : "Show Hints"} + + {getLinkTypeIcon(link.type)} + +
+
+ {link.title}
- - {question.hints.length} - - - - - {showHints.has(question.id) && ( - -

- - ๐Ÿ’ก - - Helpful Hints: -

-
    - {question.hints.map((hint, i) => ( - - - {i + 1} - - {hint} - - ))} -
- - )} - - - {question.links && question.links.length > 0 && ( -
- toggleResources(question.id)} - className="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors group bg-gradient-to-r from-indigo-50 via-purple-50 to-pink-50 dark:from-indigo-900/30 dark:via-purple-900/30 dark:to-pink-900/30 px-4 py-3 rounded-xl hover:from-indigo-100 hover:via-purple-100 hover:to-pink-100 dark:hover:from-indigo-800/40 dark:hover:via-purple-800/40 dark:hover:to-pink-800/40 w-full justify-between shadow-lg border-2 border-indigo-200/50 dark:border-indigo-700/50" - whileHover={{ scale: 1.02 }} - whileTap={{ scale: 0.98 }} - > -
- - {showResources.has(question.id) ? "๐Ÿ”ฝ" : "โ–ถ๏ธ"} - - - {showResources.has(question.id) ? "Hide Resources" : "Show Resources"} - -
- - {question.links.length} - - - - - {showResources.has(question.id) && ( - -

- - ๐Ÿ”— - - Helpful Resources: -

-
- {question.links.map((link, i) => { - const getLinkTypeIcon = (type: string) => { - switch (type) { - case "documentation": - return "๐Ÿ“š" - case "tutorial": - return "๐ŸŽ“" - case "example": - return "๐Ÿ’ก" - case "reference": - return "๐Ÿ“–" - case "tool": - return "๐Ÿ› ๏ธ" - default: - return "๐Ÿ”—" - } - } - - const getLinkTypeColor = (type: string) => { - switch (type) { - case "documentation": - return "from-blue-100 to-cyan-100 dark:from-blue-900/40 dark:to-cyan-900/40 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-700" - case "tutorial": - return "from-green-100 to-emerald-100 dark:from-green-900/40 dark:to-emerald-900/40 text-green-700 dark:text-green-300 border-green-200 dark:border-green-700" - case "example": - return "from-yellow-100 to-amber-100 dark:from-yellow-900/40 dark:to-amber-900/40 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-700" - case "reference": - return "from-purple-100 to-violet-100 dark:from-purple-900/40 dark:to-violet-900/40 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-700" - case "tool": - return "from-orange-100 to-red-100 dark:from-orange-900/40 dark:to-red-900/40 text-orange-700 dark:text-orange-300 border-orange-200 dark:border-orange-700" - default: - return "from-gray-100 to-slate-100 dark:from-gray-700 dark:to-slate-700 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-600" - } - } - - return ( - - - {getLinkTypeIcon(link.type)} - -
-
- {link.title} -
-
- {link.type.replace("-", " ")} -
-
- - โ†’ - - - ) - })} -
- - )} - +
+ {link.type.replace("-", " ")}
- )} -
- -
- - {activeSession?.questionId === question.id ? ( - -
-
- - - ๐ŸŽฏ - - Session Active - - - {formatTime(timer)} - -
-
- - - โœ“ - - Complete Practice - - - ) : ( - startPractice(question)} - disabled={!!activeSession} - className={`w-full py-4 rounded-xl transition-all font-black flex items-center justify-center space-x-3 shadow-2xl border-2 ${completedQuestions.has(question.id) - ? "bg-gradient-to-r from-gray-200 to-slate-200 dark:from-gray-600 dark:to-slate-600 text-gray-600 dark:text-gray-300 cursor-default border-gray-300 dark:border-gray-500" - : activeSession - ? "bg-gradient-to-r from-gray-300 to-slate-300 dark:from-gray-700 dark:to-slate-700 text-gray-500 dark:text-gray-400 cursor-not-allowed border-gray-400 dark:border-gray-600" - : "bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 text-white hover:from-blue-700 hover:via-indigo-700 hover:to-purple-700 hover:shadow-blue-500/25 border-blue-500/20" - }`} - whileHover={!completedQuestions.has(question.id) && !activeSession ? { scale: 1.02, y: -2 } : {}} - whileTap={!completedQuestions.has(question.id) && !activeSession ? { scale: 0.98 } : {}} - initial={{ opacity: 0, y: 20 }} - animate={{ opacity: 1, y: 0 }} - exit={{ opacity: 0, y: -20 }} - > - {completedQuestions.has(question.id) ? ( - <> - - โœ“ - - Completed - - ) : ( - <> - - ๐Ÿš€ - - Start Practice - - )} - - )} - -
+
+ + โ†’ + + + ); + })} +
- ))} + )} + +
+ )} +
+ +
+ + {activeSession?.questionId === question.id ? ( + +
+
+ + + ๐ŸŽฏ + + + Session Active + + + + {formatTime(timer)} + +
+
+ + + โœ“ + + + Complete Practice + + + + ) : ( + startPractice(question)} + disabled={!!activeSession} + className={`w-full py-4 rounded-xl transition-all font-black flex items-center justify-center space-x-3 shadow-2xl border-2 ${ + completedQuestions.has(question.id) + ? "bg-gradient-to-r from-gray-200 to-slate-200 dark:from-gray-600 dark:to-slate-600 text-gray-600 dark:text-gray-300 cursor-default border-gray-300 dark:border-gray-500" + : activeSession + ? "bg-gradient-to-r from-gray-300 to-slate-300 dark:from-gray-700 dark:to-slate-700 text-gray-500 dark:text-gray-400 cursor-not-allowed border-gray-400 dark:border-gray-600" + : "bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 text-white hover:from-blue-700 hover:via-indigo-700 hover:to-purple-700 hover:shadow-blue-500/25 border-blue-500/20" + }`} + whileHover={ + !completedQuestions.has(question.id) && !activeSession + ? { scale: 1.02, y: -2 } + : {} + } + whileTap={ + !completedQuestions.has(question.id) && !activeSession + ? { scale: 0.98 } + : {} + } + initial={{ opacity: 0, y: 20 }} + animate={{ opacity: 1, y: 0 }} + exit={{ opacity: 0, y: -20 }} + > + {completedQuestions.has(question.id) ? ( + <> + + โœ“ + + + Completed + + + ) : ( + <> + + ๐Ÿš€ + + + Start Practice + + + )} + + )} -
+
+ + ))} + +
+ + + ๐ŸŽฏ Practice Features & Tools + +
+ {[ + { + icon: "โฑ๏ธ", + title: "Live Timer", + desc: "Real-time countdown with session tracking to simulate interview pressure", + color: "blue", + }, + { + icon: "๐Ÿ“Š", + title: "Progress Analytics", + desc: "Track completion rates and performance trends over time", + color: "green", + }, + { + icon: "๐ŸŽฏ", + title: "Smart Filtering", + desc: "Filter by type, difficulty, and completion status for focused practice", + color: "purple", + }, + { + icon: "๐Ÿ’ก", + title: "Guided Hints", + desc: "STAR method templates and solution frameworks for better answers", + color: "orange", + }, + ].map((feature, index) => ( - - ๐ŸŽฏ Practice Features & Tools - -
- {[ - { - icon: "โฑ๏ธ", - title: "Live Timer", - desc: "Real-time countdown with session tracking to simulate interview pressure", - color: "blue", - }, - { - icon: "๐Ÿ“Š", - title: "Progress Analytics", - desc: "Track completion rates and performance trends over time", - color: "green", - }, - { - icon: "๐ŸŽฏ", - title: "Smart Filtering", - desc: "Filter by type, difficulty, and completion status for focused practice", - color: "purple", - }, - { - icon: "๐Ÿ’ก", - title: "Guided Hints", - desc: "STAR method templates and solution frameworks for better answers", - color: "orange", - }, - ].map((feature, index) => ( - - - {feature.icon} - -

{feature.title}

-

{feature.desc}

- - ))} -
+ + {feature.icon} + +

+ {feature.title} +

+

+ {feature.desc} +

- - ) -} + ))} +
+ + + ); +}; -export default PracticeTab +export default PracticeTab; diff --git a/src/pages/interview-prep/TechnicalTab.tsx b/src/pages/interview-prep/TechnicalTab.tsx index ea8e3e6a..33fe5577 100644 --- a/src/pages/interview-prep/TechnicalTab.tsx +++ b/src/pages/interview-prep/TechnicalTab.tsx @@ -3,407 +3,486 @@ import { motion } from "framer-motion"; import Link from "@docusaurus/Link"; interface Resource { - name: string; - url: string; + name: string; + url: string; } interface SubCategory { - title: string; - difficulty: string; - problems: number; - subtopics: string[]; - resources: Resource[]; + title: string; + difficulty: string; + problems: number; + subtopics: string[]; + resources: Resource[]; } interface TechnicalCategory { - category: string; - description: string; - totalProblems: number; - subcategories: SubCategory[]; + category: string; + description: string; + totalProblems: number; + subcategories: SubCategory[]; } interface PracticePlatform { - name: string; - description: string; - problems: string; - difficulty: string[]; - url: string; - features: string[]; + name: string; + description: string; + problems: string; + difficulty: string[]; + url: string; + features: string[]; } interface TechnicalTabProps { - technicalResources?: TechnicalCategory[]; - practicePlatforms?: PracticePlatform[]; - expandedCategories?: { [key: number]: boolean }; - toggleCategory: (index: number) => void; + technicalResources?: TechnicalCategory[]; + practicePlatforms?: PracticePlatform[]; + expandedCategories?: { [key: number]: boolean }; + toggleCategory: (index: number) => void; } -const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } } }; -const staggerContainer = { hidden: {}, visible: { transition: { staggerChildren: 0.2 } } }; +const fadeIn = { + hidden: { opacity: 0, y: 20 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }, +}; +const staggerContainer = { + hidden: {}, + visible: { transition: { staggerChildren: 0.2 } }, +}; const TechnicalTab: React.FC = ({ - technicalResources=[], - practicePlatforms=[], - expandedCategories=[], - toggleCategory, + technicalResources = [], + practicePlatforms = [], + expandedCategories = [], + toggleCategory, }) => { - return ( - - -
-
-
- - Technical Interview Mastery -
-

- Master Technical Interviews -

-

- Technical interviews are the cornerstone of software engineering hiring. They evaluate your - problem-solving abilities, coding skills, and understanding of computer science fundamentals. - Success requires consistent practice, pattern recognition, and the ability to communicate your - thought process clearly. -

-
-
-
-
- ๐Ÿง  -
-

Problem Solving

-

- Develop systematic approaches to break down complex problems into manageable components. -

-
-
-
- โšก -
-

Pattern Recognition

-

- Learn to identify common patterns and apply proven techniques to solve similar problems - efficiently. -

-
-
-
- ๐Ÿ’ฌ -
-

Communication

-

- Master the art of explaining your approach, discussing trade-offs, and collaborating with - interviewers. -

-
+ return ( + + +
+
+
+ + Technical Interview Mastery +
+

+ Master Technical Interviews +

+

+ Technical interviews are the cornerstone of software engineering + hiring. They evaluate your problem-solving abilities, coding + skills, and understanding of computer science fundamentals. + Success requires consistent practice, pattern recognition, and the + ability to communicate your thought process clearly. +

+
+
+
+
+ ๐Ÿง  +
+

+ Problem Solving +

+

+ Develop systematic approaches to break down complex problems + into manageable components. +

+
+
+
+ โšก +
+

+ Pattern Recognition +

+

+ Learn to identify common patterns and apply proven techniques to + solve similar problems efficiently. +

+
+
+
+ ๐Ÿ’ฌ +
+

+ Communication +

+

+ Master the art of explaining your approach, discussing + trade-offs, and collaborating with interviewers. +

+
+
+
+
+ ๐Ÿ’ก +
+

+ Success Strategy +

+

+ Focus on understanding patterns rather than memorizing + solutions. Practice explaining your thought process out loud, + and always consider time/space complexity. Consistent daily + practice for 2-3 months typically yields the best results. +

+
+
+
+
+ + + {/* Question Bank by Category - Collapsible */} + +

+ ๐Ÿ“š Question Bank by Category +

+
+ {technicalResources.map((category, categoryIndex) => { + const headerColors = [ + { + gradient: "from-purple-500 to-pink-400", + border: "border-purple-500 dark:border-purple-400", + }, + { + gradient: "from-blue-500 to-sky-400", + border: "border-blue-500 dark:border-blue-400", + }, + { + gradient: "from-green-500 to-green-400", + border: "border-green-500 dark:border-green-400", + }, + { + gradient: "from-orange-500 to-red-500", + border: "border-orange-500 dark:border-orange-400", + }, + { + gradient: "from-pink-500 to-yellow-500", + border: "border-pink-500 dark:border-pink-400", + }, + { + gradient: "from-cyan-500 to-blue-500", + border: "border-cyan-500 dark:border-cyan-400", + }, + ]; + const { gradient, border } = + headerColors[categoryIndex % headerColors.length]; + const subtopicBorderClasses = [ + "question-bank-subtopic-purple", + "question-bank-subtopic-blue", + "question-bank-subtopic-green", + "question-bank-subtopic-orange", + "question-bank-subtopic-pink", + "question-bank-subtopic-cyan", + ]; + return ( +
+ {/* Outer header */} + - - {/* Question Bank by Category - Collapsible */} - -

- ๐Ÿ“š Question Bank by Category -

-
- {technicalResources.map((category, categoryIndex) => { - const headerColors = [ - { gradient: "from-purple-500 to-pink-400", border: "border-purple-500 dark:border-purple-400" }, - { gradient: "from-blue-500 to-sky-400", border: "border-blue-500 dark:border-blue-400" }, - { gradient: "from-green-500 to-green-400", border: "border-green-500 dark:border-green-400" }, - { gradient: "from-orange-500 to-red-500", border: "border-orange-500 dark:border-orange-400" }, - { gradient: "from-pink-500 to-yellow-500", border: "border-pink-500 dark:border-pink-400" }, - { gradient: "from-cyan-500 to-blue-500", border: "border-cyan-500 dark:border-cyan-400" }, - ]; - const { gradient, border } = headerColors[categoryIndex % headerColors.length]; - const subtopicBorderClasses = [ - "question-bank-subtopic-purple", - "question-bank-subtopic-blue", - "question-bank-subtopic-green", - "question-bank-subtopic-orange", - "question-bank-subtopic-pink", - "question-bank-subtopic-cyan" - ]; - return ( -
- {/* Outer header */} - - - {/* Collapsible Content */} - {expandedCategories[categoryIndex] && ( - -
- {category.subcategories.map((subcategory, subIndex) => ( - -
- {/* Subcategory Header */} -
-
- {subcategory.title} -
-
- - {subcategory.difficulty} - - - {subcategory.problems} - -
-
- - {/* Subtopics */} -
-
- Key Topics: -
-
- {subcategory.subtopics.map((topic, topicIndex) => ( - - {topic} - - ))} -
-
- - {/* Resources */} -
-
- Practice Resources: -
- {subcategory.resources.map((resource, resourceIndex) => ( - - ๐Ÿ”— {resource.name} - - ))} -
-
- ))} -
- - )} -
- ); - })} - -
- - - - {/* Practice Platforms */} - -

- ๐ŸŽฏ Recommended Practice Platforms -

-
- {practicePlatforms.map((platform, index) => ( - +
+ {category.subcategories.map((subcategory, subIndex) => ( +
-
-

{platform.name}

-

{platform.description}

-
{platform.problems}
-
Problems Available
-
- -
-
- {platform.difficulty.map((diff, diffIndex) => ( - - {diff} - - ))} -
+ {/* Subcategory Header */} +
+
+ {subcategory.title} +
+
+ + {subcategory.difficulty} + + + {subcategory.problems} +
+
-
-
Key Features:
-
    - {platform.features.map((feature, featureIndex) => ( -
  • - - {feature} -
    • - ))} -
+ {/* Subtopics */} +
+
+ Key Topics: +
+
+ {subcategory.subtopics.map( + (topic, topicIndex) => ( + + {topic} + + ), + )}
+
- {/* Push button to bottom */} -
+ {/* Resources */} +
+
+ Practice Resources: +
+ {subcategory.resources.map( + (resource, resourceIndex) => ( - Start Practicing + ๐Ÿ”— {resource.name} -
- - ))} -
- - + ), + )} +
+
+ ))} +
+ + )} +
+ ); + })} +
+ - {/* Tips & Best Practices */} + {/* Practice Platforms */} + +

+ ๐ŸŽฏ Recommended Practice Platforms +

+
+ {practicePlatforms.map((platform, index) => ( -

- ๐Ÿ’ก Pro Tips for Technical Interview Success -

-
-
-
-
- 1 -
-
-

Start with Easy Problems

-

- Build confidence and understand patterns before tackling harder challenges. -

-
-
-
-
- 2 -
-
-

Practice Consistently

-

- Solve 1-2 problems daily rather than cramming before interviews. -

-
-
-
-
- 3 -
-
-

Focus on Patterns

-

- Learn common problem-solving patterns like two pointers, sliding window, etc. -

-
-
-
-
-
-
- 4 -
-
-

Time Yourself

-

- Practice under time constraints to simulate real interview conditions. -

-
-
-
-
- 5 -
-
-

Explain Your Thinking

-

- Practice verbalizing your approach and reasoning process. -

-
-
-
-
- 6 -
-
-

Review Solutions

-

- Study optimal solutions and alternative approaches after solving problems. -

-
-
-
+
+

+ {platform.name} +

+

+ {platform.description} +

+
+ {platform.problems} +
+
+ Problems Available +
+
+ +
+
+ {platform.difficulty.map((diff, diffIndex) => ( + + {diff} + + ))}
+
+ +
+
+ Key Features: +
+
    + {platform.features.map((feature, featureIndex) => ( +
  • + + {feature} +
    • + ))} +
+
+ + {/* Push button to bottom */} + - - ); + ))} +
+ + + {/* Tips & Best Practices */} + +

+ ๐Ÿ’ก Pro Tips for Technical Interview Success +

+
+
+
+
+ 1 +
+
+

+ Start with Easy Problems +

+

+ Build confidence and understand patterns before tackling + harder challenges. +

+
+
+
+
+ 2 +
+
+

+ Practice Consistently +

+

+ Solve 1-2 problems daily rather than cramming before + interviews. +

+
+
+
+
+ 3 +
+
+

+ Focus on Patterns +

+

+ Learn common problem-solving patterns like two pointers, + sliding window, etc. +

+
+
+
+
+
+
+ 4 +
+
+

+ Time Yourself +

+

+ Practice under time constraints to simulate real interview + conditions. +

+
+
+
+
+ 5 +
+
+

+ Explain Your Thinking +

+

+ Practice verbalizing your approach and reasoning process. +

+
+
+
+
+ 6 +
+
+

+ Review Solutions +

+

+ Study optimal solutions and alternative approaches after + solving problems. +

+
+
+
+
+ + + ); }; export default TechnicalTab; diff --git a/src/pages/interview-prep/index.tsx b/src/pages/interview-prep/index.tsx index 6f929c9e..1b90b502 100644 --- a/src/pages/interview-prep/index.tsx +++ b/src/pages/interview-prep/index.tsx @@ -1,22 +1,22 @@ -import React from "react" -import { useState } from "react" -import Layout from "@theme/Layout" -import Head from "@docusaurus/Head" -import { motion } from "framer-motion" -import Link from "@docusaurus/Link" -import { useColorMode } from '@docusaurus/theme-common'; -import clsx from 'clsx' -import OverviewTab from "./OverviewTab" +import React from "react"; +import { useState } from "react"; +import Layout from "@theme/Layout"; +import Head from "@docusaurus/Head"; +import { motion } from "framer-motion"; +import Link from "@docusaurus/Link"; +import { useColorMode } from "@docusaurus/theme-common"; +import clsx from "clsx"; +import OverviewTab from "./OverviewTab"; import TechnicalTab from "./TechnicalTab"; -import BehavioralTab from "./BehavioralTab" -import CompaniesTab from "./CompaniesTab" -import PracticeTab from "./PracticeTab" +import BehavioralTab from "./BehavioralTab"; +import CompaniesTab from "./CompaniesTab"; +import PracticeTab from "./PracticeTab"; // Animation variants const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }, -} +}; const staggerContainer = { hidden: {}, @@ -25,36 +25,40 @@ const staggerContainer = { staggerChildren: 0.2, }, }, -} +}; const InterviewPrepPage: React.FC = () => { - const [activeTab, setActiveTab] = useState<"overview" | "technical" | "behavioral" | "companies" | "practice">( - "overview", - ) - const [expandedCategories, setExpandedCategories] = useState<{ [key: string]: boolean }>({}) + const [activeTab, setActiveTab] = useState< + "overview" | "technical" | "behavioral" | "companies" | "practice" + >("overview"); + const [expandedCategories, setExpandedCategories] = useState<{ + [key: string]: boolean; + }>({}); const toggleCategory = (categoryIndex: number) => { setExpandedCategories((prev) => ({ ...prev, [categoryIndex]: !prev[categoryIndex], - })) - } + })); + }; - const [showTips, setShowTips] = useState<{ [key: number]: boolean }>({}) - const [showQuestions, setShowQuestions] = useState<{ [key: number]: boolean }>({}) + const [showTips, setShowTips] = useState<{ [key: number]: boolean }>({}); + const [showQuestions, setShowQuestions] = useState<{ + [key: number]: boolean; + }>({}); const toggleTips = (index: number) => { setShowTips((prev) => ({ ...prev, [index]: !prev[index], - })) - } + })); + }; const toggleQuestions = (index: number) => { setShowQuestions((prev) => ({ ...prev, [index]: !prev[index], - })) - } + })); + }; const behavioralQuestions = [ { category: "Leadership", @@ -88,7 +92,7 @@ const InterviewPrepPage: React.FC = () => { "What's the most important thing you've learned in your career?", ], }, - ] + ]; const companyTips = [ { @@ -96,8 +100,18 @@ const InterviewPrepPage: React.FC = () => { logo: "/img/google.png", focus: "Googleyness & Leadership", industry: "Technology", - roleTypes: ["Software Engineer", "Product Manager", "Data Scientist", "Site Reliability Engineer"], - focusAreas: ["Scalability", "Problem-Solving", "Innovation", "Technical Excellence"], + roleTypes: [ + "Software Engineer", + "Product Manager", + "Data Scientist", + "Site Reliability Engineer", + ], + focusAreas: [ + "Scalability", + "Problem-Solving", + "Innovation", + "Technical Excellence", + ], tips: [ "Focus on scalability and efficiency in your solutions", "Demonstrate analytical thinking with data-driven approaches", @@ -128,7 +142,8 @@ const InterviewPrepPage: React.FC = () => { category: "Problem Solving", }, { - question: "Tell me about a time you solved a complex technical problem", + question: + "Tell me about a time you solved a complex technical problem", answer: "Use STAR method: Situation (complex distributed system issue), Task (restore service and prevent recurrence), Action (systematic debugging, root cause analysis, implemented monitoring), Result (99.9% uptime improvement, prevented similar issues). Focus on technical depth and problem-solving methodology.", category: "Behavioral", @@ -146,8 +161,18 @@ const InterviewPrepPage: React.FC = () => { logo: "/img/amazon.png", focus: "Leadership Principles", industry: "E-commerce/Cloud", - roleTypes: ["Software Engineer", "Solutions Architect", "Product Manager", "DevOps Engineer"], - focusAreas: ["Leadership Principles", "Customer Obsession", "Ownership", "Bias for Action"], + roleTypes: [ + "Software Engineer", + "Solutions Architect", + "Product Manager", + "DevOps Engineer", + ], + focusAreas: [ + "Leadership Principles", + "Customer Obsession", + "Ownership", + "Bias for Action", + ], tips: [ "Master all 16 Leadership Principles with 2-3 specific examples each", "Use STAR method for all behavioral questions", @@ -166,7 +191,8 @@ const InterviewPrepPage: React.FC = () => { category: "Behavioral", }, { - question: "Describe a time you had to make a decision with incomplete information", + question: + "Describe a time you had to make a decision with incomplete information", answer: "Demonstrate 'Bias for Action'. Situation: critical system outage with limited debugging info. Task: restore service quickly. Action: gathered available data, made calculated decision based on patterns, implemented fix with rollback plan. Result: restored service in 30 minutes, prevented $100K revenue loss.", category: "Behavioral", @@ -196,7 +222,12 @@ const InterviewPrepPage: React.FC = () => { logo: "/img/meta.png", focus: "Move Fast & Impact", industry: "Social Media/VR", - roleTypes: ["Software Engineer", "Product Manager", "Data Scientist", "Research Scientist"], + roleTypes: [ + "Software Engineer", + "Product Manager", + "Data Scientist", + "Research Scientist", + ], focusAreas: ["Scale", "Impact", "Execution", "People Connection"], tips: [ "Focus on massive scale and global impact", @@ -216,13 +247,15 @@ const InterviewPrepPage: React.FC = () => { category: "System Design", }, { - question: "Tell me about a time you had to make a trade-off between speed and quality", + question: + "Tell me about a time you had to make a trade-off between speed and quality", answer: "Situation: urgent security fix needed. Task: balance quick deployment with thorough testing. Action: implemented fix with comprehensive monitoring, deployed to small percentage first, gradually rolled out. Result: fixed security issue within 24 hours while maintaining system stability.", category: "Behavioral", }, { - question: "How would you handle a feature that's negatively impacting user engagement?", + question: + "How would you handle a feature that's negatively impacting user engagement?", answer: "Data analysis approach: segment users, analyze metrics, identify root causes, A/B test solutions, gather qualitative feedback. Action: iterate quickly, measure impact, communicate with stakeholders. Focus on user value and long-term engagement over short-term metrics.", category: "Product Sense", @@ -246,7 +279,12 @@ const InterviewPrepPage: React.FC = () => { logo: "/img/apple.png", focus: "Innovation & User Experience", industry: "Consumer Electronics", - roleTypes: ["Software Engineer", "Hardware Engineer", "Product Manager", "Design Engineer"], + roleTypes: [ + "Software Engineer", + "Hardware Engineer", + "Product Manager", + "Design Engineer", + ], focusAreas: ["User Experience", "Innovation", "Quality", "Privacy"], tips: [ "Focus on user experience and design thinking", @@ -266,7 +304,8 @@ const InterviewPrepPage: React.FC = () => { category: "Product Design", }, { - question: "Tell me about a time you had to meet very high quality standards", + question: + "Tell me about a time you had to meet very high quality standards", answer: "Situation: developing user-facing feature with strict quality requirements. Task: deliver bug-free, polished experience. Action: implemented comprehensive testing, code reviews, user testing, performance optimization. Result: zero critical bugs in production, positive user feedback.", category: "Behavioral", @@ -296,7 +335,12 @@ const InterviewPrepPage: React.FC = () => { logo: "/img/netflix.png", focus: "Freedom & Responsibility", industry: "Streaming/Entertainment", - roleTypes: ["Software Engineer", "Data Engineer", "Product Manager", "ML Engineer"], + roleTypes: [ + "Software Engineer", + "Data Engineer", + "Product Manager", + "ML Engineer", + ], focusAreas: ["Scale", "Personalization", "Reliability", "Data-Driven"], tips: [ "Understand Netflix's culture of freedom and responsibility", @@ -322,13 +366,15 @@ const InterviewPrepPage: React.FC = () => { category: "Behavioral", }, { - question: "How would you handle video streaming for millions of concurrent users?", + question: + "How would you handle video streaming for millions of concurrent users?", answer: "CDN strategy, adaptive bitrate streaming, content pre-positioning, load balancing, caching at multiple levels, real-time monitoring, graceful degradation, and global infrastructure optimization. Consider peak traffic patterns and regional differences.", category: "System Design", }, { - question: "Describe a time you had to make a decision with limited data", + question: + "Describe a time you had to make a decision with limited data", answer: "Situation: new feature launch decision with incomplete user research. Task: decide on launch strategy. Action: analyzed available data, made assumptions explicit, designed experiments to validate quickly. Result: successful launch with rapid iteration based on real user feedback.", category: "Behavioral", @@ -340,8 +386,18 @@ const InterviewPrepPage: React.FC = () => { logo: "/img/microsoft.png", focus: "Growth Mindset & Collaboration", industry: "Technology", - roleTypes: ["Software Engineer", "Program Manager", "Cloud Architect", "AI Engineer"], - focusAreas: ["Growth Mindset", "Collaboration", "Inclusive Design", "Cloud Computing"], + roleTypes: [ + "Software Engineer", + "Program Manager", + "Cloud Architect", + "AI Engineer", + ], + focusAreas: [ + "Growth Mindset", + "Collaboration", + "Inclusive Design", + "Cloud Computing", + ], tips: [ "Emphasize continuous learning and growth mindset", "Show collaborative approach and inclusive thinking", @@ -379,7 +435,7 @@ const InterviewPrepPage: React.FC = () => { }, ], }, - ] + ]; const mockInterviewQuestions = [ // ๐Ÿ”น Technical @@ -390,26 +446,48 @@ const InterviewPrepPage: React.FC = () => { type: "technical", question: "Find the first non-repeating character in a string", difficulty: "Easy", - hints: ["Use a hash map to count frequencies", "Return the first character with count 1"], + hints: [ + "Use a hash map to count frequencies", + "Return the first character with count 1", + ], estimatedTime: 10, category: "Strings", links: [ - { title: "LeetCode - First Unique Character", url: "https://leetcode.com/problems/first-unique-character-in-a-string/", type: "example" }, - { title: "MDN - Map Object", url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map", type: "documentation" } - ] + { + title: "LeetCode - First Unique Character", + url: "https://leetcode.com/problems/first-unique-character-in-a-string/", + type: "example", + }, + { + title: "MDN - Map Object", + url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map", + type: "documentation", + }, + ], }, { id: "tech-arr-2", type: "technical", question: "Merge two sorted arrays without using extra space", difficulty: "Medium", - hints: ["Two-pointer technique works well", "Consider edge cases where one array is empty"], + hints: [ + "Two-pointer technique works well", + "Consider edge cases where one array is empty", + ], estimatedTime: 15, category: "Arrays", links: [ - { title: "LeetCode - Merge Sorted Array", url: "https://leetcode.com/problems/merge-sorted-array/", type: "example" }, - { title: "GeeksforGeeks - Merge Without Extra Space", url: "https://www.geeksforgeeks.org/merge-two-sorted-arrays-o1-extra-space/", type: "tutorial" } - ] + { + title: "LeetCode - Merge Sorted Array", + url: "https://leetcode.com/problems/merge-sorted-array/", + type: "example", + }, + { + title: "GeeksforGeeks - Merge Without Extra Space", + url: "https://www.geeksforgeeks.org/merge-two-sorted-arrays-o1-extra-space/", + type: "tutorial", + }, + ], }, // Linked Lists @@ -418,26 +496,48 @@ const InterviewPrepPage: React.FC = () => { type: "technical", question: "Reverse a linked list", difficulty: "Medium", - hints: ["Think about iterative vs recursive approach", "Consider edge cases like empty list"], + hints: [ + "Think about iterative vs recursive approach", + "Consider edge cases like empty list", + ], estimatedTime: 20, category: "Linked List", links: [ - { title: "LeetCode - Reverse Linked List", url: "https://leetcode.com/problems/reverse-linked-list/", type: "example" }, - { title: "GeeksforGeeks - Reverse Linked List", url: "https://www.geeksforgeeks.org/reverse-a-linked-list/", type: "tutorial" } - ] + { + title: "LeetCode - Reverse Linked List", + url: "https://leetcode.com/problems/reverse-linked-list/", + type: "example", + }, + { + title: "GeeksforGeeks - Reverse Linked List", + url: "https://www.geeksforgeeks.org/reverse-a-linked-list/", + type: "tutorial", + }, + ], }, { id: "tech-ll-2", type: "technical", question: "Detect if a linked list has a cycle", difficulty: "Medium", - hints: ["Use fast and slow pointers (Floydโ€™s cycle detection)", "Watch out for null references"], + hints: [ + "Use fast and slow pointers (Floydโ€™s cycle detection)", + "Watch out for null references", + ], estimatedTime: 15, category: "Linked List", links: [ - { title: "LeetCode - Linked List Cycle", url: "https://leetcode.com/problems/linked-list-cycle/", type: "example" }, - { title: "GeeksForGeeks- Detect Loop in a Linked List", url: "https://www.geeksforgeeks.org/dsa/detect-loop-in-a-linked-list/", type: "reference" } - ] + { + title: "LeetCode - Linked List Cycle", + url: "https://leetcode.com/problems/linked-list-cycle/", + type: "example", + }, + { + title: "GeeksForGeeks- Detect Loop in a Linked List", + url: "https://www.geeksforgeeks.org/dsa/detect-loop-in-a-linked-list/", + type: "reference", + }, + ], }, // Trees & Graphs @@ -450,9 +550,17 @@ const InterviewPrepPage: React.FC = () => { estimatedTime: 10, category: "Trees", links: [ - { title: "LeetCode - Maximum Depth of Binary Tree", url: "https://leetcode.com/problems/maximum-depth-of-binary-tree/", type: "example" }, - { title: "GeeksForGeeks - DFS", url: "https://www.geeksforgeeks.org/dsa/depth-first-search-or-dfs-for-a-graph/", type: "reference" } - ] + { + title: "LeetCode - Maximum Depth of Binary Tree", + url: "https://leetcode.com/problems/maximum-depth-of-binary-tree/", + type: "example", + }, + { + title: "GeeksForGeeks - DFS", + url: "https://www.geeksforgeeks.org/dsa/depth-first-search-or-dfs-for-a-graph/", + type: "reference", + }, + ], }, { id: "tech-graph-1", @@ -463,9 +571,17 @@ const InterviewPrepPage: React.FC = () => { estimatedTime: 25, category: "Graphs", links: [ - { title: "LeetCode - Clone Graph", url: "https://leetcode.com/problems/clone-graph/", type: "example" }, - { title: "GeeksforGeeks - Clone Graph", url: "https://www.geeksforgeeks.org/clone-an-undirected-graph/", type: "tutorial" } - ] + { + title: "LeetCode - Clone Graph", + url: "https://leetcode.com/problems/clone-graph/", + type: "example", + }, + { + title: "GeeksforGeeks - Clone Graph", + url: "https://www.geeksforgeeks.org/clone-an-undirected-graph/", + type: "tutorial", + }, + ], }, // Dynamic Programming @@ -478,22 +594,41 @@ const InterviewPrepPage: React.FC = () => { estimatedTime: 15, category: "Dynamic Programming", links: [ - { title: "LeetCode - Climbing Stairs", url: "https://leetcode.com/problems/climbing-stairs/", type: "example" }, - { title: "DP Introduction", url: "https://www.geeksforgeeks.org/dynamic-programming/", type: "tutorial" } - ] + { + title: "LeetCode - Climbing Stairs", + url: "https://leetcode.com/problems/climbing-stairs/", + type: "example", + }, + { + title: "DP Introduction", + url: "https://www.geeksforgeeks.org/dynamic-programming/", + type: "tutorial", + }, + ], }, { id: "tech-dp-2", type: "technical", question: "Longest Increasing Subsequence", difficulty: "Medium", - hints: ["DP with O(n^2)", "Can be optimized with Binary Search (O(n log n))"], + hints: [ + "DP with O(n^2)", + "Can be optimized with Binary Search (O(n log n))", + ], estimatedTime: 35, category: "Dynamic Programming", links: [ - { title: "LeetCode - Longest Increasing Subsequence", url: "https://leetcode.com/problems/longest-increasing-subsequence/", type: "example" }, - { title: "GeeksforGeeks - LIS Explained", url: "https://www.geeksforgeeks.org/longest-increasing-subsequence-dp-3/", type: "tutorial" } - ] + { + title: "LeetCode - Longest Increasing Subsequence", + url: "https://leetcode.com/problems/longest-increasing-subsequence/", + type: "example", + }, + { + title: "GeeksforGeeks - LIS Explained", + url: "https://www.geeksforgeeks.org/longest-increasing-subsequence-dp-3/", + type: "tutorial", + }, + ], }, // Greedy Algorithms @@ -502,13 +637,24 @@ const InterviewPrepPage: React.FC = () => { type: "technical", question: "Jump Game", difficulty: "Medium", - hints: ["Track the maximum reachable index", "Greedy works better than DP"], + hints: [ + "Track the maximum reachable index", + "Greedy works better than DP", + ], estimatedTime: 20, category: "Greedy", links: [ - { title: "LeetCode - Jump Game", url: "https://leetcode.com/problems/jump-game/", type: "example" }, - { title: "Greedy Algorithm Basics", url: "https://www.geeksforgeeks.org/greedy-algorithms/", type: "reference" } - ] + { + title: "LeetCode - Jump Game", + url: "https://leetcode.com/problems/jump-game/", + type: "example", + }, + { + title: "Greedy Algorithm Basics", + url: "https://www.geeksforgeeks.org/greedy-algorithms/", + type: "reference", + }, + ], }, { id: "tech-greedy-2", @@ -519,9 +665,17 @@ const InterviewPrepPage: React.FC = () => { estimatedTime: 25, category: "Greedy", links: [ - { title: "GeeksforGeeks - Activity Selection", url: "https://www.geeksforgeeks.org/activity-selection-problem-greedy-algo-1/", type: "tutorial" }, - { title: "MIT Greedy Algorithms Notes", url: "https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-006-introduction-to-algorithms-fall-2011/lecture-notes/MIT6_006F11_lec05.pdf", type: "reference" } - ] + { + title: "GeeksforGeeks - Activity Selection", + url: "https://www.geeksforgeeks.org/activity-selection-problem-greedy-algo-1/", + type: "tutorial", + }, + { + title: "MIT Greedy Algorithms Notes", + url: "https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-006-introduction-to-algorithms-fall-2011/lecture-notes/MIT6_006F11_lec05.pdf", + type: "reference", + }, + ], }, // Bit Manipulation @@ -534,9 +688,17 @@ const InterviewPrepPage: React.FC = () => { estimatedTime: 10, category: "Bit Manipulation", links: [ - { title: "LeetCode - Single Number", url: "https://leetcode.com/problems/single-number/", type: "example" }, - { title: "Bitwise Operators in C++", url: "https://cplusplus.com/doc/tutorial/operators/#bitwise", type: "documentation" } - ] + { + title: "LeetCode - Single Number", + url: "https://leetcode.com/problems/single-number/", + type: "example", + }, + { + title: "Bitwise Operators in C++", + url: "https://cplusplus.com/doc/tutorial/operators/#bitwise", + type: "documentation", + }, + ], }, { id: "tech-bit-2", @@ -547,9 +709,17 @@ const InterviewPrepPage: React.FC = () => { estimatedTime: 12, category: "Bit Manipulation", links: [ - { title: "LeetCode - Number of 1 Bits", url: "https://leetcode.com/problems/number-of-1-bits/", type: "example" }, - { title: "Hamming Weight Explained", url: "https://www.geeksforgeeks.org/count-set-bits-in-an-integer/", type: "tutorial" } - ] + { + title: "LeetCode - Number of 1 Bits", + url: "https://leetcode.com/problems/number-of-1-bits/", + type: "example", + }, + { + title: "Hamming Weight Explained", + url: "https://www.geeksforgeeks.org/count-set-bits-in-an-integer/", + type: "tutorial", + }, + ], }, // Sorting Algorithms @@ -558,13 +728,24 @@ const InterviewPrepPage: React.FC = () => { type: "technical", question: "Sort Colors (Dutch National Flag problem)", difficulty: "Medium", - hints: ["Use three pointers (low, mid, high)", "In-place solution required"], + hints: [ + "Use three pointers (low, mid, high)", + "In-place solution required", + ], estimatedTime: 20, category: "Sorting", links: [ - { title: "LeetCode - Sort Colors", url: "https://leetcode.com/problems/sort-colors/", type: "example" }, - { title: "Dutch National Flag Problem", url: "https://www.geeksforgeeks.org/sort-an-array-of-0s-1s-and-2s/", type: "tutorial" } - ] + { + title: "LeetCode - Sort Colors", + url: "https://leetcode.com/problems/sort-colors/", + type: "example", + }, + { + title: "Dutch National Flag Problem", + url: "https://www.geeksforgeeks.org/sort-an-array-of-0s-1s-and-2s/", + type: "tutorial", + }, + ], }, { id: "tech-sort-2", @@ -575,9 +756,17 @@ const InterviewPrepPage: React.FC = () => { estimatedTime: 25, category: "Sorting/Heap", links: [ - { title: "LeetCode - Kth Largest Element", url: "https://leetcode.com/problems/kth-largest-element-in-an-array/", type: "example" }, - { title: "QuickSelect Algorithm", url: "https://www.geeksforgeeks.org/quickselect-algorithm/", type: "tutorial" } - ] + { + title: "LeetCode - Kth Largest Element", + url: "https://leetcode.com/problems/kth-largest-element-in-an-array/", + type: "example", + }, + { + title: "QuickSelect Algorithm", + url: "https://www.geeksforgeeks.org/quickselect-algorithm/", + type: "tutorial", + }, + ], }, // Binary Search @@ -590,9 +779,17 @@ const InterviewPrepPage: React.FC = () => { estimatedTime: 10, category: "Binary Search", links: [ - { title: "LeetCode - Binary Search", url: "https://leetcode.com/problems/binary-search/", type: "example" }, - { title: "Binary Search Explained", url: "https://www.geeksforgeeks.org/binary-search/", type: "tutorial" } - ] + { + title: "LeetCode - Binary Search", + url: "https://leetcode.com/problems/binary-search/", + type: "example", + }, + { + title: "Binary Search Explained", + url: "https://www.geeksforgeeks.org/binary-search/", + type: "tutorial", + }, + ], }, { id: "tech-bs-2", @@ -603,24 +800,37 @@ const InterviewPrepPage: React.FC = () => { estimatedTime: 20, category: "Binary Search", links: [ - { title: "LeetCode - Find Minimum in Rotated Array", url: "https://leetcode.com/problems/find-minimum-in-rotated-sorted-array/", type: "example" }, - { title: "Binary Search Variants", url: "https://www.geeksforgeeks.org/binary-search/", type: "reference" } - ] + { + title: "LeetCode - Find Minimum in Rotated Array", + url: "https://leetcode.com/problems/find-minimum-in-rotated-sorted-array/", + type: "example", + }, + { + title: "Binary Search Variants", + url: "https://www.geeksforgeeks.org/binary-search/", + type: "reference", + }, + ], }, // ๐Ÿ”น Behavioral { id: "behavioral-2", type: "behavioral", - question: "Tell me about a time you had to work with a difficult team member", + question: + "Tell me about a time you had to work with a difficult team member", framework: "STAR Method", difficulty: "Medium", hints: ["Situation", "Task", "Action", "Result"], estimatedTime: 15, category: "Teamwork", links: [ - { title: "Behavioral Interview Tips", url: "https://www.youtube.com/watch?v=OqoGEMlNk_g", type: "tutorial" } - ] + { + title: "Behavioral Interview Tips", + url: "https://www.youtube.com/watch?v=OqoGEMlNk_g", + type: "tutorial", + }, + ], }, { id: "behavioral-3", @@ -628,12 +838,20 @@ const InterviewPrepPage: React.FC = () => { question: "Describe a situation where you had to meet a tight deadline", framework: "STAR Method", difficulty: "Medium", - hints: ["Explain how you prioritized tasks", "Mention communication with stakeholders", "Highlight the outcome"], + hints: [ + "Explain how you prioritized tasks", + "Mention communication with stakeholders", + "Highlight the outcome", + ], estimatedTime: 12, category: "Time Management", links: [ - { title: "STAR Method Guide", url: "https://mondo.com/insights/how-to-use-star-method-to-answer-performace-based-interview-questions/#:~:text=Talk%20about%20a%20time%20when%20you%20had%20to,timeline%20and%20assigned%20tasks%20to%20each%20team%20member.", type: "tutorial" } - ] + { + title: "STAR Method Guide", + url: "https://mondo.com/insights/how-to-use-star-method-to-answer-performace-based-interview-questions/#:~:text=Talk%20about%20a%20time%20when%20you%20had%20to,timeline%20and%20assigned%20tasks%20to%20each%20team%20member.", + type: "tutorial", + }, + ], }, { id: "behavioral-4", @@ -641,12 +859,20 @@ const InterviewPrepPage: React.FC = () => { question: "Whatโ€™s the most challenging project you have worked on?", framework: "STAR Method", difficulty: "Medium", - hints: ["Focus on the problem complexity", "Explain how you collaborated", "Highlight measurable outcomes"], + hints: [ + "Focus on the problem complexity", + "Explain how you collaborated", + "Highlight measurable outcomes", + ], estimatedTime: 15, category: "Problem Solving", links: [ - { title: "Problem Solving in Interviews", url: "https://megainterview.com/what-was-the-most-challenging-project-you-have-worked-on/", type: "reference" } - ] + { + title: "Problem Solving in Interviews", + url: "https://megainterview.com/what-was-the-most-challenging-project-you-have-worked-on/", + type: "reference", + }, + ], }, { id: "behavioral-5", @@ -654,12 +880,20 @@ const InterviewPrepPage: React.FC = () => { question: "Tell me about a time you failed. How did you handle it?", framework: "STAR Method", difficulty: "Hard", - hints: ["Be honest but professional", "Emphasize what you learned", "Show resilience and growth"], + hints: [ + "Be honest but professional", + "Emphasize what you learned", + "Show resilience and growth", + ], estimatedTime: 15, category: "Resilience", links: [ - { title: "Answering Failure Questions", url: "https://interviewpenguin.com/tell-me-about-a-time-when-you-failed/", type: "tutorial" } - ] + { + title: "Answering Failure Questions", + url: "https://interviewpenguin.com/tell-me-about-a-time-when-you-failed/", + type: "tutorial", + }, + ], }, // ๐Ÿ”น System Design @@ -672,65 +906,119 @@ const InterviewPrepPage: React.FC = () => { estimatedTime: 40, category: "Web Systems", links: [ - { title: "System Design - URL Shortener", url: "https://www.geeksforgeeks.org/system-design/system-design-url-shortening-service/", type: "example" }, - { title: "High Scalability - URL Shortener", url: "https://www.hellointerview.com/learn/system-design/problem-breakdowns/bitly", type: "reference" } - ] + { + title: "System Design - URL Shortener", + url: "https://www.geeksforgeeks.org/system-design/system-design-url-shortening-service/", + type: "example", + }, + { + title: "High Scalability - URL Shortener", + url: "https://www.hellointerview.com/learn/system-design/problem-breakdowns/bitly", + type: "reference", + }, + ], }, { id: "system-3", type: "system-design", question: "Design a chat application like WhatsApp", difficulty: "Hard", - hints: ["Think about message delivery guarantees", "Consider real-time sync across devices", "Handle offline users gracefully"], + hints: [ + "Think about message delivery guarantees", + "Consider real-time sync across devices", + "Handle offline users gracefully", + ], estimatedTime: 60, category: "Messaging Systems", links: [ - { title: "System Design - WhatsApp", url: "https://blog.algomaster.io/p/design-a-chat-application-like-whatsapp", type: "example" }, - { title: "Scalable Chat App Design", url: "https://www.youtube.com/watch?v=3HXFy_7M12E&t=1s", type: "tutorial" } - ] + { + title: "System Design - WhatsApp", + url: "https://blog.algomaster.io/p/design-a-chat-application-like-whatsapp", + type: "example", + }, + { + title: "Scalable Chat App Design", + url: "https://www.youtube.com/watch?v=3HXFy_7M12E&t=1s", + type: "tutorial", + }, + ], }, { id: "system-4", type: "system-design", question: "Design an online food delivery system like Swiggy/Zomato", difficulty: "Hard", - hints: ["Users, restaurants, delivery partners โ†’ entities", "Real-time location tracking", "Scalability and load balancing"], + hints: [ + "Users, restaurants, delivery partners โ†’ entities", + "Real-time location tracking", + "Scalability and load balancing", + ], estimatedTime: 70, category: "Distributed Systems", links: [ - { title: "System Design - Food Delivery", url: "https://upvey.com/technology/interview/system-design/design-architecture-food-delivery-service-like-swiggy-or-ubereats/#google_vignette", type: "example" }, - { title: "Scalable Food Delivery Architecture", url: "https://www.youtube.com/watch?v=rZyAgZuuZiA&t=8s", type: "tutorial" } - ] + { + title: "System Design - Food Delivery", + url: "https://upvey.com/technology/interview/system-design/design-architecture-food-delivery-service-like-swiggy-or-ubereats/#google_vignette", + type: "example", + }, + { + title: "Scalable Food Delivery Architecture", + url: "https://www.youtube.com/watch?v=rZyAgZuuZiA&t=8s", + type: "tutorial", + }, + ], }, { id: "system-5", type: "system-design", question: "Design a recommendation system for an e-commerce website", difficulty: "Medium", - hints: ["Collaborative filtering", "Content-based recommendations", "Cold start problem"], + hints: [ + "Collaborative filtering", + "Content-based recommendations", + "Cold start problem", + ], estimatedTime: 50, category: "Machine Learning Systems", links: [ - { title: "Recommendation Systems Intro", url: "https://www.geeksforgeeks.org/recommendation-system-in-python/", type: "tutorial" }, - { title: "System Design - Recommendation Engine", url: "https://webkul.com/blog/e-commerce-recommendation-system/", type: "reference" } - ] + { + title: "Recommendation Systems Intro", + url: "https://www.geeksforgeeks.org/recommendation-system-in-python/", + type: "tutorial", + }, + { + title: "System Design - Recommendation Engine", + url: "https://webkul.com/blog/e-commerce-recommendation-system/", + type: "reference", + }, + ], }, { id: "system-6", type: "system-design", question: "Design YouTube (video streaming platform)", difficulty: "Hard", - hints: ["Video upload, transcoding, and storage", "Content delivery networks (CDNs)", "Search and recommendation engine"], + hints: [ + "Video upload, transcoding, and storage", + "Content delivery networks (CDNs)", + "Search and recommendation engine", + ], estimatedTime: 90, category: "Media Systems", links: [ - { title: "System Design - YouTube", url: "https://www.geeksforgeeks.org/system-design/system-design-of-youtube-a-complete-architecture/", type: "example" }, - { title: "Designing Video Streaming Platforms", url: "https://www.youtube.com/watch?v=jPKTo1iGQiE&t=1s", type: "tutorial" } - ] - } - ] - - + { + title: "System Design - YouTube", + url: "https://www.geeksforgeeks.org/system-design/system-design-of-youtube-a-complete-architecture/", + type: "example", + }, + { + title: "Designing Video Streaming Platforms", + url: "https://www.youtube.com/watch?v=jPKTo1iGQiE&t=1s", + type: "tutorial", + }, + ], + }, + ]; const practicePlatforms = [ { @@ -739,7 +1027,12 @@ const InterviewPrepPage: React.FC = () => { problems: "2000+", difficulty: ["Easy", "Medium", "Hard"], url: "https://leetcode.com/", - features: ["Mock Interviews", "Company Tags", "Discussion Forums", "Premium Content"], + features: [ + "Mock Interviews", + "Company Tags", + "Discussion Forums", + "Premium Content", + ], }, { name: "HackerRank", @@ -747,7 +1040,12 @@ const InterviewPrepPage: React.FC = () => { problems: "1000+", difficulty: ["Easy", "Medium", "Hard"], url: "https://hackerrank.com/", - features: ["Skill Assessments", "Certification", "Company Challenges", "Interview Prep"], + features: [ + "Skill Assessments", + "Certification", + "Company Challenges", + "Interview Prep", + ], }, { name: "CodeChef", @@ -755,14 +1053,20 @@ const InterviewPrepPage: React.FC = () => { problems: "3000+", difficulty: ["Easy", "Medium", "Hard"], url: "https://www.codechef.com/", - features: ["Monthly Contests", "Long Challenge", "Cook-Off", "Practice Problems"], + features: [ + "Monthly Contests", + "Long Challenge", + "Cook-Off", + "Practice Problems", + ], }, ]; const technicalResources = [ { category: "๐Ÿ“Š Data Structures & Algorithms", - description: "Master core algorithms and problem-solving patterns for interviews", + description: + "Master core algorithms and problem-solving patterns for interviews", totalProblems: 220, subcategories: [ { @@ -770,13 +1074,25 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Easy", problems: 50, subtopics: [ - "Two Pointers", "Sliding Window", "String Manipulation", "Prefix Sums", "Rotation & Reversal", - "Frequency Counting", "Hashing for Arrays", "Anagram Problems" + "Two Pointers", + "Sliding Window", + "String Manipulation", + "Prefix Sums", + "Rotation & Reversal", + "Frequency Counting", + "Hashing for Arrays", + "Anagram Problems", ], resources: [ { name: "LeetCode Arrays", url: "https://leetcode.com/tag/array/" }, - { name: "HackerRank Strings", url: "https://hackerrank.com/domains/algorithms?filters%5Bsubdomains%5D%5B%5D=strings" }, - { name: "NeetCode Array Playlist", url: "https://www.youtube.com/playlist?list=PLot-Xpze53lfOdF3KwpMSFEyfE77zIwiP" } + { + name: "HackerRank Strings", + url: "https://hackerrank.com/domains/algorithms?filters%5Bsubdomains%5D%5B%5D=strings", + }, + { + name: "NeetCode Array Playlist", + url: "https://www.youtube.com/playlist?list=PLot-Xpze53lfOdF3KwpMSFEyfE77zIwiP", + }, ], }, { @@ -784,13 +1100,27 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Medium", problems: 30, subtopics: [ - "Traversal", "Reversal", "Cycle Detection", "Merge Operations", "Dummy Nodes", - "Doubly Linked List", "Skip Lists" + "Traversal", + "Reversal", + "Cycle Detection", + "Merge Operations", + "Dummy Nodes", + "Doubly Linked List", + "Skip Lists", ], resources: [ - { name: "LeetCode Linked List", url: "https://leetcode.com/tag/linked-list/" }, - { name: "GeeksforGeeks", url: "https://geeksforgeeks.org/data-structures/linked-list/" }, - { name: "FreeCodeCamp Linked List", url: "https://www.youtube.com/watch?v=Hj_rA0dhr2I" } + { + name: "LeetCode Linked List", + url: "https://leetcode.com/tag/linked-list/", + }, + { + name: "GeeksforGeeks", + url: "https://geeksforgeeks.org/data-structures/linked-list/", + }, + { + name: "FreeCodeCamp Linked List", + url: "https://www.youtube.com/watch?v=Hj_rA0dhr2I", + }, ], }, { @@ -798,13 +1128,23 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Hard", problems: 50, subtopics: [ - "Binary Trees", "BST Operations", "Tree Traversals", "Graph Representations", "DFS & BFS", - "Shortest Path", "Topological Sort", "Union-Find", "Minimum Spanning Tree" + "Binary Trees", + "BST Operations", + "Tree Traversals", + "Graph Representations", + "DFS & BFS", + "Shortest Path", + "Topological Sort", + "Union-Find", + "Minimum Spanning Tree", ], resources: [ { name: "LeetCode Tree", url: "https://leetcode.com/tag/tree/" }, { name: "LeetCode Graph", url: "https://leetcode.com/tag/graph/" }, - { name: "WilliamFiset Graph Theory", url: "https://www.youtube.com/playlist?list=PLDV1Zeh2NRsB6SWUrDFW2RmDotAfPbeHu" } + { + name: "WilliamFiset Graph Theory", + url: "https://www.youtube.com/playlist?list=PLDV1Zeh2NRsB6SWUrDFW2RmDotAfPbeHu", + }, ], }, { @@ -812,13 +1152,28 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Hard", problems: 50, subtopics: [ - "1D DP", "2D DP", "Memoization", "Tabulation", "State Optimization", - "Knapsack Variants", "Subsequence Problems", "Game Theory DP" + "1D DP", + "2D DP", + "Memoization", + "Tabulation", + "State Optimization", + "Knapsack Variants", + "Subsequence Problems", + "Game Theory DP", ], resources: [ - { name: "LeetCode DP", url: "https://leetcode.com/tag/dynamic-programming/" }, - { name: "DP Patterns", url: "https://leetcode.com/discuss/general-discussion/458695/dynamic-programming-patterns" }, - { name: "NeetCode DP Playlist", url: "https://www.youtube.com/playlist?list=PLot-Xpze53ldVwtstag2TL4HQhAnC8m4D" } + { + name: "LeetCode DP", + url: "https://leetcode.com/tag/dynamic-programming/", + }, + { + name: "DP Patterns", + url: "https://leetcode.com/discuss/general-discussion/458695/dynamic-programming-patterns", + }, + { + name: "NeetCode DP Playlist", + url: "https://www.youtube.com/playlist?list=PLot-Xpze53ldVwtstag2TL4HQhAnC8m4D", + }, ], }, { @@ -826,13 +1181,28 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Medium", problems: 40, subtopics: [ - "Heaps", "Hash Tables", "Bit Manipulation", "Greedy Algorithms", "Backtracking", - "Math & Number Theory", "Sorting Algorithms", "Binary Search Variants" + "Heaps", + "Hash Tables", + "Bit Manipulation", + "Greedy Algorithms", + "Backtracking", + "Math & Number Theory", + "Sorting Algorithms", + "Binary Search Variants", ], resources: [ - { name: "Heap Guide", url: "https://www.geeksforgeeks.org/heap-data-structure/" }, - { name: "Backtracking Patterns", url: "https://leetcode.com/tag/backtracking/" }, - { name: "Princeton Algorithms", url: "https://algs4.cs.princeton.edu/home/" } + { + name: "Heap Guide", + url: "https://www.geeksforgeeks.org/heap-data-structure/", + }, + { + name: "Backtracking Patterns", + url: "https://leetcode.com/tag/backtracking/", + }, + { + name: "Princeton Algorithms", + url: "https://algs4.cs.princeton.edu/home/", + }, ], }, ], @@ -847,13 +1217,24 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Medium", problems: 15, subtopics: [ - "Scalability", "Load Balancing", "Caching", "Database Sharding", "CAP Theorem", - "Consistency Models", "Fault Tolerance" + "Scalability", + "Load Balancing", + "Caching", + "Database Sharding", + "CAP Theorem", + "Consistency Models", + "Fault Tolerance", ], resources: [ - { name: "System Design Primer", url: "https://github.com/donnemartin/system-design-primer" }, + { + name: "System Design Primer", + url: "https://github.com/donnemartin/system-design-primer", + }, { name: "High Scalability", url: "http://highscalability.com/" }, - { name: "ByteByteGo YouTube", url: "https://www.youtube.com/c/ByteByteGo" } + { + name: "ByteByteGo YouTube", + url: "https://www.youtube.com/c/ByteByteGo", + }, ], }, { @@ -861,12 +1242,20 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Hard", problems: 20, subtopics: [ - "URL Shortener", "Chat System", "News Feed", "Search Engine", "Video Streaming", - "Payment Gateway", "Social Media Platform" + "URL Shortener", + "Chat System", + "News Feed", + "Search Engine", + "Video Streaming", + "Payment Gateway", + "Social Media Platform", ], resources: [ - { name: "Grokking System Design", url: "https://educative.io/courses/grokking-the-system-design-interview" }, - { name: "System Design Interview", url: "https://bytebytego.com/" } + { + name: "Grokking System Design", + url: "https://educative.io/courses/grokking-the-system-design-interview", + }, + { name: "System Design Interview", url: "https://bytebytego.com/" }, ], }, { @@ -874,19 +1263,29 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Medium", problems: 15, subtopics: [ - "Monitoring & Logging", "Event-driven Architecture", "Message Queues", "Content Delivery Networks", - "Security in System Design" + "Monitoring & Logging", + "Event-driven Architecture", + "Message Queues", + "Content Delivery Networks", + "Security in System Design", ], resources: [ - { name: "Grafana Monitoring", url: "https://grafana.com/oss/grafana/" }, - { name: "Event-driven Design", url: "https://microservices.io/patterns/rel/async-messaging.html" } + { + name: "Grafana Monitoring", + url: "https://grafana.com/oss/grafana/", + }, + { + name: "Event-driven Design", + url: "https://microservices.io/patterns/rel/async-messaging.html", + }, ], }, ], }, { category: "๐Ÿ—„๏ธ Database Design", - description: "Learn relational & NoSQL databases for real-world applications", + description: + "Learn relational & NoSQL databases for real-world applications", totalProblems: 70, subcategories: [ { @@ -894,12 +1293,20 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Easy", problems: 20, subtopics: [ - "SELECT Queries", "Joins", "Indexes", "Aggregate Functions", "Stored Procedures", - "Views", "Transactions" + "SELECT Queries", + "Joins", + "Indexes", + "Aggregate Functions", + "Stored Procedures", + "Views", + "Transactions", ], resources: [ { name: "SQLBolt", url: "https://sqlbolt.com/" }, - { name: "LeetCode Database", url: "https://leetcode.com/problemset/database/" } + { + name: "LeetCode Database", + url: "https://leetcode.com/problemset/database/", + }, ], }, { @@ -907,12 +1314,16 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Medium", problems: 20, subtopics: [ - "Document Stores", "Key-Value Stores", "Column Stores", "Graph Databases", - "Sharding", "Replication" + "Document Stores", + "Key-Value Stores", + "Column Stores", + "Graph Databases", + "Sharding", + "Replication", ], resources: [ { name: "MongoDB Basics", url: "https://www.mongodb.com/basics" }, - { name: "Cassandra Guide", url: "https://cassandra.apache.org/" } + { name: "Cassandra Guide", url: "https://cassandra.apache.org/" }, ], }, { @@ -920,12 +1331,22 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Hard", problems: 15, subtopics: [ - "Normalization", "Denormalization", "Indexing Strategies", "Partitioning", - "Data Warehousing", "Query Optimization" + "Normalization", + "Denormalization", + "Indexing Strategies", + "Partitioning", + "Data Warehousing", + "Query Optimization", ], resources: [ - { name: "Database Normalization", url: "https://www.guru99.com/database-normalization.html" }, - { name: "AWS Data Warehousing", url: "https://aws.amazon.com/redshift/" } + { + name: "Database Normalization", + url: "https://www.guru99.com/database-normalization.html", + }, + { + name: "AWS Data Warehousing", + url: "https://aws.amazon.com/redshift/", + }, ], }, { @@ -933,11 +1354,17 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Medium", problems: 15, subtopics: [ - "ACID Properties", "Database Security", "Backup & Recovery", "OLAP vs OLTP", - "Temporal Databases" + "ACID Properties", + "Database Security", + "Backup & Recovery", + "OLAP vs OLTP", + "Temporal Databases", ], resources: [ - { name: "Transactions in SQL", url: "https://www.postgresql.org/docs/current/tutorial-transactions.html" } + { + name: "Transactions in SQL", + url: "https://www.postgresql.org/docs/current/tutorial-transactions.html", + }, ], }, ], @@ -952,12 +1379,20 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Easy", problems: 15, subtopics: [ - "HTTP Methods", "CRUD Operations", "Error Handling", "Versioning", "Rate Limiting", - "Pagination", "CORS" + "HTTP Methods", + "CRUD Operations", + "Error Handling", + "Versioning", + "Rate Limiting", + "Pagination", + "CORS", ], resources: [ { name: "RESTful API Tutorial", url: "https://restfulapi.net/" }, - { name: "Postman Learning Center", url: "https://learning.postman.com/" } + { + name: "Postman Learning Center", + url: "https://learning.postman.com/", + }, ], }, { @@ -965,12 +1400,23 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Medium", problems: 15, subtopics: [ - "Queries", "Mutations", "Subscriptions", "Schemas", "Resolvers", - "Apollo Server", "GraphQL Security" + "Queries", + "Mutations", + "Subscriptions", + "Schemas", + "Resolvers", + "Apollo Server", + "GraphQL Security", ], resources: [ - { name: "GraphQL Official Docs", url: "https://graphql.org/learn/" }, - { name: "Apollo GraphQL", url: "https://www.apollographql.com/docs/" } + { + name: "GraphQL Official Docs", + url: "https://graphql.org/learn/", + }, + { + name: "Apollo GraphQL", + url: "https://www.apollographql.com/docs/", + }, ], }, { @@ -978,12 +1424,17 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Hard", problems: 15, subtopics: [ - "Service Discovery", "API Gateway", "Authentication", "Authorization", "JWT", - "OAuth2", "gRPC" + "Service Discovery", + "API Gateway", + "Authentication", + "Authorization", + "JWT", + "OAuth2", + "gRPC", ], resources: [ { name: "Microservices Guide", url: "https://microservices.io/" }, - { name: "JWT Introduction", url: "https://jwt.io/introduction/" } + { name: "JWT Introduction", url: "https://jwt.io/introduction/" }, ], }, { @@ -991,25 +1442,31 @@ const InterviewPrepPage: React.FC = () => { difficulty: "Medium", problems: 15, subtopics: [ - "API Testing", "OpenAPI/Swagger", "Async APIs", "WebSockets", "gRPC Streaming", - "API Performance Tuning" + "API Testing", + "OpenAPI/Swagger", + "Async APIs", + "WebSockets", + "gRPC Streaming", + "API Performance Tuning", ], resources: [ - { name: "OpenAPI Specification", url: "https://swagger.io/specification/" }, - { name: "gRPC Basics", url: "https://grpc.io/docs/what-is-grpc/" } + { + name: "OpenAPI Specification", + url: "https://swagger.io/specification/", + }, + { name: "gRPC Basics", url: "https://grpc.io/docs/what-is-grpc/" }, ], }, ], }, ]; - return ( - { mockInterviewQuestions={mockInterviewQuestions} /> - ) -} + ); +}; -function InterviewPrepContent({ - activeTab, - setActiveTab, - expandedCategories, - toggleCategory, - showTips, - toggleTips, - showQuestions, +function InterviewPrepContent({ + activeTab, + setActiveTab, + expandedCategories, + toggleCategory, + showTips, + toggleTips, + showQuestions, toggleQuestions, behavioralQuestions, technicalResources, practicePlatforms, companyTips, - mockInterviewQuestions + mockInterviewQuestions, }: { activeTab: string; - setActiveTab: React.Dispatch>; + setActiveTab: React.Dispatch< + React.SetStateAction< + "overview" | "technical" | "behavioral" | "companies" | "practice" + > + >; expandedCategories: { [key: string]: boolean }; toggleCategory: (categoryIndex: number) => void; showTips: { [key: number]: boolean }; @@ -1070,12 +1531,14 @@ function InterviewPrepContent({ /> -
+
{/* Hero Section */} Ace Your Next Interview - - Master technical challenges and behavioral questions with our comprehensive interview preparation platform + + Master technical challenges and behavioral questions with our + comprehensive interview preparation platform - +
{/* Tab Content */} -
+
{/* Overview Tab */} {activeTab === "overview" && (
- + Ready to Land Your Dream Job? - Join thousands of developers who have successfully prepared for interviews with recode hive + Join thousands of developers who have successfully prepared for + interviews with recode hive - +
- ) + ); } -export default InterviewPrepPage +export default InterviewPrepPage; diff --git a/src/pages/merch/index.tsx b/src/pages/merch/index.tsx index 9c15096f..d88e70bf 100644 --- a/src/pages/merch/index.tsx +++ b/src/pages/merch/index.tsx @@ -87,9 +87,12 @@ export default function MerchPage(): ReactNode { const [selectedCategory, setSelectedCategory] = useState("all"); const [sortBy, setSortBy] = useState("featured"); const [products, setProducts] = useState(sampleProducts); - const [filteredProducts, setFilteredProducts] = useState(sampleProducts); + const [filteredProducts, setFilteredProducts] = + useState(sampleProducts); const [cartOpen, setCartOpen] = useState(false); - const [cartItems, setCartItems] = useState>([]); + const [cartItems, setCartItems] = useState< + Array + >([]); const [loading, setLoading] = useState(true); // Fetch products from Shopify on mount @@ -97,44 +100,49 @@ export default function MerchPage(): ReactNode { async function fetchShopifyProducts() { try { if (isShopifyConfigured()) { - console.log('Fetching products from Shopify...'); + console.log("Fetching products from Shopify..."); const shopifyProducts = await getProducts(20); - + if (shopifyProducts && shopifyProducts.length > 0) { // Convert Shopify products to our Product interface const formattedProducts: Product[] = shopifyProducts.map((p) => { - const imageUrl = p.images.edges[0]?.node.url || ''; + const imageUrl = p.images.edges[0]?.node.url || ""; const price = parseFloat(p.priceRange.minVariantPrice.amount); - + return { id: p.id, title: p.title, - description: p.description || '', + description: p.description || "", price: price, image: imageUrl, - category: 'accessories', // Default category, you can use Shopify tags + category: "accessories", // Default category, you can use Shopify tags shopifyId: p.id, variants: { - size: p.variants.edges.map(v => v.node.title).filter(t => t !== 'Default Title'), + size: p.variants.edges + .map((v) => v.node.title) + .filter((t) => t !== "Default Title"), }, }; }); - - console.log('Loaded products from Shopify:', formattedProducts.length); + + console.log( + "Loaded products from Shopify:", + formattedProducts.length, + ); setProducts(formattedProducts); setFilteredProducts(formattedProducts); } else { - console.log('No products found in Shopify, using sample products'); + console.log("No products found in Shopify, using sample products"); setProducts(sampleProducts); setFilteredProducts(sampleProducts); } } else { - console.log('Shopify not configured, using sample products'); + console.log("Shopify not configured, using sample products"); setProducts(sampleProducts); setFilteredProducts(sampleProducts); } } catch (error) { - console.error('Error fetching products from Shopify:', error); + console.error("Error fetching products from Shopify:", error); // Fallback to sample products on error setProducts(sampleProducts); setFilteredProducts(sampleProducts); @@ -142,7 +150,7 @@ export default function MerchPage(): ReactNode { setLoading(false); } } - + fetchShopifyProducts(); }, []); @@ -179,7 +187,9 @@ export default function MerchPage(): ReactNode { const existing = prev.find((item) => item.id === product.id); if (existing) { return prev.map((item) => - item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item + item.id === product.id + ? { ...item, quantity: item.quantity + 1 } + : item, ); } return [...prev, { ...product, quantity: 1 }]; @@ -197,7 +207,9 @@ export default function MerchPage(): ReactNode { return; } setCartItems((prev) => - prev.map((item) => (item.id === productId ? { ...item, quantity } : item)) + prev.map((item) => + item.id === productId ? { ...item, quantity } : item, + ), ); }; @@ -217,25 +229,31 @@ export default function MerchPage(): ReactNode { animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }} > -

+

Official Recode Merch

- Wear your code pride! Premium quality apparel and accessories for developers - who love open source. + Wear your code pride! Premium quality apparel and accessories for + developers who love open source.

- 100% + + 100% + Quality
- ๐ŸŒ + + ๐ŸŒ + Worldwide Shipping
- ๐Ÿ’š + + ๐Ÿ’š + Eco-Friendly
@@ -253,8 +271,13 @@ export default function MerchPage(): ReactNode { {/* Products Grid */}
{loading ? ( -
-

+

+

Loading products...

@@ -279,7 +302,9 @@ export default function MerchPage(): ReactNode { aria-label="Open shopping cart" > - {cartItemCount > 0 && {cartItemCount}} + {cartItemCount > 0 && ( + {cartItemCount} + )} {/* Info Section */} diff --git a/src/pages/merch/merch.css b/src/pages/merch/merch.css index 9df34a5e..9ab74d3e 100644 --- a/src/pages/merch/merch.css +++ b/src/pages/merch/merch.css @@ -122,7 +122,9 @@ background: var(--ifm-card-background-color); border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: + transform 0.3s ease, + box-shadow 0.3s ease; text-align: center; } diff --git a/src/pages/our-sponsors/SponsorCard/index.tsx b/src/pages/our-sponsors/SponsorCard/index.tsx index 30d5496c..c45d1b4f 100644 --- a/src/pages/our-sponsors/SponsorCard/index.tsx +++ b/src/pages/our-sponsors/SponsorCard/index.tsx @@ -1,6 +1,6 @@ -import { Sponsor } from '@site/src/database/sponsors'; -import React from 'react'; -import { FaGithub, FaLinkedin, FaInstagram } from 'react-icons/fa'; +import { Sponsor } from "@site/src/database/sponsors"; +import React from "react"; +import { FaGithub, FaLinkedin, FaInstagram } from "react-icons/fa"; import { FaXTwitter } from "react-icons/fa6"; const SponsorCard: React.FC = ({ @@ -20,13 +20,49 @@ const SponsorCard: React.FC = ({

{name}

{description}

- {github && } - {linkedin && } - {twitter && } - {instagram && } + {github && ( + + + + )} + {linkedin && ( + + + + )} + {twitter && ( + + + + )} + {instagram && ( + + + + )}
); }; -export default SponsorCard; \ No newline at end of file +export default SponsorCard; diff --git a/src/pages/our-sponsors/Sponsors.css b/src/pages/our-sponsors/Sponsors.css index 602c73c0..6c7fc792 100644 --- a/src/pages/our-sponsors/Sponsors.css +++ b/src/pages/our-sponsors/Sponsors.css @@ -1,118 +1,120 @@ .sponsor-page { - padding: 2rem; - max-width: 1200px; - margin: 0 auto; + padding: 2rem; + max-width: 1200px; + margin: 0 auto; } -[data-theme='dark'] .sponsor-page { - background: var(--dark-bg-primary); - color: var(--dark-text-primary); +[data-theme="dark"] .sponsor-page { + background: var(--dark-bg-primary); + color: var(--dark-text-primary); } .sponsor-page .sponsor-header { - text-align: center; - margin-bottom: 2rem; + text-align: center; + margin-bottom: 2rem; } .TitleText { - margin-top: 1rem; - background: linear-gradient(90deg, - rgb(152 0 255) 0%, - rgb(246 41 41) 50%, - rgb(255 169 8) 100%); - background-clip: text; - -webkit-text-fill-color: transparent; + margin-top: 1rem; + background: linear-gradient( + 90deg, + rgb(152 0 255) 0%, + rgb(246 41 41) 50%, + rgb(255 169 8) 100% + ); + background-clip: text; + -webkit-text-fill-color: transparent; } /* Tabs Styling */ .tabs { - display: flex; - justify-content: center; - margin-bottom: 2rem; - border-bottom: 1px solid #e2e8f0; - padding-bottom: 0.5rem; + display: flex; + justify-content: center; + margin-bottom: 2rem; + border-bottom: 1px solid #e2e8f0; + padding-bottom: 0.5rem; } -[data-theme='dark'] .tabs { - border-bottom-color: var(--dark-border); +[data-theme="dark"] .tabs { + border-bottom-color: var(--dark-border); } .tab-button { - padding: 0.75rem 1.5rem; - margin: 0 0.5rem; - border: none; - background: none; - font-size: 1.1rem; - font-weight: 600; - color: #6b7280; - cursor: pointer; - transition: all 0.3s ease; - position: relative; - outline: none; - display: flex; - align-items: center; - gap: 8px; + padding: 0.75rem 1.5rem; + margin: 0 0.5rem; + border: none; + background: none; + font-size: 1.1rem; + font-weight: 600; + color: #6b7280; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + outline: none; + display: flex; + align-items: center; + gap: 8px; } -[data-theme='dark'] .tab-button { - color: var(--dark-text-secondary); +[data-theme="dark"] .tab-button { + color: var(--dark-text-secondary); } -[data-theme='dark'] .tab-button.active:hover { - color: white; +[data-theme="dark"] .tab-button.active:hover { + color: white; } .tab-button.active { - color: #4f46e5; + color: #4f46e5; } .tab-badge { - background-color: #e0e7ff; - color: #4f46e5; - border-radius: 9999px; - font-size: 0.75rem; - font-weight: 600; - padding: 2px 8px; - min-width: 24px; - text-align: center; - transition: all 0.2s ease; + background-color: #e0e7ff; + color: #4f46e5; + border-radius: 9999px; + font-size: 0.75rem; + font-weight: 600; + padding: 2px 8px; + min-width: 24px; + text-align: center; + transition: all 0.2s ease; } .tab-button.active .tab-badge { - background-color: #4f46e5; - color: white; + background-color: #4f46e5; + color: white; } .no-sponsors { - grid-column: 1 / -1; - text-align: center; - padding: 2rem; - color: #6b7280; - font-size: 1.1rem; + grid-column: 1 / -1; + text-align: center; + padding: 2rem; + color: #6b7280; + font-size: 1.1rem; } .tab-button::after { - content: ''; - position: absolute; - bottom: -0.5rem; - left: 0; - width: 0; - height: 3px; - background: linear-gradient(90deg, #4f46e5, #7c3aed); - transition: width 0.3s ease; + content: ""; + position: absolute; + bottom: -0.5rem; + left: 0; + width: 0; + height: 3px; + background: linear-gradient(90deg, #4f46e5, #7c3aed); + transition: width 0.3s ease; } .tab-button.active::after { - width: 100%; + width: 100%; } .tab-content { - display: none; - animation: fadeIn 0.5s ease; + display: none; + animation: fadeIn 0.5s ease; } .tab-content.active { - display: block; + display: block; } .sponsor-page .sponsors-list { @@ -123,116 +125,119 @@ } .sponsor-page .sponsor-card { - position: relative; - border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 20px; - background: #fff; - text-align: center; - transition: transform 0.3s ease, box-shadow 0.3s ease; - display: flex; - flex-direction: column; - align-items: center; + position: relative; + border: 1px solid #e2e8f0; + border-radius: 12px; + padding: 20px; + background: #fff; + text-align: center; + transition: + transform 0.3s ease, + box-shadow 0.3s ease; + display: flex; + flex-direction: column; + align-items: center; } -[data-theme='dark'] .sponsor-page .sponsor-card { - background: var(--dark-card-bg); - border-color: var(--dark-border); +[data-theme="dark"] .sponsor-page .sponsor-card { + background: var(--dark-card-bg); + border-color: var(--dark-border); } .sponsor-page .sponsor-card::before { - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - transition: left 0.3s ease-in-out; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + transition: left 0.3s ease-in-out; } .sponsor-page .sponsor-card:hover::before { - left: 100%; + left: 100%; } .sponsor-page .sponsor-card:hover { - transform: translateY(-5px); - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); + transform: translateY(-5px); + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); } .sponsor-page .sponsor-card img { - width: 100%; - height: 100%; - object-fit: cover; + width: 100%; + height: 100%; + object-fit: cover; } .sponsor-page .sponsor-card .avatar-wrapper { - width: 110px; - height: 110px; - margin-bottom: 12px; - border-radius: 50%; - overflow: hidden; - box-shadow: 0 0 0 4px #f9fafb; + width: 110px; + height: 110px; + margin-bottom: 12px; + border-radius: 50%; + overflow: hidden; + box-shadow: 0 0 0 4px #f9fafb; } .sponsor-page .sponsor-card .sponsor-name { - font-size: 1.2rem; - font-weight: 600; - margin-bottom: 4px; - color: #111827; + font-size: 1.2rem; + font-weight: 600; + margin-bottom: 4px; + color: #111827; } -[data-theme='dark'] .sponsor-page .sponsor-card .sponsor-name { - color: var(--dark-text-primary); +[data-theme="dark"] .sponsor-page .sponsor-card .sponsor-name { + color: var(--dark-text-primary); } .sponsor-page .sponsor-card .sponsor-desc { - font-size: 0.95rem; - color: #4b5563; - margin-bottom: 10px; - line-height: 1.4; + font-size: 0.95rem; + color: #4b5563; + margin-bottom: 10px; + line-height: 1.4; } -[data-theme='dark'] .sponsor-page .sponsor-card .sponsor-desc { - color: var(--dark-text-secondary); +[data-theme="dark"] .sponsor-page .sponsor-card .sponsor-desc { + color: var(--dark-text-secondary); } .sponsor-page .sponsor-card .social-links { - display: flex; - justify-content: center; - gap: 10px; - margin-top: 8px; + display: flex; + justify-content: center; + gap: 10px; + margin-top: 8px; } .sponsor-page .sponsor-card .social-links a { - display: flex; - width: 36px; - height: 36px; - border-radius: 50%; - color: #fff; - background-color: var(--ifm-color-primary); - align-items: center; - justify-content: center; - transition: background-color 0.3s, transform 0.3s; + display: flex; + width: 36px; + height: 36px; + border-radius: 50%; + color: #fff; + background-color: var(--ifm-color-primary); + align-items: center; + justify-content: center; + transition: + background-color 0.3s, + transform 0.3s; } - .sponsor-page .sponsor-card .social-links a:hover { - transform: scale(1.1); + transform: scale(1.1); } .sponsor-page .sponsor-card .social-links a.github:hover { - background-color: #333; + background-color: #333; } .sponsor-page .sponsor-card .social-links a.linkedin:hover { - background-color: #0073b1; + background-color: #0073b1; } .sponsor-page .sponsor-card .social-links a.twitter:hover { - background-color: #1da1f2; + background-color: #1da1f2; } .sponsor-page .sponsor-card .social-links a.instagram:hover { - background-color: #e4405f; + background-color: #e4405f; } .sponsor-page .sponsor-card.empty-card { @@ -248,171 +253,188 @@ justify-content: center; min-height: 200px; border-radius: 12px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); + box-shadow: + 0 4px 6px -1px rgba(0, 0, 0, 0.05), + 0 2px 4px -1px rgba(0, 0, 0, 0.03); position: relative; overflow: hidden; } .sponsor-page .sponsor-card.empty-card:hover { transform: translateY(-3px); - box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + box-shadow: + 0 10px 25px -5px rgba(79, 70, 229, 0.1), + 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .sponsor-page .sponsor-card.empty-card::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 300%; - height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.4), - transparent - ); - transition: 0.5s; - z-index: 1; + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 300%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.4), + transparent + ); + transition: 0.5s; + z-index: 1; } .sponsor-page .sponsor-card.empty-card:hover::before { - left: 100%; + left: 100%; } .sponsor-page .sponsor-card.empty-card:hover { - transform: translateY(-5px); - box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + transform: translateY(-5px); + box-shadow: + 0 10px 25px -5px rgba(0, 0, 0, 0.1), + 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .sponsor-page .sponsor-card.empty-card h3 { font-size: 1.1rem; - font-weight: 600; - color: #4f46e5; - margin-top: 1rem; - z-index: 2; + font-weight: 600; + color: #4f46e5; + margin-top: 1rem; + z-index: 2; } .sponsor-page .sponsor-card.empty-card .join-icon { - font-size: 2rem; - color: #4f46e5; - transition: transform 0.3s ease; - z-index: 2; - margin: 0; - padding: 0; + font-size: 2rem; + color: #4f46e5; + transition: transform 0.3s ease; + z-index: 2; + margin: 0; + padding: 0; } .sponsor-page .scanner-popup { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; } .scanner-content { - position: relative; - padding: 2rem; - border-radius: 8px; - text-align: center; - max-width: 400px; - width: 100%; - background: white; + position: relative; + padding: 2rem; + border-radius: 8px; + text-align: center; + max-width: 400px; + width: 100%; + background: white; } -[data-theme='dark'] .scanner-content { - background: var(--dark-bg-secondary); - color: var(--dark-text-primary); +[data-theme="dark"] .scanner-content { + background: var(--dark-bg-secondary); + color: var(--dark-text-primary); } .sponsors-section { - margin-top: 2rem; + margin-top: 2rem; } .support-links { - margin-top: 5rem; - display: flex; - justify-content: center; - gap: 16px; - align-items: center; + margin-top: 5rem; + display: flex; + justify-content: center; + gap: 16px; + align-items: center; } .scanner-button { - background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); - color: white; - padding: 12px 28px 12px 28px; /* Fixed padding to prevent jumping */ - border-radius: 8px; - cursor: pointer; - border: none; - font-size: 1rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; - box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3), 0 2px 4px -1px rgba(79, 70, 229, 0.2); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - position: relative; - overflow: hidden; - min-width: 200px; - text-align: center; + background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); + color: white; + padding: 12px 28px 12px 28px; /* Fixed padding to prevent jumping */ + border-radius: 8px; + cursor: pointer; + border: none; + font-size: 1rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + box-shadow: + 0 4px 6px -1px rgba(79, 70, 229, 0.3), + 0 2px 4px -1px rgba(79, 70, 229, 0.2); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + position: relative; + overflow: hidden; + min-width: 200px; + text-align: center; } .scanner-button::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); - transition: 0.5s; - z-index: 1; + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + transition: 0.5s; + z-index: 1; } .scanner-button > * { - position: relative; - z-index: 2; + position: relative; + z-index: 2; } .scanner-button:hover { - transform: translateY(-2px); - box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4), 0 4px 6px -2px rgba(79, 70, 229, 0.2); + transform: translateY(-2px); + box-shadow: + 0 10px 15px -3px rgba(79, 70, 229, 0.4), + 0 4px 6px -2px rgba(79, 70, 229, 0.2); } .scanner-button:hover::before { - left: 100%; + left: 100%; } .scanner-button:active { - transform: translateY(0); - box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3), 0 2px 4px -1px rgba(79, 70, 229, 0.2); + transform: translateY(0); + box-shadow: + 0 4px 6px -1px rgba(79, 70, 229, 0.3), + 0 2px 4px -1px rgba(79, 70, 229, 0.2); } .close-button { - position: absolute; - top: 12px; - right: 12px; - background: transparent; - border: none; - color: #444; - cursor: pointer; - padding: 4px; - transition: color 0.2s; + position: absolute; + top: 12px; + right: 12px; + background: transparent; + border: none; + color: #444; + cursor: pointer; + padding: 4px; + transition: color 0.2s; } .close-button:hover { - color: #000; + color: #000; } @media (max-width: 600px) { - .sponsor-card { - width: 100%; - } -} \ No newline at end of file + .sponsor-card { + width: 100%; + } +} diff --git a/src/pages/our-sponsors/index.tsx b/src/pages/our-sponsors/index.tsx index 15653ba4..75818c20 100644 --- a/src/pages/our-sponsors/index.tsx +++ b/src/pages/our-sponsors/index.tsx @@ -2,33 +2,36 @@ import React, { useState, useRef, useEffect } from "react"; import SponsorCard from "./SponsorCard"; import "./Sponsors.css"; import Layout from "@theme/Layout"; -import { FaPlusCircle, FaTimes } from 'react-icons/fa'; +import { FaPlusCircle, FaTimes } from "react-icons/fa"; import Head from "@docusaurus/Head"; import sponsors from "@site/src/database/sponsors"; -import { useHistory } from '@docusaurus/router'; +import { useHistory } from "@docusaurus/router"; -type TabType = 'current' | 'past'; +type TabType = "current" | "past"; const OurSponsors: React.FC = () => { const [showScanner, setShowScanner] = useState(false); - const [activeTab, setActiveTab] = useState('current'); + const [activeTab, setActiveTab] = useState("current"); const modalRef = useRef(null); const history = useHistory(); -// Filter for current sponsors (exclude isWeSponsor) + // Filter for current sponsors (exclude isWeSponsor) const currentSponsors = sponsors.filter( - (s) => !s.isPastSponsor && !s.isWeSponsor); - const pastSponsors = sponsors.filter(s => s.isPastSponsor); + (s) => !s.isPastSponsor && !s.isWeSponsor, + ); + const pastSponsors = sponsors.filter((s) => s.isPastSponsor); - // Filter for people we sponsor + // Filter for people we sponsor const weSponsorPeople = sponsors.filter((s) => s.isWeSponsor); const handleJoinSponsor = () => setShowScanner(true); const handlePaymentSuccess = () => { setShowScanner(false); - alert("Thanks, we will redirect to Github Sponsors page, upon sponsoring you will be added to our sponsors list."); - window.location.href = 'https://github.com/sponsors/sanjay-kv?o=esb'; + alert( + "Thanks, we will redirect to Github Sponsors page, upon sponsoring you will be added to our sponsors list.", + ); + window.location.href = "https://github.com/sponsors/sanjay-kv?o=esb"; }; const handleCloseModal = () => setShowScanner(false); @@ -44,7 +47,7 @@ const OurSponsors: React.FC = () => { const { signal } = controller; const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === 'Escape') handleCloseModal(); + if (e.key === "Escape") handleCloseModal(); }; const handleClickOutside = (e: MouseEvent) => { @@ -53,8 +56,8 @@ const OurSponsors: React.FC = () => { } }; - document.addEventListener('keydown', handleKeyDown, { signal }); - document.addEventListener('mousedown', handleClickOutside, { signal }); + document.addEventListener("keydown", handleKeyDown, { signal }); + document.addEventListener("mousedown", handleClickOutside, { signal }); return () => controller.abort(); }, [showScanner]); @@ -72,23 +75,28 @@ const OurSponsors: React.FC = () => {

Our Valued Sponsors

- Join us in empowering the open-source community through your generous support. Your sponsorship directly fuels innovation by enabling developers to create valuable resources and maintain our growing knowledge base. -

- We deeply appreciate your commitment to advancing open-source technology and education. + Join us in empowering the open-source community through your + generous support. Your sponsorship directly fuels innovation by + enabling developers to create valuable resources and maintain our + growing knowledge base. +
+
+ We deeply appreciate your commitment to advancing open-source + technology and education.

-
+
-

Current Sponsors

+

+ Current Sponsors +

{currentSponsors.length > 0 ? ( currentSponsors.map((sponsor) => ( @@ -107,10 +119,13 @@ const OurSponsors: React.FC = () => { )) ) : (
-

We're actively seeking visionary sponsors to partner with us in supporting the open-source community.

+

+ We're actively seeking visionary sponsors to partner with + us in supporting the open-source community. +

)} - +
{

Join us - - + +
- {pastSponsors.length > 0 && ( <> -

Past Sponsors

+

+ Past Sponsors +

{pastSponsors.map((sponsor) => ( - + ))}
@@ -151,7 +181,9 @@ const OurSponsors: React.FC = () => {
-
+
{weSponsorPeople.length > 0 ? (
{weSponsorPeople.map((sponsor) => ( @@ -177,23 +209,46 @@ const OurSponsors: React.FC = () => {

Become a Valued Partner

-

Join our mission to advance open-source innovation and education through your sponsorship

+

+ Join our mission to advance open-source innovation and education + through your sponsorship +

- @@ -209,7 +264,6 @@ const OurSponsors: React.FC = () => { width="114" style={{ border: 0, borderRadius: "6px" }} /> -
diff --git a/src/pages/podcasts/details.css b/src/pages/podcasts/details.css index 0952fc77..d8b2b461 100644 --- a/src/pages/podcasts/details.css +++ b/src/pages/podcasts/details.css @@ -3,7 +3,14 @@ /* CSS Variables for Theme Management */ :root { /* Dark Theme Variables (Default) */ - --details-bg-primary: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%); + --details-bg-primary: linear-gradient( + 135deg, + #0f0f23 0%, + #1a1a2e 25%, + #16213e 50%, + #0f3460 75%, + #533483 100% + ); --details-bg-card: rgba(255, 255, 255, 0.05); --details-bg-card-hover: rgba(255, 255, 255, 0.08); --details-bg-blur: rgba(255, 255, 255, 0.05); @@ -19,13 +26,20 @@ --details-shadow: rgba(0, 0, 0, 0.2); --details-shadow-hover: rgba(0, 0, 0, 0.3); --details-glow: rgba(102, 126, 234, 0.4); - --details-spotify: #1DB954; + --details-spotify: #1db954; --details-spotify-hover: #1ed760; } /* Light Theme Variables */ -[data-theme='light'] { - --details-bg-primary: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%); +[data-theme="light"] { + --details-bg-primary: linear-gradient( + 135deg, + #f8fafc 0%, + #e2e8f0 25%, + #cbd5e1 50%, + #94a3b8 75%, + #64748b 100% + ); --details-bg-card: rgba(255, 255, 255, 0.9); --details-bg-card-hover: rgba(255, 255, 255, 0.95); --details-bg-blur: rgba(255, 255, 255, 0.8); @@ -41,13 +55,20 @@ --details-shadow: rgba(0, 0, 0, 0.1); --details-shadow-hover: rgba(0, 0, 0, 0.15); --details-glow: rgba(79, 70, 229, 0.3); - --details-spotify: #1DB954; + --details-spotify: #1db954; --details-spotify-hover: #1ed760; } /* Force theme variables on html element */ -html[data-theme='light'] { - --details-bg-primary: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%); +html[data-theme="light"] { + --details-bg-primary: linear-gradient( + 135deg, + #f8fafc 0%, + #e2e8f0 25%, + #cbd5e1 50%, + #94a3b8 75%, + #64748b 100% + ); --details-bg-card: rgba(255, 255, 255, 0.9); --details-bg-card-hover: rgba(255, 255, 255, 0.95); --details-bg-blur: rgba(255, 255, 255, 0.8); @@ -84,7 +105,8 @@ html[data-theme='light'] { } @keyframes floatAnimation { - 0%, 100% { + 0%, + 100% { transform: translateY(0px); } 50% { @@ -93,7 +115,8 @@ html[data-theme='light'] { } @keyframes pulseGlow { - 0%, 100% { + 0%, + 100% { box-shadow: 0 0 0 0 var(--details-glow); } 50% { @@ -102,14 +125,27 @@ html[data-theme='light'] { } @keyframes backgroundShift { - 0%, 100% { transform: translateX(0px) translateY(0px) scale(1); } - 33% { transform: translateX(20px) translateY(-15px) scale(1.01); } - 66% { transform: translateX(-15px) translateY(20px) scale(0.99); } + 0%, + 100% { + transform: translateX(0px) translateY(0px) scale(1); + } + 33% { + transform: translateX(20px) translateY(-15px) scale(1.01); + } + 66% { + transform: translateX(-15px) translateY(20px) scale(0.99); + } } /* Main Container */ .enhanced-details-container { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-family: + "Inter", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + sans-serif; background: var(--details-bg-primary); color: var(--details-text-secondary); min-height: 100vh; @@ -120,26 +156,50 @@ html[data-theme='light'] { /* Background Effects */ .enhanced-details-container::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: - radial-gradient(circle at 30% 20%, rgba(120, 119, 198, 0.08) 0%, transparent 60%), - radial-gradient(circle at 70% 80%, rgba(255, 119, 198, 0.06) 0%, transparent 60%), - radial-gradient(circle at 20% 60%, rgba(120, 219, 255, 0.04) 0%, transparent 60%); + radial-gradient( + circle at 30% 20%, + rgba(120, 119, 198, 0.08) 0%, + transparent 60% + ), + radial-gradient( + circle at 70% 80%, + rgba(255, 119, 198, 0.06) 0%, + transparent 60% + ), + radial-gradient( + circle at 20% 60%, + rgba(120, 219, 255, 0.04) 0%, + transparent 60% + ); animation: backgroundShift 20s ease-in-out infinite; pointer-events: none; } /* Light theme background effects */ -[data-theme='light'] .enhanced-details-container::before { +[data-theme="light"] .enhanced-details-container::before { background: - radial-gradient(circle at 30% 20%, rgba(79, 70, 229, 0.05) 0%, transparent 60%), - radial-gradient(circle at 70% 80%, rgba(124, 58, 237, 0.04) 0%, transparent 60%), - radial-gradient(circle at 20% 60%, rgba(236, 72, 153, 0.03) 0%, transparent 60%); + radial-gradient( + circle at 30% 20%, + rgba(79, 70, 229, 0.05) 0%, + transparent 60% + ), + radial-gradient( + circle at 70% 80%, + rgba(124, 58, 237, 0.04) 0%, + transparent 60% + ), + radial-gradient( + circle at 20% 60%, + rgba(236, 72, 153, 0.03) 0%, + transparent 60% + ); } /* Navigation Header */ @@ -207,11 +267,11 @@ html[data-theme='light'] { } .nav-action-button:active { - box-shadow: 0 1px 8px rgba(40,50,70,0.06); + box-shadow: 0 1px 8px rgba(40, 50, 70, 0.06); } .nav-action-button.favorite.favorited { - color: #ff4d4d; /* red heart */ + color: #ff4d4d; /* red heart */ background: #fff0f0; /* soft pink background when liked */ } @@ -257,7 +317,11 @@ html[data-theme='light'] { align-items: center; gap: 8px; padding: 8px 16px; - background: linear-gradient(135deg, var(--details-accent-primary) 0%, var(--details-accent-secondary) 100%); + background: linear-gradient( + 135deg, + var(--details-accent-primary) 0%, + var(--details-accent-secondary) 100% + ); border-radius: 20px; font-size: 14px; font-weight: 600; @@ -273,7 +337,13 @@ html[data-theme='light'] { .main-title { font-size: 42px; font-weight: 900; - background: linear-gradient(135deg, var(--details-text-primary) 0%, var(--details-text-secondary) 30%, var(--details-text-muted) 60%, var(--details-text-dim) 100%); + background: linear-gradient( + 135deg, + var(--details-text-primary) 0%, + var(--details-text-secondary) 30%, + var(--details-text-muted) 60%, + var(--details-text-dim) 100% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -300,7 +370,11 @@ html[data-theme='light'] { color: var(--details-text-muted); font-size: 16px; font-weight: 700; - background: linear-gradient(135deg, var(--details-accent-primary) 0%, var(--details-accent-secondary) 100%); + background: linear-gradient( + 135deg, + var(--details-accent-primary) 0%, + var(--details-accent-secondary) 100% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -316,16 +390,30 @@ html[data-theme='light'] { } .loading-shimmer { - background: linear-gradient(90deg, var(--details-bg-card) 25%, var(--details-bg-card-hover) 50%, var(--details-bg-card) 75%); + background: linear-gradient( + 90deg, + var(--details-bg-card) 25%, + var(--details-bg-card-hover) 50%, + var(--details-bg-card) 75% + ); background-size: 200% 100%; animation: shimmerLoad 2s infinite; border-radius: 8px; height: 20px; } -.loading-shimmer.large { width: 400px; height: 32px; } -.loading-shimmer.medium { width: 250px; height: 16px; } -.loading-shimmer.small { width: 150px; height: 12px; } +.loading-shimmer.large { + width: 400px; + height: 32px; +} +.loading-shimmer.medium { + width: 250px; + height: 16px; +} +.loading-shimmer.small { + width: 150px; + height: 12px; +} .hero-description { font-size: 18px; @@ -358,8 +446,12 @@ html[data-theme='light'] { animation: floatAnimation 4s ease-in-out infinite; } -.stat-pill:nth-child(2) { animation-delay: 0.5s; } -.stat-pill:nth-child(3) { animation-delay: 1s; } +.stat-pill:nth-child(2) { + animation-delay: 0.5s; +} +.stat-pill:nth-child(3) { + animation-delay: 1s; +} .stat-icon { font-size: 14px; @@ -454,7 +546,11 @@ html[data-theme='light'] { align-items: center; gap: 6px; padding: 6px 12px; - background: linear-gradient(135deg, var(--details-spotify) 0%, var(--details-spotify-hover) 100%); + background: linear-gradient( + 135deg, + var(--details-spotify) 0%, + var(--details-spotify-hover) 100% + ); border-radius: 16px; font-size: 12px; font-weight: 600; @@ -493,13 +589,21 @@ html[data-theme='light'] { } .embed-action.external { - background: linear-gradient(135deg, var(--details-accent-primary) 0%, var(--details-accent-secondary) 100%); + background: linear-gradient( + 135deg, + var(--details-accent-primary) 0%, + var(--details-accent-secondary) 100% + ); border-color: transparent; color: white; } .embed-action.external:hover { - background: linear-gradient(135deg, var(--details-accent-secondary) 0%, var(--details-accent-tertiary) 100%); + background: linear-gradient( + 135deg, + var(--details-accent-secondary) 0%, + var(--details-accent-tertiary) 100% + ); transform: translateY(-2px); box-shadow: 0 8px 20px var(--details-glow); } @@ -555,7 +659,11 @@ html[data-theme='light'] { display: flex; align-items: center; justify-content: center; - background: linear-gradient(135deg, var(--details-accent-primary) 0%, var(--details-accent-secondary) 100%); + background: linear-gradient( + 135deg, + var(--details-accent-primary) 0%, + var(--details-accent-secondary) 100% + ); border-radius: 12px; flex-shrink: 0; } @@ -604,18 +712,28 @@ html[data-theme='light'] { } .suggestion-card::before { - content: ''; + content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent); + background: linear-gradient( + 90deg, + transparent, + rgba(102, 126, 234, 0.1), + transparent + ); transition: left 0.6s ease; } -[data-theme='light'] .suggestion-card::before { - background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.1), transparent); +[data-theme="light"] .suggestion-card::before { + background: linear-gradient( + 90deg, + transparent, + rgba(79, 70, 229, 0.1), + transparent + ); } .suggestion-card:hover::before { @@ -644,7 +762,11 @@ html[data-theme='light'] { display: flex; align-items: center; justify-content: center; - background: linear-gradient(135deg, var(--details-accent-primary) 0%, var(--details-accent-secondary) 100%); + background: linear-gradient( + 135deg, + var(--details-accent-primary) 0%, + var(--details-accent-secondary) 100% + ); border-radius: 16px; flex-shrink: 0; } @@ -669,7 +791,11 @@ html[data-theme='light'] { .suggestion-button { padding: 12px 20px; - background: linear-gradient(135deg, var(--details-accent-primary) 0%, var(--details-accent-secondary) 100%); + background: linear-gradient( + 135deg, + var(--details-accent-primary) 0%, + var(--details-accent-secondary) 100% + ); border: none; border-radius: 12px; color: white; @@ -680,7 +806,11 @@ html[data-theme='light'] { } .suggestion-button:hover { - background: linear-gradient(135deg, var(--details-accent-secondary) 0%, var(--details-accent-tertiary) 100%); + background: linear-gradient( + 135deg, + var(--details-accent-secondary) 0%, + var(--details-accent-tertiary) 100% + ); transform: translateY(-2px); box-shadow: 0 8px 20px var(--details-glow); } @@ -719,7 +849,11 @@ html[data-theme='light'] { align-items: center; gap: 8px; padding: 16px 24px; - background: linear-gradient(135deg, var(--details-accent-primary) 0%, var(--details-accent-secondary) 100%); + background: linear-gradient( + 135deg, + var(--details-accent-primary) 0%, + var(--details-accent-secondary) 100% + ); border: none; border-radius: 12px; color: white; @@ -730,7 +864,11 @@ html[data-theme='light'] { } .back-to-podcasts:hover { - background: linear-gradient(135deg, var(--details-accent-secondary) 0%, var(--details-accent-tertiary) 100%); + background: linear-gradient( + 135deg, + var(--details-accent-secondary) 0%, + var(--details-accent-tertiary) 100% + ); transform: translateY(-2px); box-shadow: 0 12px 30px var(--details-glow); } @@ -744,61 +882,61 @@ html[data-theme='light'] { .details-navigation { padding: 16px 20px; } - + .nav-back-button { padding: 10px 16px; } - + .nav-text { display: none; } - + .details-content { padding: 32px 20px 60px; } - + .main-title { font-size: 28px; } - + .hero-description { font-size: 16px; } - + .quick-stats { flex-direction: column; align-items: center; } - + .embed-container { padding: 20px; } - + .embed-header { flex-direction: column; gap: 16px; text-align: center; } - + .embed-footer { flex-direction: column; gap: 16px; text-align: center; } - + .features-grid { grid-template-columns: 1fr; } - + .feature-card { flex-direction: column; text-align: center; } - + .suggestions-content { grid-template-columns: 1fr; } - + .suggestion-card { flex-direction: column; text-align: center; @@ -809,16 +947,16 @@ html[data-theme='light'] { .main-title { font-size: 24px; } - + .section-title { font-size: 22px; } - + .embed-container { padding: 16px; } - + .spotify-embed-wrapper iframe { height: 300px; } -} \ No newline at end of file +} diff --git a/src/pages/podcasts/details.tsx b/src/pages/podcasts/details.tsx index f252409a..df405f6d 100644 --- a/src/pages/podcasts/details.tsx +++ b/src/pages/podcasts/details.tsx @@ -1,13 +1,13 @@ -import React, { useState, useEffect } from 'react'; -import Layout from '@theme/Layout'; -import type { ReactElement } from 'react'; -import { useLocation, useHistory } from '@docusaurus/router'; -import './details.css'; +import React, { useState, useEffect } from "react"; +import Layout from "@theme/Layout"; +import type { ReactElement } from "react"; +import { useLocation, useHistory } from "@docusaurus/router"; +import "./details.css"; interface PodcastData { id: string; spotifyUrl: string; - type: 'episode' | 'show' | 'playlist'; + type: "episode" | "show" | "playlist"; } interface LocationState { @@ -16,21 +16,23 @@ interface LocationState { interface SpotifyTitleProps { spotifyUrl: string; - type: 'episode' | 'show' | 'playlist'; + type: "episode" | "show" | "playlist"; } // Enhanced Spotify Title Component const SpotifyTitle: React.FC = ({ spotifyUrl, type }) => { - const [title, setTitle] = React.useState(''); - const [artist, setArtist] = React.useState(''); + const [title, setTitle] = React.useState(""); + const [artist, setArtist] = React.useState(""); const [loading, setLoading] = React.useState(true); React.useEffect(() => { let cancelled = false; setLoading(true); - fetch(`https://open.spotify.com/oembed?url=${encodeURIComponent(spotifyUrl)}`) - .then(res => res.json()) - .then(data => { + fetch( + `https://open.spotify.com/oembed?url=${encodeURIComponent(spotifyUrl)}`, + ) + .then((res) => res.json()) + .then((data) => { if (!cancelled) { setTitle(data.title); // Extract artist/show info if available @@ -42,11 +44,13 @@ const SpotifyTitle: React.FC = ({ spotifyUrl, type }) => { }) .catch(() => { if (!cancelled) { - setTitle(''); + setTitle(""); setLoading(false); } }); - return () => { cancelled = true; }; + return () => { + cancelled = true; + }; }, [spotifyUrl]); if (loading) { @@ -63,9 +67,11 @@ const SpotifyTitle: React.FC = ({ spotifyUrl, type }) => {
- {type === 'episode' ? '๐ŸŽ™๏ธ' : type === 'show' ? '๐Ÿ“ป' : '๐ŸŽต'} + {type === "episode" ? "๐ŸŽ™๏ธ" : type === "show" ? "๐Ÿ“ป" : "๐ŸŽต"} + + + {type.charAt(0).toUpperCase() + type.slice(1)} - {type.charAt(0).toUpperCase() + type.slice(1)}

{title || `Featured ${type.charAt(0).toUpperCase() + type.slice(1)}`} @@ -85,7 +91,7 @@ export default function PodcastDetails(): ReactElement { const history = useHistory(); const state = location.state as LocationState; const podcast = state?.podcast; - + const [favorites, setFavorites] = useState(() => { if (typeof window !== "undefined") { const saved = localStorage.getItem("podcast-favorites"); @@ -96,15 +102,15 @@ export default function PodcastDetails(): ReactElement { const isFavorited = podcast ? favorites.includes(podcast.id) : false; const toggleFavorite = () => { if (!podcast) return; - setFavorites(prev => { + setFavorites((prev) => { const updated = prev.includes(podcast.id) - ? prev.filter(id => id !== podcast.id) + ? prev.filter((id) => id !== podcast.id) : [...prev, podcast.id]; localStorage.setItem("podcast-favorites", JSON.stringify(updated)); return updated; }); }; - + // Enhanced descriptions with categories const descriptions = { episode: [ @@ -112,35 +118,53 @@ export default function PodcastDetails(): ReactElement { "Experience expert insights and engaging narratives that expand your understanding of the world.", "Join compelling discussions that bridge the gap between knowledge and practical wisdom.", "Explore unique perspectives from industry leaders and innovative thinkers.", - "Uncover hidden stories and behind-the-scenes insights that mainstream media rarely covers." + "Uncover hidden stories and behind-the-scenes insights that mainstream media rarely covers.", ], show: [ "Discover a treasure trove of episodes covering diverse topics and groundbreaking ideas.", "Follow an incredible journey of storytelling that spans multiple fascinating episodes.", "Experience consistent quality content that keeps you coming back for more insights.", "Join a community of listeners who appreciate depth, authenticity, and expert curation.", - "Explore a comprehensive collection of discussions that shape modern discourse." + "Explore a comprehensive collection of discussions that shape modern discourse.", ], playlist: [ "Enjoy a carefully curated selection of audio content designed for your listening pleasure.", "Experience the perfect blend of entertainment and education in one convenient collection.", "Discover diverse voices and perspectives assembled into a cohesive listening experience.", "Tune into a handpicked selection that showcases the best of podcast storytelling.", - "Explore a thoughtfully arranged collection that takes you on an audio journey." - ] + "Explore a thoughtfully arranged collection that takes you on an audio journey.", + ], }; // Additional podcast features const features = [ - { icon: "๐ŸŽฏ", label: "Expert Insights", description: "Learn from industry professionals" }, - { icon: "๐ŸŒŸ", label: "Premium Quality", description: "High-quality audio production" }, - { icon: "๐Ÿ“ˆ", label: "Trending Content", description: "Stay ahead with latest topics" }, - { icon: "๐ŸŽง", label: "Immersive Experience", description: "Engaging storytelling format" } + { + icon: "๐ŸŽฏ", + label: "Expert Insights", + description: "Learn from industry professionals", + }, + { + icon: "๐ŸŒŸ", + label: "Premium Quality", + description: "High-quality audio production", + }, + { + icon: "๐Ÿ“ˆ", + label: "Trending Content", + description: "Stay ahead with latest topics", + }, + { + icon: "๐ŸŽง", + label: "Immersive Experience", + description: "Engaging storytelling format", + }, ]; - const getRandomDescription = (type: 'episode' | 'show' | 'playlist') => { + const getRandomDescription = (type: "episode" | "show" | "playlist") => { const typeDescriptions = descriptions[type]; - return typeDescriptions[Math.floor(Math.random() * typeDescriptions.length)]; + return typeDescriptions[ + Math.floor(Math.random() * typeDescriptions.length) + ]; }; const handleBack = () => { @@ -152,7 +176,7 @@ export default function PodcastDetails(): ReactElement { try { await navigator.share({ title: `Check out this ${podcast.type}`, - url: podcast.spotifyUrl + url: podcast.spotifyUrl, }); } catch (err) { // Fallback to clipboard @@ -173,7 +197,10 @@ export default function PodcastDetails(): ReactElement {

Sorry, we couldn't find the podcast you're looking for.

- @@ -193,25 +220,25 @@ export default function PodcastDetails(): ReactElement { Back to Podcasts
- - -
+ + +

{/* Main Content */} @@ -219,11 +246,14 @@ export default function PodcastDetails(): ReactElement { {/* Hero Section */}
- +

{getRandomDescription(podcast.type)}

- + {/* Quick Stats */}
@@ -256,10 +286,10 @@ export default function PodcastDetails(): ReactElement {
- +