There could be several reasons why your .gitignore file is not ignoring certain files.
Here are a few possibilities:
-The files were already added to your repository before you added them to your .gitignore file. Adding files to .gitignore does not remove them from the repository. To remove them, you need to run git rm --cached for each file.
-You may have specified the wrong path or filename in your .gitignore file. Double-check that the paths and filenames are correct, and that they match the files you want to ignore.
-Git may be ignoring your .gitignore file. Check that your .gitignore file is in the root of your repository and that its filename is spelled correctly. If Git is still ignoring your .gitignore file, you can force it to read the file by running git add -f .gitignore.
-The files you want to ignore may already be tracked by Git. In this case, you need to remove them from the repository and commit the changes. You can do this with the following commands:
git rm -r --cached .
git add .
git commit -m "Removed files from repository"
example you have this folder u want to compile:
MyModal
├── src
│ └── Modal.js
├── package.json
└── ...First install with the command below
npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react"devDependencies": {
"@babel/cli": "^7.21.5",
"@babel/core": "^7.21.8",
"@babel/preset-env": "^7.21.5",
"@babel/preset-react": "^7.18.6",
},
"scripts": {
"build": "babel src --out-dir lib"
},
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
},
example you have this folder u want to compile:
MyModal
├── src
│ └── Modal.tsx
├── package.json
└── ...First install with the command below
npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript"devDependencies": {
"@babel/cli": "^7.21.5",
"@babel/core": "^7.21.8",
"@babel/preset-env": "^7.21.5",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.5"
},
"scripts": {
"build": "babel src --out-dir lib --extensions .ts,.tsx"
},
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
},
npm run build #u will get a lib folder with all the compiled filesnpm login #first authenticate yourself in the npm registry then:
npm publishin vscode:
Ctrl+Shift+P- type
Reload - click
Developer: Reload Window
- xs: Extra small screens (0px and up)
- sm: Small screens (600px and up)
- md: Medium screens (960px and up) -lg: Large screens (1280px and up)
- xl: Extra large screens (1920px and up)
import React, { useEffect } from "react";
import { PopupButton } from "@typeform/embed-react";
import { CenterItems, HireUs } from "@/styles/PortfolioStyles";
const Typeform = (props: any) => {
const { IsGetStarted } = props;
useEffect(() => {
const script = document.createElement("script");
script.src = "//embed.typeform.com/next/embed.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return (
<PopupButton
id=" " // typeform id
style={{
position: "relative",
background: "none",
border: "none",
top: IsGetStarted ? "21px" : "44px",
...(!IsGetStarted && {
...CenterItems,
}),
}}
>
<HireUs
variant="contained"
sx={{
...(IsGetStarted && {
borderRadius: "0 !important",
width: " 204px",
left: "0",
transform: "none",
}),
}}
>
Hire Us!
</HireUs>
</PopupButton>
);
};
export default Typeform;e.g, KENYA's code is KE
const option={
code:"KE"
}
const KenyanFlag=https://flagcdn.com/w20/${option.code.toLowerCase()}.png
<img src='KenyanFlag' alt="KE"/>Output
//LandingLayout.tsx
import React from "react";
import Navbar from "./Navbar";
import Footer from "./Footer";
const LandingLayout = ({ children }) => {
return (
<Navbar/>
<main>{children}</main>
<Footer/>
);
};//DashboardNavbarLayout.tsx
import React from "react";
import TopBar from "./TopBar";
import SideBar from "./SideBar";
const DashboardNavbarLayout = ({ children }) => {
return (
<>
<TopBar />
<SideBar />
{children}
</>
);
};// components/withLayout.js
import React from "react";
import LandingLayout from "./LandingLayout";
import DashboardNavbarLayout from "./DashboardNavbarLayout";
const withLayout = (PageComponent, layoutType) => {
switch (layoutType) {
case "landing":
return (props) => (
<LandingLayout>
<PageComponent {...props} />
</LandingLayout>
);
case "dashboard":
return (props) => (
<DashboardNavbarLayout>
<PageComponent {...props} />
</DashboardNavbarLayout>
);
default:
return PageComponent;
}
};
export default withLayout;Now, you can use the withLayout HOC to wrap your pages with the appropriate layout:
// pages/index.js
import React from "react";
import withLayout from "../components/withLayout";
const HomePage = () => (
<>
<h1>Welcome to the Home Page</h1>
<p>This is the content of the home page.</p>
</>
);
export default withLayout(HomePage, "landing");// pages/dashboard.js
import React from "react";
import withLayout from "../components/withLayout";
const DashboardPage = () => (
<>
<h1>User Dashboard</h1>
<p>This is the user dashboard content.</p>
</>
);
export default withLayout(DashboardPage, "dashboard");