Merge pull request #89 from dotslashf/development

Development
dotslashf · Oct 3, 2024 · 8b26b77 · 8b26b77
2 parents 7e60606 + 88242b3
commit 8b26b77
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/_components/CopyPastaByIdPage.tsx b/src/app/_components/CopyPastaByIdPage.tsx
@@ -5,8 +5,10 @@ import BreadCrumbs from "~/components/BreadCrumbs";
 import CardById from "~/components/CopyPasta/CardById";
 import CardRelated from "~/components/CopyPasta/CardRelated";
 import SkeletonCopyPasta from "~/components/Skeleton/CopyPasta";
-import { getBreadcrumbs, trimContent } from "~/lib/utils";
+import CustomTweet from "~/components/Tweet/CustomTweet";
+import { getBreadcrumbs, getTweetId, trimContent } from "~/lib/utils";
 import { api } from "~/trpc/react";
+import TweetPage from "./TweetPage";
 
 interface CopyPastaByIdProps {
   id: string;
@@ -44,14 +46,20 @@ export default function CopyPastaById({ id }: CopyPastaByIdProps) {
   });
 
   return (
-    <div className="flex w-full flex-col">
+    <div className="flex w-full flex-col gap-6">
       <BreadCrumbs path={currentPath} />
       {copyPasta && <CardById copyPasta={copyPasta} />}
-      <div className="mt-10 flex flex-col gap-2 lg:mt-20">
-        <div className="self-center text-sm font-semibold">
+      <div className="flex flex-col gap-2">
+        <div className="text-sm font-semibold">Tweet Preview:</div>
+        {copyPasta.source === "Twitter" && copyPasta.sourceUrl && (
+          <TweetPage id={getTweetId(copyPasta.sourceUrl)!} />
+        )}
+      </div>
+      <div className="flex flex-col gap-2">
+        <div className="text-sm font-semibold">
           Template Dengan Tag Yang Sama:
         </div>
-        <div className="mt-2 grid w-full grid-cols-1 gap-4 lg:grid-cols-3">
+        <div className="grid w-full grid-cols-1 gap-4 lg:grid-cols-3">
           {related && !isLoading
             ? related.map((copy) => {
                 return <CardRelated key={copy.id} copyPasta={copy} />;

diff --git a/src/app/_components/TweetPage.tsx b/src/app/_components/TweetPage.tsx
@@ -10,7 +10,7 @@ import { sanitizeTweetEnrich } from "~/lib/utils";
 
 interface TweetPageProps {
   id: string;
-  onTweetLoaded: ({
+  onTweetLoaded?: ({
     content,
     postedAt,
   }: {
@@ -35,10 +35,11 @@ export default function TweetPage({ id, onTweetLoaded }: TweetPageProps) {
         const { tweet }: { tweet: Tweet } = await response.json();
         setTweet(tweet);
         const enrich = enrichTweet(tweet);
-        onTweetLoaded({
-          content: sanitizeTweetEnrich(enrich),
-          postedAt: parseISO(tweet.created_at),
-        });
+        onTweetLoaded &&
+          onTweetLoaded({
+            content: sanitizeTweetEnrich(enrich),
+            postedAt: parseISO(tweet.created_at),
+          });
       } catch (err) {
         console.error(err);
         setError(err instanceof Error ? err : new Error("An error occurred"));

diff --git a/src/components/Tweet/CustomTweet.tsx b/src/components/Tweet/CustomTweet.tsx
@@ -41,7 +41,7 @@ export default function CustomTweet({ tweet: t }: CustomTweetProps) {
           <p className="mt-1 text-base text-gray-600">
             {sanitizeTweet(tweet.parent.text)}
           </p>
-          <div className="flex justify-between text-sm text-gray-500">
+          <div className="flex flex-col justify-between gap-2 text-sm text-gray-500 md:flex-row">
             <div className="flex gap-4">
               <span className="inline-flex items-center">
                 <MessageCircle className="mr-2 h-4 w-4" />
@@ -120,6 +120,7 @@ export default function CustomTweet({ tweet: t }: CustomTweetProps) {
             href={`https://x.com/${tweet.user.screen_name}/status/${tweet.id_str}`}
             className={cn(buttonVariants({ variant: "secondary", size: "sm" }))}
             prefetch={false}
+            target="__blank"
           >
             <Link2 className="mr-2 h-4 w-4" />
             Cek Tweet

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -77,7 +77,7 @@ export function trimContent(content: string, length = 255) {
 
 export function getTweetId(tweetUrl: string) {
   const match = tweetUrl.match(/\/status\/(\d+)/);
-  return match ? match[1] : null;
+  return match ? match[1] : undefined;
 }
 
 export function getRandomElement(array: string[]) {