From f92fbb940f7bf720ffc2dba9b07be9a7c7fe18f0 Mon Sep 17 00:00:00 2001
From: Zaki <zakiamanullah215@gmail.com>
Date: Sun, 5 Nov 2023 17:56:18 +0700
Subject: [PATCH] page: podcaster list
---
src/App.tsx | 4 +
src/components/PodcasterCard.tsx | 80 +++++++++++++++
src/pages/PodcasterList.tsx | 161 +++++++++++++++++++++++++++++++
3 files changed, 245 insertions(+)
create mode 100644 src/components/PodcasterCard.tsx
create mode 100644 src/pages/PodcasterList.tsx
diff --git a/src/App.tsx b/src/App.tsx
index 0c39321..7250b11 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import Navbar from "./components/Navbar";
import { ChakraProvider, CSSReset } from "@chakra-ui/react";
import Podcaster from "./pages/Podcaster";
import ProducedPodcast from './pages/ProducedPodcast';
+import PodcasterList from './pages/PodcasterList';
import theme from './theme';
@@ -24,6 +25,9 @@ function App() {
<Route exact path="/edit-podcast">
<ProducedPodcast />
</Route>
+ <Route exact path="/podcaster">
+ <PodcasterList />
+ </Route>
<Route exact path="/mycomments"></Route>
<Route exact path="/profile"></Route>
<Route exact path="/logout"></Route>
diff --git a/src/components/PodcasterCard.tsx b/src/components/PodcasterCard.tsx
new file mode 100644
index 0000000..beff298
--- /dev/null
+++ b/src/components/PodcasterCard.tsx
@@ -0,0 +1,80 @@
+import {
+ Text,
+ Image,
+ Card,
+ CardBody,
+ Heading,
+ Stack
+} from "@chakra-ui/react";
+
+interface PodcasterCardProp {
+ title: string;
+ image: string;
+ description: string;
+}
+
+const PodcasterCard: React.FC<PodcasterCardProp> = ({ title, image, description }) => {
+ return (
+ <Card
+ maxW={"sm"}
+ borderRadius={"md"}
+ color={"white"}
+ my={3}
+ mx={4}
+ bg={"#181818"}
+ _hover={{
+ bg: "#2a2a2a",
+ cursor: "pointer",
+ }}
+ >
+ <CardBody
+ p={4}
+ maxW={"md"}
+ display={"flex"}
+ flexDirection={"column"}
+ alignItems={"start"}
+ justifyContent={"flex-start"}
+ >
+ <Image
+ src={image}
+ alt="thumbnail"
+ width={"140x"}
+ height={"140px"}
+ borderRadius={"md"}
+ mb={4}
+ />
+ <Stack
+ spacing='2'
+ maxW={"140px"}
+ textAlign={"start"}
+ >
+ <Heading
+ fontSize='18px'
+ style={{
+ display: "-webkit-box",
+ WebkitLineClamp: 1,
+ WebkitBoxOrient: "vertical",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ }}
+ >{title}</Heading>
+ <Text
+ fontSize='14px'
+ style={{
+ display: "-webkit-box",
+ WebkitLineClamp: 2,
+ WebkitBoxOrient: "vertical",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ }}
+ color={"#b0b0b0"}
+ >
+ {description}
+ </Text>
+ </Stack>
+ </CardBody>
+ </Card>
+ );
+}
+
+export default PodcasterCard;
\ No newline at end of file
diff --git a/src/pages/PodcasterList.tsx b/src/pages/PodcasterList.tsx
new file mode 100644
index 0000000..d429510
--- /dev/null
+++ b/src/pages/PodcasterList.tsx
@@ -0,0 +1,161 @@
+import { Flex } from "@chakra-ui/react";
+import PodcasterCard from "../components/PodcasterCard";
+import React from "react";
+
+const dummyPodcasters = [
+ {
+ title: "Bad Friends",
+ image: "https://megaphone.imgix.net/podcasts/7ff4ef6e-e6b7-11ec-a598-dbd652a3d5be/image/709d771dd0b04ce8.jpeg?ixlib=rails-4.3.1&max-w=3000&max-h=3000&fit=crop&auto=format,compress",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "The Joe Rogan Experience",
+ image: "./src/assets/JREiTunesImage2.jpg",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Tiny Meat Gang",
+ image: "https://i.scdn.co/image/ab6765630000ba8af9875003f82148c55d4e3239",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Bad Friends",
+ image: "https://megaphone.imgix.net/podcasts/7ff4ef6e-e6b7-11ec-a598-dbd652a3d5be/image/709d771dd0b04ce8.jpeg?ixlib=rails-4.3.1&max-w=3000&max-h=3000&fit=crop&auto=format,compress",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "The Joe Rogan Experience",
+ image: "./src/assets/JREiTunesImage2.jpg",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Tiny Meat Gang",
+ image: "https://i.scdn.co/image/ab6765630000ba8af9875003f82148c55d4e3239",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Bad Friends",
+ image: "https://megaphone.imgix.net/podcasts/7ff4ef6e-e6b7-11ec-a598-dbd652a3d5be/image/709d771dd0b04ce8.jpeg?ixlib=rails-4.3.1&max-w=3000&max-h=3000&fit=crop&auto=format,compress",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "The Joe Rogan Experience",
+ image: "./src/assets/JREiTunesImage2.jpg",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Tiny Meat Gang",
+ image: "https://i.scdn.co/image/ab6765630000ba8af9875003f82148c55d4e3239",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Bad Friends",
+ image: "https://megaphone.imgix.net/podcasts/7ff4ef6e-e6b7-11ec-a598-dbd652a3d5be/image/709d771dd0b04ce8.jpeg?ixlib=rails-4.3.1&max-w=3000&max-h=3000&fit=crop&auto=format,compress",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "The Joe Rogan Experience",
+ image: "./src/assets/JREiTunesImage2.jpg",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Tiny Meat Gang",
+ image: "https://i.scdn.co/image/ab6765630000ba8af9875003f82148c55d4e3239",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Bad Friends",
+ image: "https://megaphone.imgix.net/podcasts/7ff4ef6e-e6b7-11ec-a598-dbd652a3d5be/image/709d771dd0b04ce8.jpeg?ixlib=rails-4.3.1&max-w=3000&max-h=3000&fit=crop&auto=format,compress",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "The Joe Rogan Experience",
+ image: "./src/assets/JREiTunesImage2.jpg",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Tiny Meat Gang",
+ image: "https://i.scdn.co/image/ab6765630000ba8af9875003f82148c55d4e3239",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Bad Friends",
+ image: "https://megaphone.imgix.net/podcasts/7ff4ef6e-e6b7-11ec-a598-dbd652a3d5be/image/709d771dd0b04ce8.jpeg?ixlib=rails-4.3.1&max-w=3000&max-h=3000&fit=crop&auto=format,compress",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "The Joe Rogan Experience",
+ image: "./src/assets/JREiTunesImage2.jpg",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Tiny Meat Gang",
+ image: "https://i.scdn.co/image/ab6765630000ba8af9875003f82148c55d4e3239",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Bad Friends",
+ image: "https://megaphone.imgix.net/podcasts/7ff4ef6e-e6b7-11ec-a598-dbd652a3d5be/image/709d771dd0b04ce8.jpeg?ixlib=rails-4.3.1&max-w=3000&max-h=3000&fit=crop&auto=format,compress",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "The Joe Rogan Experience",
+ image: "./src/assets/JREiTunesImage2.jpg",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Tiny Meat Gang",
+ image: "https://i.scdn.co/image/ab6765630000ba8af9875003f82148c55d4e3239",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Bad Friends",
+ image: "https://megaphone.imgix.net/podcasts/7ff4ef6e-e6b7-11ec-a598-dbd652a3d5be/image/709d771dd0b04ce8.jpeg?ixlib=rails-4.3.1&max-w=3000&max-h=3000&fit=crop&auto=format,compress",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "The Joe Rogan Experience",
+ image: "./src/assets/JREiTunesImage2.jpg",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ },
+ {
+ title: "Tiny Meat Gang",
+ image: "https://i.scdn.co/image/ab6765630000ba8af9875003f82148c55d4e3239",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl vitae aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam nisl nisl vitae.",
+ }
+]
+
+const PodcasterList = () => {
+ return (
+ <Flex
+ flexDirection={"column"}
+ alignItems={"center"}
+ justifyContent={"center"}
+ >
+ <Flex
+ px={"10"}
+ py={"20px"}
+ background={"black"}
+ minH={"100vh"}
+ flexDirection={"row"}
+ flexFlow={"row wrap"}
+ justifyContent={"flex-start"}
+ maxW={""}
+ >
+ {
+ dummyPodcasters.map((podcaster) => (
+ <React.Fragment key={podcaster.title}>
+ <PodcasterCard
+ title={podcaster.title}
+ image={podcaster.image}
+ description={podcaster.description}
+ />
+ </React.Fragment>
+ ))
+ }
+ </Flex>
+ </Flex>
+ );
+};
+
+export default PodcasterList;
\ No newline at end of file
--
GitLab