initial commit

a717a869 · Mohak Trivedi · a717a869 · a717a869 · a717a869 · a717a869
Commit a717a869 authored 10 months ago by Mohak Trivedi
12 changed files
--- a/.eslintrc.json
+++ b/.eslintrc.json
+{
+  "parser": "@typescript-eslint/parser"
+}
\ No newline at end of file
--- a/.gitignore
+++ b/.gitignore
+node_modules
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "react",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "src/index.tsx",
+  "dependencies": {
+    "@emotion/react": "11.10.6",
+    "@emotion/styled": "11.10.6",
+    "@mui/material": "5.11.13",
+    "axios": "1.3.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.38",
+    "@types/react-dom": "18.2.15",
+    "loader-utils": "3.2.1",
+    "typescript": "4.4.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
\ No newline at end of file
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
\ No newline at end of file
--- a/src/App.js
+++ b/src/App.js
+import "./styles.css";
+import Section from "./components/Section/Section";
+import { useEffect } from "react";
+import StyledEngineProvider from "@mui/material/StyledEngineProvider";
+
+export default function App() {
+  useEffect(() => {});
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <div className="App">
+        <Section />
+      </div>
+    </StyledEngineProvider>
+  );
+}
--- a/src/components/Filters/Filters.jsx
+++ b/src/components/Filters/Filters.jsx
+import React from "react";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+import styles from "./Filters.module.css";
+
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+function Filters({ filters, selectedFilterIndex, setSelectedFilterIndex }) {
+  const handleChange = (event, newValue) => {
+    setSelectedFilterIndex(newValue);
+  };
+
+  function a11yProps(index) {
+    return {
+      id: `simple-tab-${index}`,
+      "aria-controls": `simple-tabpanel-${index}`
+    };
+  }
+
+  return (
+    <div>
+      <Tabs
+        value={selectedFilterIndex}
+        onChange={handleChange}
+        aria-label="basic tabs example"
+        variant="scrollable"
+        scrollButtons="auto"
+        TabIndicatorProps={{
+          style: {
+            backgroundColor: "var(--color-primary)"
+          }
+        }}
+      >
+        {filters.map((ele, idx) => (
+          <Tab
+            className={styles.tab}
+            label={ele.label}
+            {...a11yProps(idx)}
+            key={idx}
+          />
+        ))}
+      </Tabs>
+    </div>
+  );
+}
+
+export default Filters;
--- a/src/components/Filters/Filters.module.css
+++ b/src/components/Filters/Filters.module.css
+.tab {
+  color: red !important;
+  font-weight: bold;
+  font-style: italic;
+  text-transform: none;
+  border: blue 3px solid;
+}
--- a/src/components/Section/Section.jsx
+++ b/src/components/Section/Section.jsx
+import { CircularProgress } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import Typography from "@mui/material/Typography";
+import Filters from "../Filters/Filters";
+import styles from "./Section.module.css";
+
+export default function Section() {
+  const [filters, setFilters] = useState([{ key: "all", label: "All" }]);
+  const [selectedFilterIndex, setSelectedFilterIndex] = useState(0);
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchShows = async () => {
+      try {
+        setLoading(true);
+        const response = await axios.get("https://api.tvmaze.com/shows");
+        const shows = response.data;
+
+        // Get unique genres
+        const genres = [...new Set(shows.flatMap((show) => show.genres))];
+        setFilters([
+          { key: "all", label: "All" },
+          ...genres.map((genre) => ({ key: genre, label: genre }))
+        ]);
+
+        setData(shows);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        setLoading(false);
+      }
+    };
+
+    fetchShows();
+  }, []);
+
+  const showFilters = filters.length > 1;
+  const filteredData = data.filter((show) =>
+    showFilters && selectedFilterIndex !== 0
+      ? show.genres.includes(filters[selectedFilterIndex].key)
+      : show
+  );
+
+  return (
+    <div>
+      <div className={styles.header}>
+        <h3>TV Shows</h3>
+      </div>
+      {showFilters && (
+        <div className={styles.filterWrapper}>
+          <Filters
+            filters={filters}
+            selectedFilterIndex={selectedFilterIndex}
+            setSelectedFilterIndex={setSelectedFilterIndex}
+          />
+        </div>
+      )}
+      {loading ? (
+        <CircularProgress />
+      ) : (
+        <div className={styles.cardsWrapper}>
+          {filteredData.map((show) => (
+            <div className={styles.card} key={show.id}>
+              <img
+                src={
+                  show.image
+                    ? show.image.medium
+                    : "https://via.placeholder.com/210"
+                }
+                alt={show.name}
+                className={styles.cardImage}
+              />
+              <Typography variant="h6" className={styles.cardTitle}>
+                {show.name}
+              </Typography>
+              <Typography variant="body2" className={styles.cardGenre}>
+                Genres: {show.genres.join(", ")}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/components/Section/Section.module.css
+++ b/src/components/Section/Section.module.css
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.header h3 {
+  margin: 0;
+}
+
+.toggleText {
+  cursor: pointer;
+  color: var(--color-primary);
+}
+
+.filterWrapper {
+  margin-bottom: 20px;
+}
+
+.cardsWrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+  gap: 16px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 16px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.cardImage {
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+.cardTitle {
+  margin-top: 16px;
+  font-weight: bold;
+}
+
+.cardGenre {
+  margin-top: 8px;
+  color: #666;
+}
--- a/src/index.js
+++ b/src/index.js
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
--- a/src/styles.css
+++ b/src/styles.css
+.App {
+  font-family: sans-serif;
+  text-align: center;
+}