insights: rename to "social media posts" and show links to sm

Author: maslianok

app/@modal/(.)insights/[id]/page.tsx

@@ -1,6 +1,6 @@
 import { notFound } from 'next/navigation';
 
-import { InsightDetailModal } from '@/app/components/insight-detail-modal';
+import { InsightDetailModal } from '@/components/insight/insight-detail-modal';
 import { fetchInsightServer } from '@/graphql/helpers/fetch-insights-server';
 
 type InsightModalPageProps = {

app/components/insight-post-card.tsx

@@ -1,6 +1,6 @@
 import { notFound } from 'next/navigation';
 
-import { InsightDetailContent } from '@/app/components/insight-detail-content';
+import { InsightDetailContent } from '@/components/insight/insight-detail-content';
 import { Header } from '@/components/header/header';
 import { Page } from '@/components/page/page';
 import { fetchInsightServer } from '@/graphql/helpers/fetch-insights-server';

app/insights/[id]/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 
-import { InsightPostCard } from '../components/insight-post-card';
+import { InsightPostCard } from '@/components/insight/insight-post-card';
 import { Button } from '@/components/ui/button';
 import { fetchInsightsClient } from '@/graphql/helpers/fetch-insights-client';
 import type { InsightsQuery } from '@/types/generated/graphql';

app/insights/insights-list.tsx

@@ -17,7 +17,7 @@ export default async function InsightsPage() {
     <>
       <Header />
       <Page className="gap-4">
-        <h1 className="text-2xl font-semibold">Insights</h1>
+        <h1 className="text-2xl font-semibold">Social Media Posts</h1>
         <InsightsList initialInsights={insights} />
       </Page>
     </>

app/insights/page.tsx

@@ -1,11 +1,11 @@
 import { BadgeSection } from './components/badge-section';
 import { CountryRankingSection } from './components/country-ranking-section';
 import { GlobalRankingSection } from './components/global-ranking-section';
-import InsightsCarousel from './components/insights-carousel';
 import { LanguageRankingSection } from './components/language-ranking-section';
 import { MessengerIntegrationSection } from './components/messenger-integration-section';
 import { SearchProfile } from './components/search-profile';
 import { Header } from '@/components/header/header';
+import InsightsCarousel from '@/components/insight/insights-carousel';
 import { Link } from '@/components/link/link';
 import { Page } from '@/components/page/page';
 
@@ -27,7 +27,7 @@ export default function Home() {
             </div>
             <div className="flex flex-col justify-center gap-4 md:ml-10 p-4 pt-5 md:pt-4">
               <div className="flex gap-2 z-1 relative items-baseline">
-                <h2 className="text-xl md:text-2xl font-semibold">Latest Posts</h2>
+                <h2 className="text-xl md:text-xl font-semibold">Social Media Posts</h2>
                 <Link href="/insights" className="text-sm">
                   Show all
                 </Link>

app/page.tsx

@@ -0,0 +1,9 @@
+import { Card, CardContent } from '../ui/card';
+
+export const InsightContainer = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Card className="py-4">
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+};

app/components/insight-category-title.ts …onents/insight/insight-category-title.tsapp/components/insight-category-title.ts renamed to components/insight/insight-category-title.ts app/components/insight-category-title.ts renamed to components/insight/insight-category-title.ts

@@ -0,0 +1,24 @@
+import { format, formatDistanceToNow } from 'date-fns';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+type InsightCreatedAtProps = {
+  createdAt: Date;
+};
+
+export const InsightCreatedAt = ({ createdAt }: InsightCreatedAtProps) => {
+  const isWithinLast24Hours = Date.now() - createdAt.getTime() < 24 * 60 * 60 * 1000;
+
+  if (isWithinLast24Hours) {
+    return <div className="text-muted-foreground text-sm">{formatDistanceToNow(createdAt, { addSuffix: true })}</div>;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div className="text-muted-foreground text-sm">{format(createdAt, 'MMM d')}</div>
+      </TooltipTrigger>
+      <TooltipContent>{format(createdAt, "MMM d',' h:mm a")}</TooltipContent>
+    </Tooltip>
+  );
+};