Skip to content

Commit f5000b4

Browse files
digoarthurdigoarthur
committed
feat(ViteJS): implement ViteJS
1 parent b3fc5c6 commit f5000b4

File tree

16 files changed

+479
-381
lines changed

16 files changed

+479
-381
lines changed

‎github-automated-repos-page/new/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React</title>
7+
<title>GitHub Automated Repos</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎github-automated-repos-page/new/public/favicon.ico‎

15 KB
Binary file not shown.

‎github-automated-repos-page/new/public/vite.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎github-automated-repos-page/new/src/App.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import './App.css'
44
import React from 'react'
55
import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom'
66
import Home from './pages/Home'
7-
import IconStacks from './pages/IconStack.jsx'
7+
import StackIcons from './pages/StackIcons.jsx'
88
import GettingStart from './pages/GettingStart'
9-
import IconsProject from './pages/IconsProject'
9+
import ProjectIcons from './pages/ProjectIcons'
1010
const router = createBrowserRouter(
1111
createRoutesFromElements(
1212
<Route >
1313
<Route path='/' element={<Home/>} />
14-
<Route path='/iconstack' element={<IconStacks />} />
14+
<Route path='/stackicons' element={<StackIcons />} />
1515
<Route path='/gettingstart' element={<GettingStart/>} />
16-
<Route path='/iconsproject' element={<IconsProject/>} />
16+
<Route path='/projecticons' element={<ProjectIcons/>} />
1717
</Route>
1818
)
1919
)

‎github-automated-repos-page/new/src/assets/imgs/fill_website.png‎ renamed to ‎github-automated-repos-page/new/src/assets/imgs/fill_homepage.png‎

File renamed without changes.

‎github-automated-repos-page/new/src/components/Card/index.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ interface dataCard {
1212

1313
export function Card({ item, iconKey }: dataCard) {
1414

15-
15+
let url = window.location.pathname;
16+
let parts = url.split('/');
17+
let lastPartUrl = parts.pop() || parts.pop();
1618
const showToastMessage = (iconKey: string) => {
1719
toast.success(`Copied ${iconKey} to clipboard`, {
1820

@@ -31,10 +33,10 @@ export function Card({ item, iconKey }: dataCard) {
3133
};
3234
return (
3335
<>
34-
<li className="group grid grid-rows-[2fr,1fr] border-solid border-2 border-[#68686869] rounded-md w-[200px] h-[120px] shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)] group-hover:bg-slate-100">
36+
<li className="group grid grid-rows-[2fr,1fr] border-solid border-2 border-[#68686869] rounded-md w-[200px] h-[120px] shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)] group-hover:bg-slate-100 max-md:w-[102px] ">
3537

3638

37-
<img style={iconKey=='dashboard'?{filter: 'brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(234deg) brightness(107%) contrast(101%)'}:{}} className='m-auto h-10' src={item} />
39+
<img style={lastPartUrl=='projecticons'?{filter: 'brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(234deg) brightness(107%) contrast(101%)'}:{}} className='m-auto h-10' src={item} />
3840

3941

4042
<h2 className='group-hover:bg-gradient-to-r from-[#ffffff77] to-[#38383869] flex relative justify-center items-center text-xs cursor-pointer' onClick={() => showToastMessage(iconKey)}>

‎github-automated-repos-page/new/src/components/Footer/index.jsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
import React from "react";
3+
import npm_icon from "../../assets/imgs/npm_icon.svg"
4+
import github_icon from "../../assets/imgs/github_icon.svg"
5+
import { Link } from "react-router-dom"
6+
7+
export default function Footer() {
8+
return (
9+
<footer className="w-full bg-[#3D3D4D] font-sans pb-10 mt-20">
10+
<div className="grid grid-cols-2 xl:grid-cols-4 gap-x-12 gap-y-8 max-w-7xl mx-auto p-10">
11+
12+
13+
<div className="flex flex-col gap-2">
14+
<a href="https://digoarthur.vercel.app" className=" text-lg">
15+
@digoarthur
16+
</a>
17+
<div className="font-mono">
18+
©2023
19+
</div>
20+
<a href="https://docs.github.com/en/rest/repos/repos?apiVersion=2022-11-28#get-a-repository" >
21+
Based in:
22+
API GitHub
23+
</a>
24+
</div>
25+
<div className="flex flex-col gap-2">
26+
<Link to='/gettingstart' className="font-bold text-xl">Getting Start</Link>
27+
<Link to='/gettingstart'>Install package</Link>
28+
<Link to='/gettingstart'>Import Package</Link>
29+
<Link to='/gettingstart'>Fill in the fields</Link>
30+
<Link to='/gettingstart'>Code Example</Link>
31+
32+
</div>
33+
<div className="flex flex-col gap-2">
34+
<div className="font-bold text-xl">Icons</div>
35+
<Link to='/stackicons' >Stacks</Link>
36+
<Link to="/projecticons">Projects</Link>
37+
38+
</div>
39+
<div className="flex flex-col gap-2">
40+
<div className="font-bold text-xl">More</div>
41+
<a href="https://github.com/DIGOARTHUR/github-automated-repos/" className="flex gap-1.5 "> <img src={github_icon} alt='github_icon' /> <span >GitHub</span></a>
42+
43+
<a href="https://www.npmjs.com/package/github-automated-repos" className="flex gap-1.5 "> <img src={npm_icon} alt='npm_icon' /> <span >NPM</span></a>
44+
</div>
45+
</div>
46+
</footer>
47+
)
48+
}

‎github-automated-repos-page/new/src/components/Footer/index.tsx‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎github-automated-repos-page/new/src/components/Header/index.jsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
2+
3+
import React, { useState } from "react";
4+
import logoLib from "../../assets/imgs/logoLib.svg"
5+
import npm_icon from "../../assets/imgs/npm_icon.svg"
6+
import github_icon from "../../assets/imgs/github_icon.svg"
7+
import { FaBars } from "react-icons/fa";
8+
import Sidebar from "../Sidebar";
9+
import { AiOutlineClose } from "react-icons/ai";
10+
export default function Header() {
11+
const viewportWidth = window.innerWidth;
12+
const [isOpenNavbar, setIsOpenNavbar] = useState('');
13+
function _handleNavbar() {
14+
setIsOpenNavbar(!isOpenNavbar);
15+
}
16+
17+
return (
18+
<nav className=" w-full flex justify-center items-center font-sans h-16 fixed top-0 left-0 bg-[#3d3d4dab] z-40 ">
19+
20+
<div className="flex w-full items-center justify-between mx-10 max-lg:mx-3">
21+
22+
<div className=" flex items-center gap-2">
23+
<a className="lg:hidden" onClick={_handleNavbar}>
24+
{isOpenNavbar ? '' : <FaBars size={45} />}
25+
</a>
26+
<a href="/">
27+
<img className="h-14 w-14" src={logoLib} alt='logoLib' />
28+
</a>
29+
</div>
30+
31+
<div className=" hidden w-full h-10 px-4">
32+
<button className=" bg-[#4F4F60] w-full h-full flex items-center rounded-full p-4">
33+
34+
<img className="h-4 w-4 mr-3" src={logoLib} alt='logoLib' />
35+
Search
36+
37+
</button>
38+
</div>
39+
40+
<div className="flex gap-3">
41+
<a href="https://www.npmjs.com/package/github-automated-repos">
42+
<img className="h-5 w-5" src={npm_icon} alt='npm_icon' />
43+
</a>
44+
<a href="https://github.com/DIGOARTHUR/github-automated-repos/">
45+
<img className="h-5 w-5" src={github_icon} alt='github_icon' />
46+
</a>
47+
</div>
48+
</div>
49+
50+
{
51+
viewportWidth<1024?( <Sidebar isOpen={isOpenNavbar} setIsOpen={_handleNavbar}/>):('')
52+
}
53+
54+
</nav >
55+
)
56+
}

‎github-automated-repos-page/new/src/components/Header/index.tsx‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

0 commit comments

Comments
 (0)