├── postcss.config.js
├── src
├── assets
│ ├── icon-down.svg
│ ├── icon-up.svg
│ ├── favicon-32x32.png
│ ├── Fonts
│ │ └── Inter-VariableFont_slnt_wght.ttf
│ ├── icon-facebook.svg
│ ├── icon-youtube.svg
│ ├── icon-twitter.svg
│ └── icon-instagram.svg
├── index.css
├── main.jsx
├── App.jsx
└── components
│ ├── OverviewContainers.jsx
│ ├── Header.jsx
│ └── OverviewCards.jsx
├── design
├── desktop-preview.jpg
├── active-states-dark.jpg
├── active-states-light.jpg
├── desktop-design-dark.jpg
├── mobile-design-dark.jpg
├── mobile-design-light.jpg
└── desktop-design-light.jpg
├── vite.config.js
├── .gitignore
├── index.html
├── .eslintrc.cjs
├── README.md
├── package.json
├── tailwind.config.js
├── style-guide.md
├── public
└── vite.svg
├── texto.html
├── data
└── data.json
└── yarn.lock
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/src/assets/icon-down.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icon-up.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/design/desktop-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Davichobits/Challenge-31-social-media-dashboard-with-theme-switcher/HEAD/design/desktop-preview.jpg
--------------------------------------------------------------------------------
/design/active-states-dark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Davichobits/Challenge-31-social-media-dashboard-with-theme-switcher/HEAD/design/active-states-dark.jpg
--------------------------------------------------------------------------------
/design/active-states-light.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Davichobits/Challenge-31-social-media-dashboard-with-theme-switcher/HEAD/design/active-states-light.jpg
--------------------------------------------------------------------------------
/design/desktop-design-dark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Davichobits/Challenge-31-social-media-dashboard-with-theme-switcher/HEAD/design/desktop-design-dark.jpg
--------------------------------------------------------------------------------
/design/mobile-design-dark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Davichobits/Challenge-31-social-media-dashboard-with-theme-switcher/HEAD/design/mobile-design-dark.jpg
--------------------------------------------------------------------------------
/design/mobile-design-light.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Davichobits/Challenge-31-social-media-dashboard-with-theme-switcher/HEAD/design/mobile-design-light.jpg
--------------------------------------------------------------------------------
/src/assets/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Davichobits/Challenge-31-social-media-dashboard-with-theme-switcher/HEAD/src/assets/favicon-32x32.png
--------------------------------------------------------------------------------
/design/desktop-design-light.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Davichobits/Challenge-31-social-media-dashboard-with-theme-switcher/HEAD/design/desktop-design-light.jpg
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @font-face {
6 | font-family: 'Inter';
7 | src: url(./assets/Fonts/Inter-VariableFont_slnt_wght.ttf);
8 | }
--------------------------------------------------------------------------------
/src/assets/Fonts/Inter-VariableFont_slnt_wght.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Davichobits/Challenge-31-social-media-dashboard-with-theme-switcher/HEAD/src/assets/Fonts/Inter-VariableFont_slnt_wght.ttf
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { Header } from "./components/Header"
2 | import { OverviewContainer, OverviewTodayContainer } from "./components/OverviewContainers"
3 |
4 | function App() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | )
12 | }
13 |
14 | export default App
--------------------------------------------------------------------------------
/src/assets/icon-facebook.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icon-youtube.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/assets/icon-twitter.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | 'react/prop-types': 'off', // Deshabilita la regla de prop-types
20 | },
21 | }
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Reto 31 - Social media dashboard with theme switcher using React and Tailwind
2 |
3 | 
4 |
5 | ## También puedes seguirme en mis redes sociales:
6 |
7 |
8 | ✅YouTube: https://www.youtube.com/CodingTube
9 |
10 | ✅TikTok: https://www.tiktok.com/@codingtube
11 |
12 | ✅Twitter: https://twitter.com/CodingTube
13 |
14 | ✅Discord: https://discord.gg/tasEBrh8Zw
15 |
16 | ✅Facebook: https://www.facebook.com/groups/codingtubers
17 |
18 | ►CURSOS:
19 |
20 | 📕HTML5: https://bit.ly/CodingHTML01
21 |
22 | 📘CSS3: https://bit.ly/CodingCSS01
23 |
24 | 📙Javascript: http://bit.ly/CodingJS01
25 |
26 | 📔 Tailwind: http://bit.ly/Tailwind01
27 |
28 | ►LISTAS DE REPRODUCCIÓN RECOMENDADAS:
29 |
30 | 📒Etiquetas HTML: https://bit.ly/HTMLShorts
31 |
32 | 📗Todos los retos frontend: https://bit.ly/CodingRetos
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "challenge-31-social-media-dashboard-with-theme-switcher",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.2.15",
18 | "@types/react-dom": "^18.2.7",
19 | "@vitejs/plugin-react": "^4.0.3",
20 | "autoprefixer": "^10.4.15",
21 | "eslint": "^8.45.0",
22 | "eslint-plugin-react": "^7.32.2",
23 | "eslint-plugin-react-hooks": "^4.6.0",
24 | "eslint-plugin-react-refresh": "^0.4.3",
25 | "postcss": "^8.4.27",
26 | "tailwindcss": "^3.3.3",
27 | "vite": "^4.4.5"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/assets/icon-instagram.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | darkMode: 'class',
4 | content: [
5 | "./index.html",
6 | "./src/**/*.{js,ts,jsx,tsx}",
7 | ],
8 | theme: {
9 | extend: {
10 | colors: {
11 | "Lime-Green": "hsl(163, 72%, 41%)",
12 | "Bright-Red": "hsl(356, 69%, 56%)",
13 | "Facebook": "hsl(208, 92%, 53%)",
14 | "Twitter": "hsl(203, 89%, 53%)",
15 | "YouTube": "hsl(348, 97%, 39%)",
16 | "Toggle": "hsl(230, 22%, 74%)",
17 | "Very-Dark-Blue": "hsl(230, 17%, 14%)",
18 | "Very-Dark-Blue-Top": "hsl(232, 19%, 15%)",
19 | "Dark-Desaturated-Blue": "hsl(228, 28%, 20%)",
20 | "Desaturated-Blue": "hsl(228, 34%, 66%)",
21 | "White": "hsl(0, 0%, 100%)",
22 | "Very-Pale-Blue": "hsl(225, 100%, 98%)",
23 | "Light-Grayish-Blue": "hsl(227, 47%, 96%)",
24 | "Dark-Grayish-Blue": "hsl(228, 12%, 44%)",
25 | },
26 | backgroundImage:{
27 | "Toggle-Gradient": "linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%))",
28 | "Instagram": "linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%))",
29 | },
30 | fontFamily:{
31 | Inter: ['Inter']
32 | },
33 | screens:{
34 | 'tablet':'725px',
35 | 'desktop': '1175px'
36 | }
37 | },
38 | },
39 | plugins: [],
40 | }
41 |
42 |
--------------------------------------------------------------------------------
/style-guide.md:
--------------------------------------------------------------------------------
1 | # Front-end Style Guide
2 |
3 | ## Layout
4 |
5 | The designs were created to the following widths:
6 |
7 | - Mobile: 375px
8 | - Desktop: 1440px
9 |
10 | ## Colors
11 |
12 | ### Primary
13 |
14 | - Lime Green: hsl(163, 72%, 41%)
15 | - Bright Red: hsl(356, 69%, 56%)
16 |
17 | - Facebook: hsl(208, 92%, 53%)
18 | - Twitter: hsl(203, 89%, 53%)
19 | - Instagram: linear gradient hsl(37, 97%, 70%) to hsl(329, 70%, 58%)
20 | - YouTube: hsl(348, 97%, 39%)
21 |
22 | #### Dark Theme
23 |
24 | - Toggle: linear gradient hsl(210, 78%, 56%) to hsl(146, 68%, 55%)
25 |
26 | #### Light Theme
27 |
28 | - Toggle: hsl(230, 22%, 74%)
29 |
30 | ### Neutral
31 |
32 | #### Dark Theme
33 |
34 | - Very Dark Blue (BG): hsl(230, 17%, 14%)
35 | - Very Dark Blue (Top BG Pattern): hsl(232, 19%, 15%)
36 | - Dark Desaturated Blue (Card BG): hsl(228, 28%, 20%)
37 | - Desaturated Blue (Text): hsl(228, 34%, 66%)
38 | - White (Text): hsl(0, 0%, 100%)
39 |
40 | #### Light Theme
41 |
42 | - White (BG): hsl(0, 0%, 100%)
43 | - Very Pale Blue (Top BG Pattern): hsl(225, 100%, 98%)
44 | - Light Grayish Blue (Card BG): hsl(227, 47%, 96%)
45 | - Dark Grayish Blue (Text): hsl(228, 12%, 44%)
46 | - Very Dark Blue (Text): hsl(230, 17%, 14%)
47 |
48 | ## Typography
49 |
50 | ### Body Copy
51 |
52 | - Font size (Overview Card Headings): 14px
53 |
54 | ### Font
55 |
56 | - Family: [Inter](https://fonts.google.com/specimen/Inter)
57 | - Weights: 400, 700
58 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/texto.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Frontend Mentor | [Challenge Name Here]
10 |
11 |
12 |
16 |
17 |
18 |
19 | Social Media Dashboard
20 | Total Followers: 23,004
21 |
22 | Dark Mode
23 |
24 |
25 |
26 | @nathanf
27 | 1987
28 | Followers
29 | 12 Today
30 |
31 | @nathanf
32 | 1044
33 | Followers
34 | 99 Today
35 |
36 | @realnathanf
37 | 11k
38 | Followers
39 | 1099 Today
40 |
41 | Nathan F.
42 | 8239
43 | Subscribers
44 | 144 Today
45 |
46 |
47 |
48 | Overview - Today
49 |
50 | Page Views
51 | 87
52 | 3%
53 |
54 | Likes
55 | 52
56 | 2%
57 |
58 | Likes
59 | 5462
60 | 2257%
61 |
62 | Profile Views
63 | 52k
64 | 1375%
65 |
66 | Retweets
67 | 117
68 | 303%
69 |
70 | Likes
71 | 507
72 | 553%
73 |
74 | Likes
75 | 107
76 | 19%
77 |
78 | Total Views
79 | 1407
80 | 12%
81 |
82 |
86 |
87 |
--------------------------------------------------------------------------------
/src/components/OverviewContainers.jsx:
--------------------------------------------------------------------------------
1 | import { OverviewCard, OverviewTodayCard } from './OverviewCards'
2 | import data from '../../data/data.json'
3 |
4 | const converNumbertoK = (number) => {
5 | if( number >= 10000){
6 | number = number / 1000
7 | return number + 'k'
8 | }
9 | return number
10 | }
11 |
12 | export const OverviewContainer = () => {
13 | return (
14 |
15 | {
16 | data.overview.map(object =>
17 |
26 | )
27 | }
28 |
29 | )
30 | }
31 |
32 | export const OverviewTodayContainer = () => {
33 | return (
34 |
35 | Overview - Today
36 |
37 | {
38 | data['overview-today'].map(object =>
39 |
47 | )
48 | }
49 |
50 |
51 | )
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react"
2 |
3 |
4 | export const Header = () => {
5 |
6 | let initialDarkMode = JSON.parse(localStorage.getItem('dark'))
7 |
8 | if(!initialDarkMode){
9 | initialDarkMode = false
10 | }
11 | console.log(initialDarkMode)
12 | const [dark, setDark] = useState(initialDarkMode)
13 |
14 | const handleClick = () => {
15 | setDark(!dark)
16 | }
17 |
18 | useEffect(()=>{
19 | if(dark){
20 | document.documentElement.classList.add('dark')
21 | localStorage.setItem('dark', true)
22 | }else{
23 | document.documentElement.classList.remove('dark')
24 | localStorage.setItem('dark', false)
25 | }
26 | },[dark])
27 |
28 | return (
29 |
30 |
31 |
32 |
Social Media Dasboard
33 |
Total Followers: 23,004
34 |
35 |
36 |
37 |
Dark Mode
38 |
39 |
44 |
45 |
28 |
29 |
{user}
30 |
{audience}
32 | {audienceType}
33 |
34 |
35 |
{today} Today
36 |
46 |
{statsType}
47 |
48 |
50 |
{stats}
51 |
52 |
53 |
{porcentage}%
54 |
55 |