feat: update component styles and add author display

- Removed inline height style from `carousel-top-titles` component to improve design consistency. - Added new icon `IconRosetteDiscountCheckFilled` for author verification in `poster-top-titles`. - Modified JSX structure and styles in `poster-top-titles` to center images and display author information. - Updated `explore` section to change titles in the content list.
WatchItDev · Nov 12, 2024 · 84bd980 · 84bd980
1 parent 8bfbf9e
commit 84bd980
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/src/components/carousel/variants/carousel-top-titles.tsx b/src/components/carousel/variants/carousel-top-titles.tsx
@@ -50,7 +50,6 @@ export default function CarouselTopTitles({ data, category }: Props) {
 
   return (
     <Box
-      style={{ height: '90vh' }}
       sx={{
         overflow: 'hidden',
         position: 'relative',

diff --git a/src/components/poster/variants/poster-top-titles.tsx b/src/components/poster/variants/poster-top-titles.tsx
@@ -11,7 +11,11 @@ import { useRouter } from '@src/routes/hooks';
 import { paths } from '@src/routes/paths.ts';
 import {StackItem} from "@src/components/poster/variants/poster-trending-topic.tsx";
 import Button from '@mui/material/Button';
-import { IconDeviceTv, IconPlayerPlay } from '@tabler/icons-react';
+import {
+  IconDeviceTv,
+  IconPlayerPlay,
+  IconRosetteDiscountCheckFilled
+} from '@tabler/icons-react';
 import Box from "@mui/material/Box";
 
 // ----------------------------------------------------------------------
@@ -40,9 +44,15 @@ const PosterTopTitles = ({ title, images, id, synopsis }: Poster) => {
         zIndex: 0,
       }} ></Box>
       <StackItem sx={{minWidth: '50%', background: 'transparent', padding: 0}}>
-        <Image style={{borderRadius:'10px', boxShadow: '0 0 25px #CCC'}} alt={title} src={images.vertical} ratio='1/1' />
+        <Box sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+          <Image style={{borderRadius:'10px', display:'flex', alignItems: 'center', maxWidth:'400px', boxShadow: '0 0 25px #CCC'}} alt={title} src={images.vertical} ratio='1/1' />
+        </Box>
       </StackItem>
-      <StackItem sx={{minWidth: '50%', display: 'flex', alignItems: 'center', background: 'transparent', padding: '0 0 0 10px'}}>
+      <StackItem sx={{maxWidth: '40%', display: 'flex', alignItems: 'center', background: 'transparent', padding: '0 0 0 10px'}}>
         <Paper
           sx={{
             backgroundColor: 'transparent',
@@ -68,8 +78,28 @@ const PosterTopTitles = ({ title, images, id, synopsis }: Poster) => {
               <Typography style={{fontSize: 'clamp(2rem, 1vw, 2rem)'}} noWrap variant='h1' sx={{ mb: 1 }}>
                 {title}
               </Typography>
+              <Box sx={{display: 'flex', alignItems: 'flex-start'}}>
+                <Stack direction="row" spacing={0} alignItems="center" onClick={() => alert('Clicked') }>
+                  <Typography style={{ marginRight: 5}} variant='caption'>
+                    by
+                  </Typography>
+                  <Typography style={{ gap:4, display: 'flex', alignItems: 'center', backgroundColor: 'rgba(0,0,0,.9)', padding: '4px 10px', borderRadius: 5}} variant='caption'>
+                    <Image ratio={'1/1'} style={{width: '20px', height: '20px', borderRadius: '50%'}} src={images.vertical}>
 
-              <Typography style={{fontSize: 'clamp(0.5rem, 1vw, 2rem)'}} variant='h6' sx={{ mb: 1 }}>
+                    </Image>
+                    Jhon Doe <IconRosetteDiscountCheckFilled />
+                  </Typography>
+                </Stack>
+              </Box>
+
+              <Typography
+                sx={{
+                  display: '-webkit-box',
+                  overflow: 'hidden',
+                  WebkitBoxOrient: 'vertical',
+                  WebkitLineClamp: 4,
+                }}
+                variant='h6'>
                 {synopsis}
               </Typography>
 

diff --git a/src/sections/explore/view.tsx b/src/sections/explore/view.tsx
@@ -51,25 +51,25 @@ export default function ExploreView() {
     {
       id: 1,
       desc: 'Description for the content trending during the week ',
-      title: 'The Lord of the Rings',
+      title: 'Jhon Doe',
       image: 'https://static0.srcdn.com/wordpress/wp-content/uploads/2023/09/lord-of-the-rings-movies-in-order.jpg'
     },
     {
       id: 2,
       desc: 'Description for the content trending during the week ',
-      title: 'Resident Evil',
+      title: 'Dina Doe',
       image: 'https://i.blogs.es/6ff623/resident-evil-milla-jovovich/1366_2000.jpeg'
     },
     {
       id: 3,
       desc: 'Description for the content trending during the week ',
-      title: 'Gladiator',
+      title: 'Lina Doe',
       image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSpAo-w7KfZSCvVq81iaatdILc-VWTw-2TkQ&s'
     },
     {
       id: 4,
       desc: 'Description for the content trending during the week ',
-      title: 'Matrix',
+      title: 'Jane Doe',
       image: 'https://static.euronews.com/articles/stories/08/35/93/32/1440x810_cmsv2_c7416dac-8a99-57b8-b728-b28d69040539-8359332.jpg'
     }
   ];