style: flipping cards as background

README.md

@@ -1,9 +1,5 @@
 # Hackernews newsletter
 
-## To do
-
-- Polish the UI
-
 ## Vercel basics
 
 Install vercel cli

app/api/news/route.ts

@@ -0,0 +1,17 @@
+import prisma from '../../../prisma/prisma';
+import { ApiResponse } from '../../../utils/apiResponse';
+
+export async function GET() {
+  const news = await prisma.news.findMany({
+    orderBy: {
+      createdAt: 'desc'
+    },
+    take: 50
+  });
+
+  if (news && news.length === 50) {
+    return ApiResponse(200, JSON.stringify(news));
+  }
+
+  return ApiResponse(500, 'Internal server error');
+}

app/globals.css

@@ -66,16 +66,6 @@
   }
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    @apply bg-custom-background bg-size-cover;
-  }
-}
-
 .styledH2 {
   @apply text-xl font-bold;
 }

app/layout.tsx

@@ -1,6 +1,7 @@
 import { Analytics } from '@vercel/analytics/react';
 import type { Metadata } from 'next';
 import { Inter as FontSans } from 'next/font/google';
+import { Background } from '../components/custom/background/background';
 import { cn } from '../utils/utils';
 import './globals.css';
 
@@ -29,7 +30,7 @@ export default function RootLayout({
           fontSans.variable
         )}
       >
-        {children}
+        <Background>{children}</Background>
         <Analytics />
       </body>
     </html>

app/privacy/page.tsx

@@ -434,7 +434,7 @@ export default function Privacy() {
       title='Privacy Policy'
       description='Last updated: December 03, 2023'
       content={body}
-      style='w-2/3'
+      style='w-2/3 overflow-auto h-[90vh]'
     />
   );
 }

components/custom/background/background.tsx

@@ -0,0 +1,9 @@
+import { Tiles } from './components/tiles';
+
+type BackgroundProps = {
+  children: React.ReactNode;
+};
+
+export function Background({ children }: BackgroundProps) {
+  return <Tiles>{children}</Tiles>;
+}

components/custom/background/components/card.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { z } from 'zod';
+import { NewsSchema } from '../../../../utils/types';
+import { Story } from './story';
+
+type CardProps = {
+  newsA?: z.infer<typeof NewsSchema>;
+  newsB?: z.infer<typeof NewsSchema>;
+};
+
+export function Card({ newsA, newsB }: CardProps) {
+  const [switched, setSwitched] = useState(false);
+  const [active, setActive] = useState(Math.random() < 0.5);
+  const [delayed, setDelayed] = useState(true);
+
+  useEffect(() => {
+    const randomDelay = Math.floor(Math.random() * 5000);
+
+    const interval = setInterval(
+      () => {
+        setSwitched(true);
+
+        window.setTimeout(function () {
+          setSwitched(false);
+          setActive(!active);
+          setDelayed(false);
+        }, 500 / 2);
+      },
+      delayed ? randomDelay : randomDelay + 3000
+    );
+
+    return () => clearInterval(interval);
+  }, [active, delayed]);
+
+  if (!newsA || !newsB) return <div></div>;
+
+  return (
+    <div className={`transform ${switched ? 'animate-rotate' : ''}`}>
+      <div className='transform-gpu'>
+        <div className={`absolute left-0 top-0 w-full ${''}`}>
+          {active ? Story(newsA, true) : Story(newsB, false)}
+        </div>
+      </div>
+    </div>
+  );
+}

components/custom/background/components/story.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { z } from 'zod';
+import { NewsSchema } from '../../../../utils/types';
+
+export function Story(story: z.infer<typeof NewsSchema>, side: boolean) {
+  const backgroundColors = [
+    'bg-red-300',
+    'bg-blue-300',
+    'bg-green-300',
+    'bg-yellow-300',
+    'bg-indigo-300',
+    'bg-purple-300',
+    'bg-pink-300',
+    'bg-gray-300',
+    'bg-teal-300',
+    'bg-orange-300'
+  ];
+
+  const fadingColors = [
+    'to-red-300',
+    'to-blue-300',
+    'to-green-300',
+    'to-yellow-300',
+    'to-indigo-300',
+    'to-purple-300',
+    'to-pink-300',
+    'to-gray-300',
+    'to-teal-300',
+    'to-orange-300'
+  ];
+
+  const firstRandom = Math.floor(Math.random() * backgroundColors?.length);
+  const secondRandom = Math.floor(Math.random() * backgroundColors?.length);
+
+  const [firstColor, setFirstColor] = useState(firstRandom);
+  const [secondColor, setSecondColor] = useState(secondRandom);
+  const [switched, setSwitched] = useState(true);
+
+  if (switched !== side) {
+    setFirstColor(firstRandom);
+    setSecondColor(secondRandom);
+
+    setSwitched(side);
+  }
+
+  const colorIndex = side ? firstColor : secondColor;
+
+  return (
+    <div
+      className={`h-40 w-40 overflow-hidden p-6 shadow-sm ${backgroundColors[colorIndex]}`}
+    >
+      <h1 className='font-semibold'>{story.title}</h1>
+      <p className='italic'>{story.by}</p>
+      <div
+        className={`absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-b from-transparent ${fadingColors[colorIndex]}`}
+      ></div>
+    </div>
+  );
+}

components/custom/background/components/tiles.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { z } from 'zod';
+import { NewsSchema } from '../../../../utils/types';
+import { Card } from './card';
+
+type TilesProps = {
+  children: React.ReactNode;
+};
+
+export const Tiles = ({ children }: TilesProps) => {
+  const pathname = usePathname();
+  const [windowSize, setWindowSize] = useState<{
+    width: number;
+    height: number;
+  }>({
+    width: 0,
+    height: 0
+  });
+  const [news, setNews] = useState<z.infer<typeof NewsSchema>[]>();
+
+  useEffect(() => {
+    async function getNews() {
+      const news = await fetch('/api/news').then(res => res.json());
+
+      if (news) {
+        setNews(news);
+      }
+    }
+
+    if (!news) {
+      getNews();
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [setWindowSize, news]);
+
+  if (pathname === '/maintenance') return <div>{children}</div>;
+
+  function renderTile(key: number) {
+    if (!news) return <div key={key}></div>;
+
+    const randomA = Math.floor(Math.random() * news?.length);
+    const randomB = Math.floor(
+      Math.random() * news?.filter((_, index) => index !== randomA)?.length
+    );
+
+    return (
+      <div key={key} className='h-40 w-40'>
+        <Card newsA={news[randomA]} newsB={news[randomB]} />
+      </div>
+    );
+  }
+
+  function renderRow(columns: number, key: number) {
+    return (
+      <div key={key} className='flex justify-between'>
+        {Array.from({ length: columns }).map((_, index) => renderTile(index))}
+      </div>
+    );
+  }
+
+  function renderGrid() {
+    const columns = Math.ceil(windowSize.width / (40 * 4));
+    const rows = Math.ceil(windowSize.height / (40 * 4));
+
+    return (
+      <div>
+        <div className='flex flex-col justify-between'>
+          {Array.from({ length: rows }).map((_, index) =>
+            renderRow(columns, index)
+          )}
+        </div>
+        <div className='absolute inset-0 flex items-center justify-center'>
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  return <div className='flex flex-col justify-between'>{renderGrid()}</div>;
+};

components/ui/button.tsx

@@ -8,7 +8,8 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default:
+          'bg-primary text-primary-foreground hover:bg-primary/90 bg-blue-500 hover:bg-blue-700',
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:

public/maintenance.html

@@ -1,16 +1,45 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
+    <script>
+      window.onload = function () {
+        var body = document.getElementsByTagName('body')[0];
+        var size = 160; // size of each square
+        var squaresPerRow = Math.ceil(window.innerWidth / size);
+        var squaresPerColumn = Math.ceil(window.innerHeight / size);
+
+        for (var i = 0; i < squaresPerRow; i++) {
+          for (var j = 0; j < squaresPerColumn; j++) {
+            var square = document.createElement('div');
+            square.style.width = size + 'px';
+            square.style.height = size + 'px';
+            square.style.backgroundColor = getRandomColor();
+            square.style.position = 'absolute';
+            square.style.left = i * size + 'px';
+            square.style.top = j * size + 'px';
+            body.appendChild(square);
+          }
+        }
+      };
+
+      function getRandomColor() {
+        var letters = '0123456789ABCDEF';
+        var color = '#';
+        for (var i = 0; i < 6; i++) {
+          color += letters[Math.floor(Math.random() * 16)];
+        }
+        return color;
+      }
+    </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Maintenance</title>
+    <title>Maintenance :)</title>
     <style>
       body {
-        background: url('/background.jpg') no-repeat center center fixed;
+        background-size: 60px 60px;
-        -webkit-background-size: cover;
+        background-position:
-        -moz-background-size: cover;
+          0 0,
-        -o-background-size: cover;
+          30px 30px;
-        background-size: cover;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -25,6 +54,7 @@
         padding: 20px;
         font-family: Arial, sans-serif;
         background-color: rgba(255, 255, 255, 0.8);
+        z-index: 1;
       }
       .card h1 {
         font-size: 2em;
@@ -38,7 +68,7 @@
   </head>
   <body>
     <div class="card">
-      <h1>Maintenance</h1>
+      <h1>Maintenance :)</h1>
       <p>We are doing stuff. Please come back later...</p>
     </div>
   </body>

tailwind.config.ts

@@ -18,12 +18,6 @@ module.exports = {
       }
     },
     extend: {
-      backgroundImage: {
-        'custom-background': "url('/background.jpg')"
-      },
-      backgroundSize: {
-        'size-cover': '100% auto'
-      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
@@ -72,11 +66,21 @@ module.exports = {
         'accordion-up': {
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: 0 }
+        },
+        rotate: {
+          '0%': { transform: 'rotateY(0deg)' },
+          '100%': { transform: 'rotateY(180deg)' }
+        },
+        'rotate-inverse': {
+          '0%': { transform: 'rotateY(180deg)' },
+          '100%': { transform: 'rotateY(0deg)' }
         }
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out'
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        rotate: 'rotate 0.5s linear both',
+        'rotate-inverse': 'rotate-inverse 0.5s linear both'
       },
       fontFamily: {
         sans: ['var(--font-sans)', ...fontFamily.sans]