Tweet list

Author: gonstoll

app/routes/_index.tsx

@@ -2,8 +2,19 @@ import {getAuth} from '@clerk/remix/ssr.server'
 import {redirect, type LoaderFunctionArgs} from '@remix-run/node'
 import {useLoaderData} from '@remix-run/react'
 import {eq} from 'drizzle-orm'
+import {Badge} from '../components/ui/badge'
+import {Button} from '../components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '../components/ui/card'
 import {db} from '../db'
 import {tweet} from '../db/schema'
+import {classNames} from '../utils/classnames'
 
 export async function loader(args: LoaderFunctionArgs) {
   const {userId} = await getAuth(args)
@@ -19,5 +30,136 @@ export async function loader(args: LoaderFunctionArgs) {
 export default function Index() {
   const {tweets} = useLoaderData<typeof loader>()
 
-  return <pre>{JSON.stringify(tweets, null, 2)}</pre>
+  return (
+    <div className="mx-auto w-full max-w-7xl">
+      <ul className="mx-auto grid w-full justify-center gap-8 sm:grid-cols-1 md:grid-cols-3">
+        {tweets.map(tweet => {
+          return (
+            <li key={tweet.id}>
+              <Tweet />
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
+
+function Tweet() {
+  return (
+    <Card>
+      <a href="https://x.com/pedrito">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <img
+              alt="Pedrito"
+              className="aspect-square rounded-full object-cover"
+              height="40"
+              width="40"
+              src="https://tweet-archive.gonzalostoll.com/_next/image?url=https://pbs.twimg.com/profile_images/1718058631315222528/9w6iOXwt_normal.jpg&w=96&q=75"
+            />
+            <div className="flex flex-col">
+              <CardTitle className="mb-auto text-base">Pedro Cattori</CardTitle>
+              <CardDescription>@pedrito</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+      </a>
+
+      <CardContent>
+        <p className="mb-4">
+          For anyone else migrating their @remix_run app to our @vite_js plugin,
+          this is a great reference migration that touched all the edge cases
+          🐨🏂🤘
+        </p>
+
+        <p className="text-xs text-muted-foreground">
+          January 18, 2024 at 12:01 AM
+        </p>
+
+        <div
+          role="none"
+          data-orientation="horizontal"
+          className="my-1 h-[1px] w-full shrink-0 bg-border"
+        />
+
+        <div className="flex gap-2">
+          <TweetStats type="likes" count={543} />
+          <TweetStats type="retweet" count={13} />
+        </div>
+
+        <Button variant="secondary" className="mt-6 w-full">
+          Go to tweet
+        </Button>
+      </CardContent>
+
+      <div
+        role="none"
+        data-orientation="horizontal"
+        className="h-[1px] w-full shrink-0 bg-border"
+      />
+
+      <CardFooter className="block bg-secondary px-6 py-4">
+        <Badge variant="default">Remix</Badge>
+        <p className="mt-2 text-sm text-secondary-foreground">
+          Migrating remix to vite plugin. Making the description a little bit
+          longer. A little more. Moar moar moar.
+        </p>
+
+        <div className="mt-2 flex items-center gap-2">
+          <Button size="sm" variant="outline">
+            Edit
+          </Button>
+          <Button size="sm" variant="destructive">
+            Delete
+          </Button>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
+
+function TweetStats({
+  count,
+  type = 'likes',
+}: {
+  count: number
+  type: 'likes' | 'retweet'
+}) {
+  const likeClassNames = 'text-red-400 dark:text-red-600'
+  const retweetClassNames = 'text-green-400 dark:text-green-600'
+
+  return (
+    <div className="flex items-center">
+      <svg
+        className={classNames('h-3 w-3', {
+          [likeClassNames]: type === 'likes',
+          [retweetClassNames]: type === 'retweet',
+        })}
+        fill="currentColor"
+        height="24"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        {type === 'likes' ? (
+          <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+        ) : (
+          <path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z" />
+        )}
+      </svg>
+      <span
+        className={classNames('ml-1 text-xs', {
+          [likeClassNames]: type === 'likes',
+          [retweetClassNames]: type === 'retweet',
+        })}
+      >
+        {count}
+      </span>
+    </div>
+  )
 }

app/utils/classnames.ts

@@ -0,0 +1,14 @@
+export function classNames(
+  ...classes: Array<string | Record<string, boolean>>
+) {
+  const mappedClasses = classes.map(cl => {
+    if (typeof cl === 'string') {
+      return cl
+    } else {
+      return Object.keys(cl)
+        .filter(key => cl[key])
+        .join(' ')
+    }
+  })
+  return mappedClasses.join(' ')
+}