feat: feed page and story, storyPost models

supunTE · Jan 23, 2024 · e1e636b · e1e636b
1 parent 1469708
commit e1e636b
Show file tree

Hide file tree

Showing 35 changed files with 2,625 additions and 5,534 deletions.
diff --git a/README.md b/README.md
@@ -54,6 +54,7 @@ Just run `nx build demoapp` to build the application. The build artifacts will b
 
 - folders: `kebab-case`
 - React component files: `PascalCase.component`
+  - component molecules: `PascalCase.mole`
 - React hooks files: `usePascalCase`
 - React context files: `PascalCase.context`
 - assets/lib/other files: `kebab-case`
@@ -65,6 +66,7 @@ Just run `nx build demoapp` to build the application. The build artifacts will b
 **Variables**
 
 - general: `camelCase`
+- default props: `+Defaults`
 - image/font variables: `snake_case`
 - project constants: `SCREAMING_SNAKE_CASE`
 
@@ -76,7 +78,7 @@ Just run `nx build demoapp` to build the application. The build artifacts will b
 
 **Components**
 
-- component names: `PascalCase`
+- component names: `PascalCaseComponent`
 
 **Routes**
 

diff --git a/apps/saagaraya/app/feed/components/content-card/ContentCard.component.tsx b/apps/saagaraya/app/feed/components/content-card/ContentCard.component.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Card } from '@mantine/core';
+import cs from 'classnames';
+
+import { DisplayLanguage, ExtractedImageColors } from '@kala-pavura/models';
+
+import { PostInteractionButtonAtom } from '@/components/atoms';
+import { useFontStatic } from '@/modules/hooks';
+import { extractImageColors } from '@/modules/utils/extract-image-colors';
+
+import { CardCover } from './molecules';
+
+type ContentCardComponentProps = {
+  id: string;
+  title: string;
+  imageSrc: string;
+  imageAlt: string;
+  description: string;
+};
+
+export function ContentCardComponent({
+  id,
+  title,
+  imageSrc,
+  imageAlt,
+  description,
+}: ContentCardComponentProps) {
+  const { primaryFont } = useFontStatic(DisplayLanguage.Sinhala);
+
+  const [imageExtractColors, setImageExtractColors] =
+    useState<ExtractedImageColors | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      const colors = await extractImageColors(imageSrc);
+      setImageExtractColors(colors);
+    })();
+  }, [imageSrc]);
+
+  return (
+    <Card
+      shadow="sm"
+      radius="md"
+      className={cs(
+        primaryFont.className,
+        'transition-all duration-1000 ease-in-out',
+      )}
+      styles={{
+        root: {
+          backgroundColor: imageExtractColors?.darkVariant.toString(),
+        },
+      }}>
+      <div>
+        <CardCover
+          imageSrc={imageSrc}
+          imageAlt={imageAlt}
+          title={title}
+          backgroundColor={imageExtractColors?.darkVariant
+            .getDeepCopy()
+            ?.setOpacity(0.75)
+            .addDarkness(20)
+            .toString()}
+          titleColor={imageExtractColors?.lightVariant.toString()}
+        />
+
+        <PostInteractionButtonAtom id={id} />
+
+        <h6 className={cs('text-white/40 text-xs min-h-[3em]', 'line-clamp-3')}>
+          {description}
+        </h6>
+
+        {/*<Button color="blue" fullWidth mt="md" radius="md">*/}
+        {/*  Book classic tour now*/}
+        {/*</Button>*/}
+      </div>
+    </Card>
+  );
+}
diff --git a/apps/saagaraya/app/feed/components/content-card/index.ts b/apps/saagaraya/app/feed/components/content-card/index.ts
@@ -0,0 +1 @@
+export * from './ContentCard.component';
diff --git a/apps/saagaraya/app/feed/components/content-card/molecules/CardCover.mole.tsx b/apps/saagaraya/app/feed/components/content-card/molecules/CardCover.mole.tsx
@@ -0,0 +1,63 @@
+import { AspectRatio } from '@mantine/core';
+import cs from 'classnames';
+import Image from 'next/image';
+
+import { DisplayLanguage } from '@kala-pavura/models';
+
+import { useFontStatic } from '@/modules/hooks';
+
+type CardImageProps = {
+  imageSrc: string;
+  imageAlt: string;
+  title: string;
+  backgroundColor?: string;
+  titleColor?: string;
+};
+
+export function CardCover({
+  imageSrc,
+  imageAlt,
+  title,
+  backgroundColor,
+  titleColor,
+}: CardImageProps) {
+  const { secondaryFont } = useFontStatic(DisplayLanguage.Sinhala);
+
+  return (
+    <div className={cs('relative')}>
+      <AspectRatio ratio={1}>
+        <Image
+          src={imageSrc}
+          alt={imageAlt}
+          width={500}
+          height={500}
+          className={cs('w-full rounded-md', 'object-cover')}
+        />
+      </AspectRatio>
+      <div
+        className={cs(
+          'absolute inset-0',
+          'rounded-md',
+          'flex items-center justify-center',
+          'transition-all duration-1000 ease-in-out',
+        )}
+        style={{
+          backgroundColor: backgroundColor ?? 'rgba(0, 0, 0)',
+        }}>
+        <h2
+          className={cs(
+            'p-4 text-3xl font-bold text-white',
+            'text-center line-clamp-3',
+            'drop-shadow-3xl',
+            'transition-all duration-1000 ease-in-out',
+            secondaryFont.className,
+          )}
+          style={{
+            color: titleColor ?? 'white',
+          }}>
+          {title}
+        </h2>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/saagaraya/app/feed/components/content-card/molecules/index.ts b/apps/saagaraya/app/feed/components/content-card/molecules/index.ts
@@ -0,0 +1 @@
+export * from './CardCover.mole';
diff --git a/apps/saagaraya/app/feed/components/index.ts b/apps/saagaraya/app/feed/components/index.ts
@@ -0,0 +1 @@
+export * from './content-card';
diff --git a/apps/saagaraya/app/feed/page.tsx b/apps/saagaraya/app/feed/page.tsx
@@ -1,9 +1,118 @@
+import cs from 'classnames';
+
 import { BackgroundComponent } from '@/components/background';
 
+import { ContentCardComponent } from './components';
+
+type Post = {
+  id: string;
+  imageSrc: string;
+  imageAlt: string;
+  title: string;
+  description: string;
+};
+const posts: Post[] = [
+  {
+    id: '1',
+    imageSrc:
+      'https://images.unsplash.com/photo-1705648265844-289eeb49d1f5?q=80&w=2028&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    imageAlt: 'A close up of a staircase made out of red blocks',
+    title: 'රක්ත කවුළු',
+    description:
+      'තැනින් තැන වැඩුණු තෘණ වසා ගත් සෙවණැලි කාගේ දැයි සිතමින් කුහුඹුවන් මහා වෘක්ෂ මූල අද්දර ගුහාවකින් එළියට විත් ඇවිද යන්නාහු ය. මම අද්දර වූ තවත් වෘක්ෂ මූලයක හිඳ එය සිතුවම් කරන්නෙමි.',
+  },
+  {
+    id: '2',
+    imageSrc:
+      'https://images.unsplash.com/photo-1580689473660-bf6c02088dbd?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    imageAlt: 'A green and white tractor on a field',
+    title: 'යුටෝපියා - සොඳුරු නවාතැන',
+    description:
+      'ඒ බිම් නම් නමින් පමණක් ම නොව රුවිනුත් යුටොපියා ම ය. එම නුවරට පමණක් රුවින් දෙවැනි සොඳුරු දිව්‍යාංගනාවෝ එහි වෙසෙති. මේ කතාන්දරය එම සොඳුරු කාන්තාවෝ දෙපළ ගැන ය.',
+  },
+  {
+    id: '3',
+    imageSrc:
+      'https://images.unsplash.com/photo-1559825481-12a05cc00344?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    imageAlt: 'A red fox sitting in tall grass',
+    title: 'සයුර',
+    description:
+      'දකුණු කදුකරයට පසු පසින් ඇත්තේ, සොඳුරු වනාන්තරයක් නොව, මළ මිනී පිරුණු මලාලන්තයකි. වසර දහස් ගණනක සිට මේ භූමිය මත අසල්වැසි රාජ්‍යධානි යුද්ධ කරමින්, මිනිසුන්ගේ ලේ සලමින් මේ භූමිය සෑදී ඇත.',
+  },
+  {
+    id: '4',
+    imageSrc:
+      'https://images.unsplash.com/photo-1510218830377-2e994ea9087d?q=80&w=2032&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    imageAlt:
+      'A person wearing a black jacket and black pants on a snow covered mountain',
+    title: 'අඳුරු මං සන්ධියේ අබිරහස',
+    description:
+      'තැනින් තැන වැඩුණු තෘණ වසා ගත් සෙවණැලි කාගේ දැයි සිතමින් කුහුඹුවන් මහා වෘක්ෂ මූල අද්දර ගුහාවකින් එළියට විත් ඇවිද යන්නාහු ය. මම අද්දර වූ තවත් වෘක්ෂ මූලයක හිඳ එය සිතුවම් කරන්නෙමි.',
+  },
+  {
+    id: '5',
+    imageSrc:
+      'https://images.unsplash.com/photo-1695540595388-6c57bcf8682c?q=80&w=1877&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    imageAlt:
+      'A person wearing a black jacket and black pants on a snow covered mountain',
+    title: 'නෝර්වේ ගමන',
+    description:
+      'ඒ බිම් නම් නමින් පමණක් ම නොව රුවිනුත් යුටොපියා ම ය. එම නුවරට පමණක් රුවින් දෙවැනි සොඳුරු දිව්‍යාංගනාවෝ එහි වෙසෙති. මේ කතාන්දරය එම සොඳුරු කාන්තාවෝ දෙපළ ගැන ය.',
+  },
+  {
+    id: '6',
+    imageSrc:
+      'https://images.unsplash.com/photo-1702444572159-6d316468c92e?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cmVkcm9zZXN8ZW58MHx8MHx8fDA%3D',
+    imageAlt:
+      'A person wearing a black jacket and black pants on a snow covered mountain',
+    title: 'රෝස මල් පෙති හැළුනා',
+    description:
+      'තැනින් තැන වැඩුණු තෘණ වසා ගත් සෙවණැලි කාගේ දැයි සිතමින් කුහුඹුවන් මහා වෘක්ෂ මූල අද්දර ගුහාවකින් එළියට විත් ඇවිද යන්නාහු ය. මම අද්දර වූ තවත් වෘක්ෂ මූලයක හිඳ එය සිතුවම් කරන්නෙමි.',
+  },
+  {
+    id: '7',
+    imageSrc:
+      'https://images.unsplash.com/photo-1553465528-5a213ccc0c7b?q=80&w=1996&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    imageAlt:
+      'A person wearing a black jacket and black pants on a snow covered mountain',
+    title: 'නොපෙනෙන සෙවනැළි',
+    description:
+      'දකුණු කදුකරයට පසු පසින් ඇත්තේ, සොඳුරු වනාන්තරයක් නොව, මළ මිනී පිරුණු මලාලන්තයකි. වසර දහස් ගණනක සිට මේ භූමිය මත අසල්වැසි රාජ්‍යධානි යුද්ධ කරමින්, මිනිසුන්ගේ ලේ සලමින් මේ භූමිය සෑදී ඇත.',
+  },
+  {
+    id: '8',
+    imageSrc:
+      'https://images.unsplash.com/photo-1518709268805-4e9042af9f23?q=80&w=1968&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    imageAlt:
+      'A person wearing a black jacket and black pants on a snow covered mountain',
+    title: 'ජෝසෆ් බලකොටුව',
+    description:
+      'තැනින් තැන වැඩුණු තෘණ වසා ගත් සෙවණැලි කාගේ දැයි සිතමින් කුහුඹුවන් මහා වෘක්ෂ මූල අද්දර ගුහාවකින් එළියට විත් ඇවිද යන්නාහු ය. මම අද්දර වූ තවත් වෘක්ෂ මූලයක හිඳ එය සිතුවම් කරන්නෙමි.',
+  },
+];
 export default function FeedPage() {
   return (
     <>
-      <BackgroundComponent />
+      <BackgroundComponent moreDarken={true} />
+      <div className={cs('h-full overflow-y-scroll')}>
+        <div
+          className={cs(
+            'p-10 m-auto',
+            'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-5',
+            'max-w-screen-2xl ',
+          )}>
+          {posts.map((post) => (
+            <ContentCardComponent
+              key={post.id}
+              id={post.id}
+              title={post.title}
+              imageSrc={post.imageSrc}
+              imageAlt={post.imageAlt}
+              description={post.description}
+            />
+          ))}
+        </div>
+      </div>
     </>
   );
 }
diff --git a/apps/saagaraya/app/global.css b/apps/saagaraya/app/global.css
@@ -1,3 +1,5 @@
-@tailwind base;
+@layer tailwind {
+  @tailwind base;
+}
 @tailwind components;
 @tailwind utilities;
diff --git a/apps/saagaraya/app/layout.tsx b/apps/saagaraya/app/layout.tsx
@@ -1,6 +1,9 @@
 import { ReactNode } from 'react';
 
+import { Providers } from './providers';
+
 import './global.css';
+import '@mantine/core/styles.css';
 
 export const metadata = {
   title: 'Saagaraya🌊',
@@ -10,7 +13,9 @@ export const metadata = {
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }
diff --git a/apps/saagaraya/app/page.tsx b/apps/saagaraya/app/page.tsx
@@ -1,58 +1,30 @@
-import { createTheme, MantineProvider } from '@mantine/core';
 import cs from 'classnames';
 import Image from 'next/image';
 
 import { DisplayLanguage } from '@kala-pavura/models';
 
-import { noto_sans_sinhala } from '@/assets/fonts';
 import { saagaraya_title_logo } from '@/assets/images';
-import bg_image from '@/assets/images/background.jpg';
+import { BackgroundComponent } from '@/components/background';
 import { Navbar } from '@/components/navbar';
 import { useFontStatic } from '@/modules/hooks';
 
-import { Providers } from './providers';
-
-import '@mantine/core/styles.css';
-
-const theme = createTheme({
-  fontFamily: noto_sans_sinhala.style.fontFamily,
-});
-
 export default async function Index() {
   const { primaryFont } = useFontStatic(DisplayLanguage.Sinhala);
 
   return (
-    <Providers>
-      <MantineProvider theme={theme}>
-        <div className={cs(primaryFont.className, 'h-full')}>
-          <Navbar />
-          <div
-            className={cs('w-full h-full', 'flex justify-center items-center')}>
-            <Image
-              src={saagaraya_title_logo}
-              width={500}
-              height={300}
-              alt="background"
-              priority={true}
-              className={cs('backdrop-filter')}
-            />
-          </div>
-          <div
-            className={cs(
-              'z-[-5] absolute',
-              'h-full w-full inset-0',
-              'bg-zinc-900/60',
-            )}
-          />
-          <Image
-            src={bg_image}
-            fill={true}
-            alt="background"
-            priority={true}
-            className={'-z-10'}
-          />
-        </div>
-      </MantineProvider>
-    </Providers>
+    <div className={cs(primaryFont.className, 'h-full')}>
+      <Navbar />
+      <div className={cs('w-full h-full', 'flex justify-center items-center')}>
+        <Image
+          src={saagaraya_title_logo}
+          width={500}
+          height={300}
+          alt="background"
+          priority={true}
+          className={cs('backdrop-filter')}
+        />
+      </div>
+      <BackgroundComponent />
+    </div>
   );
 }