Final changes

WorkPlan.md

@@ -0,0 +1,5 @@
+WorkPlan
+    1. Design A Basic Structure Using Material UI Grids.
+    2. Design Twitter Card Components - (Mostly Probably to be embeded).
+    3. Refactor to a modular structure - Provide Modularity such that minimal changes are required to add , remove new cards.
+    4. Responsiveness for every view.

package.json

@@ -3,12 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
+    "@mui/lab": "^5.0.0-alpha.72",
+    "@mui/material": "^5.5.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
+    "react-twitter-embed": "^4.0.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,25 +1,6 @@
-import logo from './logo.svg';
-import './App.css';
+import Testimonial from './pages/testimonial';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+const App = ()=>{
+  return <Testimonial/>
 }
-
 export default App;

src/components/twitterCard.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { TwitterTweetEmbed } from "react-twitter-embed";
+import CircularProgress from "@mui/material/CircularProgress";
+
+const TwitterCard = ({ tweetId }) => {
+	const [loading, setLoading] = React.useState(true);
+
+	return (
+		<div style={{textAlign: "center" , margin:"13px"}}>
+			{loading && <CircularProgress sx={{ color: "#232222" }} />}
+			<TwitterTweetEmbed
+				options={{ theme: "dark", width: "auto"}}
+				onLoad={() => setLoading(false)}
+				tweetId={tweetId}
+			/>
+		</div>
+	);
+};
+
+export default TwitterCard;

src/config/TweetsList.js

@@ -0,0 +1,12 @@
+const TweetsList = {
+	ids: [
+		"1501048818858704903",
+		"1501845363375984644",
+		"1501773594359209985",
+		"1501612953782861824",
+		"1501182200103854092",
+		"1500358044236013568",
+	],
+};
+
+export default TweetsList;

src/index.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

src/pages/testimonial.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { Box, Typography, Grid, Container } from "@mui/material";
+import TwitterCard from "../components/twitterCard";
+import TweetsList from "../config/TweetsList";
+import Masonry from "@mui/lab/Masonry";
+
+const Testimonial = () => {
+	return (
+		<Box sx={{ minHeight: "100vh", backgroundColor: "#000" }}>
+			<Container maxWidth="lg">
+				<Grid container justifyContent="center" alignItems="center">
+					<Grid item xs={12} pt={10}>
+						<Typography
+							variant="h3"
+							color="common.white"
+							sx={{
+								fontWeight: 700,
+								textAlign: "center",
+								fontFamily: "Poppins",
+							}}
+						>
+							Kya <span style={{ color: "#D6FE2E" }}>Kool</span>{" "}
+							Hei Hum
+						</Typography>
+					</Grid>
+					<Grid item sx={12} md={6}>
+						<Typography
+							variant="h6"
+							color="common.white"
+							sx={{
+								fontWeight: 500,
+								textAlign: "right",
+								fontFamily: "Poppins",
+							}}
+						>
+							Basically,{" "}
+							<span style={{ color: "#D6FE2E" }}>WAGMI</span>
+						</Typography>
+					</Grid>
+					<Grid xs={12} py={10}>
+						<Masonry
+							columns={{ xs: 1, sm: 2, lg: 3 }}
+							spacing={5}
+							sx={{margin: "0"}}
+						>
+							{TweetsList.ids.map((id) => (
+								<TwitterCard tweetId={id} />
+							))}
+						</Masonry>
+					</Grid>
+				</Grid>
+			</Container>
+		</Box>
+	);
+};
+export default Testimonial;