Merge pull request #43 from saimadhav24/main

Adding footer

Author: ank1traj

.gitignore

@@ -18,6 +18,7 @@
 # misc
 .DS_Store
 *.pem
+yarn.lock
 
 # debug
 npm-debug.log*
@@ -31,4 +32,7 @@ yarn-error.log*
 # vercel
 .vercel
 
-.env
+# VSCode
+.vscode
+
+.env

components/generator/array/arrayGenerator.js

@@ -19,6 +19,7 @@ import DownloadIcon from "@mui/icons-material/GetApp";
 import toast, { Toaster } from "react-hot-toast";
 
 import ArrayGeneratorFunc from "components/generator/array/arrayGeneratorFunc";
+import Footer from "@/pages/footer";
 
 const options = [
   "Negative Outputs",
@@ -376,6 +377,7 @@ const GenerateArray = () => {
           </StyledComponents.StyledCardContent>
         </StyledComponents.StyledCard>
       </Grid>
+      <Footer/>
     </StyledComponents.StyledGrid>
   );
 };

components/generator/binaryTreeGenerator.js

@@ -15,6 +15,7 @@ import FileCopyIcon from "@mui/icons-material/FileCopy";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import GenerateIcon from "@mui/icons-material/PlayArrow";
 import { styled } from "@mui/material/styles";
+import Footer from "@/pages/footer";
 
 const StyledCard = styled(Card)(({ theme }) => ({
   background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
@@ -275,6 +276,8 @@ const BinaryTreeGenerator = () => {
           </StyledCard>
         </Grid>
       </StyledGrid>
+      
+      <Footer/>
     </>
   );
 };

components/generator/graph/graphGenerator.js

@@ -18,6 +18,7 @@ import DownloadIcon from "@mui/icons-material/GetApp";
 import toast, { Toaster } from "react-hot-toast";
 
 import GraphGeneratorFunc from "components/generator/graph/graphGeneratorFunc.js";
+import Footer from "@/pages/footer";
 
 const options = [
   "Show Total Cases",
@@ -437,6 +438,7 @@ const GenerateGraph = () => {
           </StyledComponents.StyledCardContent>
         </StyledComponents.StyledCard>
       </Grid>
+      <Footer/>
     </StyledComponents.StyledGrid>
   );
 };

components/generator/integer/integerGenerator.js

@@ -8,7 +8,7 @@ import GenerateIcon from "@mui/icons-material/PlayArrow";
 import DownloadIcon from "@mui/icons-material/GetApp";
 
 import toast, { Toaster } from "react-hot-toast";
-
+import Footer from "@/pages/footer";
 import IntegerGeneratorFunc from "components/generator/integer/integerGeneratorFunc";
 
 const options = ["Show Total Cases"];
@@ -174,6 +174,7 @@ const GenerateInteger = () => {
           </StyledComponents.StyledCardContent>
         </StyledComponents.StyledCard>
       </Grid>
+      <Footer/>
     </StyledComponents.StyledGrid>
   );
 };

components/generator/linkedList/linkedListGenerator.js

@@ -1,5 +1,5 @@
 import { StyledComponents } from "components/style";
-
+import Footer from "@/pages/footer";
 import {
   Grid,
   Tooltip,
@@ -584,6 +584,7 @@ const GenerateLinkedList = () => {
                                 : "")
                             : "Empty List"}
                         </div>
+                        
                       ))
                     : null}
                 </StyledComponents.StyledTypography>
@@ -592,7 +593,10 @@ const GenerateLinkedList = () => {
           </StyledComponents.StyledCardContent>
         </StyledComponents.StyledCard>
       </Grid>
+      
+      <Footer/>
     </StyledComponents.StyledGrid>
+    
   );
 };
 

components/generator/matrixGenerator.js

@@ -21,6 +21,7 @@ import {
 import GenerateIcon from "@mui/icons-material/PlayArrow";
 // import DownloadIcon from "@mui/icons-material/GetApp";
 import { styled } from "@mui/material/styles";
+import Footer from "@/pages/footer";
 
 const StyledCard = styled(Card)(({ theme }) => ({
   background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
@@ -608,6 +609,7 @@ const GenerateMatrix = () => {
           </StyledCardContent>
         </StyledCard>
       </Grid>
+      <Footer/>
     </StyledGrid>
   );
 };

components/generator/palindrome/palindromeGenerator.js

@@ -18,6 +18,7 @@ import DownloadIcon from "@mui/icons-material/GetApp";
 import toast, { Toaster } from "react-hot-toast";
 
 import PalindromeGeneratorFunc from "components/generator/palindrome/palindromeGeneratorFunc.js";
+import Footer from "@/pages/footer";
 
 const options = ["Show Total Cases", "Show Length"];
 
@@ -331,6 +332,7 @@ const PalindromeGenerator = () => {
           </StyledComponents.StyledCardContent>
         </StyledComponents.StyledCard>
       </Grid>
+      <Footer/>
     </StyledComponents.StyledGrid>
   );
 };

components/generator/string/stringGenerator.js

@@ -19,6 +19,7 @@ import DownloadIcon from "@mui/icons-material/GetApp";
 import toast, { Toaster } from "react-hot-toast";
 
 import StringGeneratorFunc from "components/generator/string/stringGeneratorFunc";
+import Footer from "@/pages/footer";
 
 const options = [
   "Hide Length",
@@ -359,6 +360,7 @@ const GenerateString = () => {
           </StyledComponents.StyledCardContent>
         </StyledComponents.StyledCard>
       </Grid>
+      <Footer/>
     </StyledComponents.StyledGrid>
   );
 };

lib/styles.js

@@ -0,0 +1,123 @@
+import {
+  Grid,
+  Card,
+  CardHeader,
+  CardContent,
+  TextField,
+  Button,
+  Typography,
+  IconButton,
+  MenuItem,
+  Select,
+  FormControl,
+} from "@mui/material";
+
+import { styled } from "@mui/material/styles";
+
+export const StyledCard = styled(Card)(({ theme }) => ({
+  background:
+    "linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 15%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1))",
+  boxShadow: "4px 4px 30px rgba(255, 255, 255, 0.1)",
+  backdropFilter: "blur(4.7px)",
+  color: "white",
+  borderRadius: "12px",
+  width: "100%",
+  height: "100%",
+  margin: "auto",
+  display: "flex",
+  flexDirection: "column",
+}));
+
+export const StyledCardHeader = styled(CardHeader)(({ theme }) => ({
+  textAlign: "center",
+  color: "#fff",
+}));
+
+export const StyledCardContent = styled(CardContent)(({ theme }) => ({
+  flexGrow: 1,
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-between",
+}));
+
+export const StyledGrid = styled(Grid)(({ theme }) => ({
+  height: "100vh",
+}));
+
+export const StyledTypography = styled(Typography)(({ theme }) => ({
+  color: "#fff",
+  fontWeight: "bold",
+}));
+
+export const StyledTextField = styled(TextField)(({ theme }) => ({
+  "& label": {
+    color: "#fff",
+    fontWeight: "bold",
+  },
+  "& input": {
+    color: "#fff",
+    fontWeight: "bold",
+  },
+  "& .MuiInput-underline:before": {
+    borderBottomColor: "#fff",
+  },
+}));
+
+export const StyledButton = styled(Button)(({ theme }) => ({
+  background: "transparent",
+  backdropFilter: "blur(5px)",
+  color: "white",
+  fontWeight: "bold",
+  "&:hover": {
+    background: "rgba(255, 255, 255, 0.3)",
+    color: "#fff",
+  },
+}));
+
+export const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  radio: {
+    "&$checked": {
+      color: "#4B8DF8",
+    },
+  },
+  checked: {},
+  color: "#fff",
+}));
+
+export const StyledFormControl = styled(FormControl)(({ theme }) => ({
+  minWidth: "300px",
+  "& .MuiSelect-select": {
+    paddingRight: theme.spacing(4),
+  },
+  "& .MuiSelect-icon": {
+    right: 0,
+  },
+}));
+
+export const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  color: theme.palette.secondary.main,
+  backgroundColor: theme.palette.background.paper,
+  "&:hover": {
+    backgroundColor: theme.palette.secondary.light,
+  },
+  "&.Mui-selected": {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+  },
+  "&.Mui-selected:hover": {
+    backgroundColor: theme.palette.primary.light,
+  },
+}));
+
+export const StyledSelect = styled(Select)(({ theme }) => ({
+  color: "white",
+  "&.MuiSelect-select": {
+    paddingRight: theme.spacing(2),
+    "&:focus": {
+      backgroundColor: "transparent",
+    },
+  },
+  "& .MuiSelect-icon": {
+    color: theme.palette.secondary.main,
+  },
+}));