diff --git a/app/(content)/(home)/home/page.tsx b/app/(content)/(home)/home/page.tsx
index 12366adac23f67ac0db40f112755bc22d1130473..d159dec93d31a425d2d95cafcdb5c7c75e31e0e3 100644
--- a/app/(content)/(home)/home/page.tsx
+++ b/app/(content)/(home)/home/page.tsx
@@ -2,6 +2,8 @@ import { CreateGweet } from "@/components/create-gweet/components/create-gweet"
import { GlobalLayout } from "@/components/global-layout"
import { Gweets } from "@/components/gweets/components/gweets"
import ScrollToTop from "@/components/scroll-to-top"
+import { Trends } from "@/components/trends/components/trends"
+import { Card } from "@/components/ui/card"
export default async function HomePage() {
return (
@@ -17,6 +19,11 @@ export default async function HomePage() {
</div>
</>
}
+ sideContent={
+ <Card className="p-5 bg-secondary">
+ <Trends />
+ </Card>
+ }
/>
)
}
\ No newline at end of file
diff --git a/app/(content)/(home)/trends/page.tsx b/app/(content)/(home)/trends/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9238f2fc52b06323d37faf8f958ad282e3774bf5
--- /dev/null
+++ b/app/(content)/(home)/trends/page.tsx
@@ -0,0 +1,23 @@
+import { BackHeader } from "@/components/back-header"
+import { GlobalLayout } from "@/components/global-layout"
+import { Trends } from "@/components/trends/components/trends"
+import { Card } from "@/components/ui/card"
+
+export default async function TrendsPage() {
+ return (
+ <GlobalLayout
+ mainContent={
+ <Card className="w-full overflow-hidden">
+ <div className="p-3">
+ <BackHeader>
+ <h1 className="font-bold">Trends</h1>
+ </BackHeader>
+ </div>
+ <div className="px-5">
+ <Trends title="" />
+ </div>
+ </Card>
+ }
+ />
+ )
+}
\ No newline at end of file
diff --git a/app/(content)/(user)/[userid]/followers/page.tsx b/app/(content)/(user)/[userid]/(profile)/followers/page.tsx
similarity index 100%
rename from app/(content)/(user)/[userid]/followers/page.tsx
rename to app/(content)/(user)/[userid]/(profile)/followers/page.tsx
diff --git a/app/(content)/(user)/[userid]/following/page.tsx b/app/(content)/(user)/[userid]/(profile)/following/page.tsx
similarity index 100%
rename from app/(content)/(user)/[userid]/following/page.tsx
rename to app/(content)/(user)/[userid]/(profile)/following/page.tsx
diff --git a/app/(content)/(user)/[userid]/likes/page.tsx b/app/(content)/(user)/[userid]/(profile)/likes/page.tsx
similarity index 100%
rename from app/(content)/(user)/[userid]/likes/page.tsx
rename to app/(content)/(user)/[userid]/(profile)/likes/page.tsx
diff --git a/app/(content)/(user)/[userid]/page.tsx b/app/(content)/(user)/[userid]/(profile)/page.tsx
similarity index 100%
rename from app/(content)/(user)/[userid]/page.tsx
rename to app/(content)/(user)/[userid]/(profile)/page.tsx
diff --git a/app/api/hashtags/route.ts b/app/api/hashtags/route.ts
index f909da1ab2779d11294a5689703aab246d15d2eb..b4ffb8ef97ebee57128b889e83ab2264d6c5aefe 100644
--- a/app/api/hashtags/route.ts
+++ b/app/api/hashtags/route.ts
@@ -18,7 +18,7 @@ export async function GET() {
}
export async function POST(request: Request) {
- const { hashtags } = await request.json()
+ const hashtags = await request.json()
const hashtagsSchema = z.array(z.string())
diff --git a/components/trends/api/get-hashtags.ts b/components/trends/api/get-hashtags.ts
index a669ceebb094a342d705963f8647b5f3dfd1b977..d70c90a99b03115ffcf346eae8adf0ccfcf63867 100644
--- a/components/trends/api/get-hashtags.ts
+++ b/components/trends/api/get-hashtags.ts
@@ -5,4 +5,4 @@ export const getHashtags = async () => {
} catch (error: any) {
return error.response.data
}
-}
+}
\ No newline at end of file
diff --git a/components/trends/api/post-hashtags.ts b/components/trends/api/post-hashtags.ts
index e372faa2f8f3aa2a2578ca4a6974885f7fb0befb..d5c069439d1242b38631a609efb93e11d79ffa0d 100644
--- a/components/trends/api/post-hashtags.ts
+++ b/components/trends/api/post-hashtags.ts
@@ -9,4 +9,4 @@ export const postHashtags = async (hashtags: string[]) => {
} catch (error: any) {
return error.response.data
}
-}
+}
\ No newline at end of file
diff --git a/components/trends/api/retrieve-hashtags-from-gweet.ts b/components/trends/api/retrieve-hashtags-from-gweet.ts
index f8e54755008d7a19630ef390c71dde61dcd38f59..4c4aa88f2f2bd219aa6f363234fe357f7edecd24 100644
--- a/components/trends/api/retrieve-hashtags-from-gweet.ts
+++ b/components/trends/api/retrieve-hashtags-from-gweet.ts
@@ -1,4 +1,4 @@
export const retrieveHashtagsFromGweet = (text: string): string[] | null => {
const hashtags = text.match(/#\w+/gi)
return hashtags ? hashtags.map((hashtag) => hashtag.slice(1)) : null
-}
+}
\ No newline at end of file
diff --git a/components/trends/components/trend.tsx b/components/trends/components/trend.tsx
index 0e3f734a55e93d26fee4c3bac49855dd0ef7c6da..2ce19c9b8c18a64ec4a0bc9d7c194a5f1e8b7f2c 100644
--- a/components/trends/components/trend.tsx
+++ b/components/trends/components/trend.tsx
@@ -1,26 +1,21 @@
"use client"
-import { useRouter } from "next/navigation"
+import Link from "next/link"
import { iTrendProps } from "../types"
export const Trend = ({ ranking = 1, title, gweets = 1 }: iTrendProps) => {
- const router = useRouter()
-
return (
- <div
- onClick={() => { router.push(`/search?query=${title.toLowerCase()}`) }}
- className="flex justify-between items-center p-1 cursor-pointer hover:bg-trends-hover active:bg-trends-active">
- <div className="p-2">
- <div className="flex items-center gap-2 text-tertiary">
- <span>{ranking}</span>
- <span className="w-2 h-2 bg-tertiary rounded-full"></span>
- <span>Trending</span>
- </div>
- <div className="text-secondary font-medium">{title}</div>
- <div className="text-tertiary">
- {gweets} {gweets === 1 ? "gweet" : "gweets"}
- </div>
+ <Link
+ href={`/search?query=${title.toLowerCase()}`}
+ className="flex flex-col justify-between hover:bg-accent active:bg-accent rounded-lg p-1">
+
+ <div className="text-xs text-muted-foreground">
+ {ranking} · Trending
+ </div>
+ <div>#{title}</div>
+ <div className="text-xs text-muted-foreground">
+ {gweets} {gweets === 1 ? "gweet" : "gweets"}
</div>
- </div>
+ </Link>
)
}
\ No newline at end of file
diff --git a/components/trends/components/trends.tsx b/components/trends/components/trends.tsx
index 9ea7fe56585aaf9950caf6b7f72019e4aa125add..2d1eb6d2fa78da22239916ba36f01593b90954b2 100644
--- a/components/trends/components/trends.tsx
+++ b/components/trends/components/trends.tsx
@@ -1,7 +1,9 @@
-import Link from "next/link"
+"use client"
-import { Icons } from "@/components/icons"
+import LoadingItem from "@/components/loading-item"
import { TryAgain } from "@/components/try-again"
+import { Card } from "@/components/ui/card"
+import Link from "next/link"
import { useHashtags } from "../hooks/use-hashtags"
import { Trend } from "./trend"
@@ -11,36 +13,24 @@ export const Trends = ({ title = "Trends" }: { title?: string }) => {
if (hashtags && hashtags?.length <= 0) return null
return (
- <div className="">
+ <div className="space-y-5 flex flex-col">
+ {title && <h1 className="font-bold p-1">{title}</h1>}
{isLoading ? (
- <div className="">
- <Icons.spinner className="h-4 w-4 animate-spin" />
- </div>
+ <LoadingItem />
) : isError ? (
- <div className="">
- <TryAgain />
- </div>
- ) : (
- <>
- <div className="">
- <h1 className="">{title}</h1>
- {isSuccess &&
- hashtags?.map((hashtag, index) => {
- return (
- <Trend
- key={hashtag.id}
- ranking={index + 1}
- title={hashtag.text}
- gweets={hashtag.score}
- />
- )
- })}
- </div>
- <button className="">
- <Link href={`trends`}>Show more</Link>
- </button>
- </>
- )}
+ <TryAgain />
+ ) : isSuccess &&
+ hashtags?.map((hashtag, index) => {
+ return (
+ <Trend
+ key={hashtag.id}
+ ranking={index + 1}
+ title={hashtag.text}
+ gweets={hashtag.score}
+ />
+ )
+ })}
+ {title && <Link href={"/trends"} className="self-end hover:bg-accent p-1 rounded-lg">See more</Link>}
</div>
)
-}
+}
\ No newline at end of file
diff --git a/components/trends/hooks/use-hashtags.ts b/components/trends/hooks/use-hashtags.ts
index 18ea7d3fa36fb427ca2ca9845da552f8f58c5497..61e7396980302da7a407195424015c0c946655fe 100644
--- a/components/trends/hooks/use-hashtags.ts
+++ b/components/trends/hooks/use-hashtags.ts
@@ -1,3 +1,5 @@
+"use client"
+
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { getHashtags } from "../api/get-hashtags"
@@ -17,4 +19,4 @@ export const useHashtags = () => {
},
},
)
-}
+}
\ No newline at end of file
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aa148135b1ecd7b36ce2a66a5cb5002aa8c0136b
--- /dev/null
+++ b/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+ React.ElementRef<typeof TabsPrimitive.List>,
+ React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+ <TabsPrimitive.List
+ ref={ref}
+ className={cn(
+ "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+ className
+ )}
+ {...props}
+ />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+ React.ElementRef<typeof TabsPrimitive.Trigger>,
+ React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+ <TabsPrimitive.Trigger
+ ref={ref}
+ className={cn(
+ "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+ className
+ )}
+ {...props}
+ />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+ React.ElementRef<typeof TabsPrimitive.Content>,
+ React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+ <TabsPrimitive.Content
+ ref={ref}
+ className={cn(
+ "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+ className
+ )}
+ {...props}
+ />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsContent, TabsList, TabsTrigger }
diff --git a/package-lock.json b/package-lock.json
index 3ef0ed3b937e7735b95947207d40229a3275f608..53f161a7a9f5b13a5384ba2c661c6c751d7ce495 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
"@radix-ui/react-select": "^1.2.2",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
+ "@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.4",
"@t3-oss/env-nextjs": "^0.6.0",
"@tanstack/react-query": "^4.29.19",
@@ -2340,6 +2341,36 @@
}
}
},
+ "node_modules/@radix-ui/react-tabs": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz",
+ "integrity": "sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/primitive": "1.0.1",
+ "@radix-ui/react-context": "1.0.1",
+ "@radix-ui/react-direction": "1.0.1",
+ "@radix-ui/react-id": "1.0.1",
+ "@radix-ui/react-presence": "1.0.1",
+ "@radix-ui/react-primitive": "1.0.3",
+ "@radix-ui/react-roving-focus": "1.0.4",
+ "@radix-ui/react-use-controllable-state": "1.0.1"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0",
+ "react-dom": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@radix-ui/react-toast": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.4.tgz",
diff --git a/package.json b/package.json
index ccaa2bff09bc15141436135b2926777095641106..446bedae67af6c569c577e18ec5b20a8bb805b20 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"@radix-ui/react-select": "^1.2.2",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
+ "@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.4",
"@t3-oss/env-nextjs": "^0.6.0",
"@tanstack/react-query": "^4.29.19",
@@ -75,4 +76,4 @@
"semver": "^7.5.3",
"optionator": "^0.9.3"
}
-}
\ No newline at end of file
+}