Skip to content
Snippets Groups Projects
Commit f92fbb94 authored by Zaki's avatar Zaki
Browse files

page: podcaster list

parent 85fb61aa
Branches
Tags
No related merge requests found
...@@ -5,6 +5,7 @@ import Navbar from "./components/Navbar"; ...@@ -5,6 +5,7 @@ import Navbar from "./components/Navbar";
import { ChakraProvider, CSSReset } from "@chakra-ui/react"; import { ChakraProvider, CSSReset } from "@chakra-ui/react";
import Podcaster from "./pages/Podcaster"; import Podcaster from "./pages/Podcaster";
import ProducedPodcast from './pages/ProducedPodcast'; import ProducedPodcast from './pages/ProducedPodcast';
import PodcasterList from './pages/PodcasterList';
import theme from './theme'; import theme from './theme';
...@@ -24,6 +25,9 @@ function App() { ...@@ -24,6 +25,9 @@ function App() {
<Route exact path="/edit-podcast"> <Route exact path="/edit-podcast">
<ProducedPodcast /> <ProducedPodcast />
</Route> </Route>
<Route exact path="/podcaster">
<PodcasterList />
</Route>
<Route exact path="/mycomments"></Route> <Route exact path="/mycomments"></Route>
<Route exact path="/profile"></Route> <Route exact path="/profile"></Route>
<Route exact path="/logout"></Route> <Route exact path="/logout"></Route>
......
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
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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment