Skip to content

Commit

Permalink
many a change
Browse files Browse the repository at this point in the history
  • Loading branch information
@walteh
walteh committed Jul 14, 2024
1 parent 37d2e7e commit f05f48a
Show file tree
Hide file tree
Showing 10 changed files with 218 additions and 102 deletions.
Binary file modified bun.lockb
View file
Binary file not shown.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,14 @@
"@lingui/core": "^4.11.1",
"@react-spring/web": "^9.7.3",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.13",
"@types/bun": "^1.1.5",
"@types/chai": "^4.3.16",
"@types/express": "^4.17.21",
"@types/node": "^20.14.8",
"@types/react": "npm:types-react@rc",
"@types/react-dom": "npm:types-react-dom@rc",
"@types/react-helmet": "^6.1.11",
"@types/ua-parser-js": "^0.7.39",
"@typescript-eslint/eslint-plugin": "^7.13.1",
"@typescript-eslint/parser": "^7.13.1",
Expand Down
19 changes: 12 additions & 7 deletions src/components/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import { Dialog, DialogBackdrop, DialogPanel } from "@headlessui/react";
import { FunctionComponent } from "react";
import { IoClose } from "react-icons/io5";

import useModalStore from "@src/client/hooks/useModalStore";

Expand All @@ -15,16 +16,20 @@ const Modal: FunctionComponent<{
<Dialog open={open} onClose={setOpen} className="relative z-10">
<DialogBackdrop
transition
className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
className="fixed inset-0 backdrop-blur-2xl transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
/>

<div className="fixed inset-0 z-10 flex items-center justify-center p-4">
<DialogPanel
as="div"
transition
className="relative w-full max-w-screen-xl max-h-[95vh] p-6 bg-white dark:bg-gray-900 shadow-xl rounded-2xl h-full max-h-screen-xl overflow-y-auto"
<div className="fixed inset-0 z-10 flex items-center justify-center">
<button
className="absolute bottom-4 right-4 p-3 rounded-full text-gray-800 z-50 hover:scale-110 transform transition duration-200 ease-in-out backdrop-blur-lg bg-red-400 bg-opacity-50 shadow-2xl"
onClick={() => {
setOpen(false);
}}
>
<div className="h-full">{children}</div>
<IoClose size={30} />
</button>
<DialogPanel transition className="relative w-full shadow-xl h-full max-h-screen-xl overflow-y-auto">
<div className="h-full p-4">{children}</div>
</DialogPanel>
</div>
</Dialog>
Expand Down
20 changes: 15 additions & 5 deletions src/components/UserInsightsChartView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,20 @@ const UserInsightsChartView: FC = () => {
},
toolbar: {
show: true,
// tools: {
// download: true,
// selection: true,
// },
tools: {
download: true,
selection: false,
pan: false,
reset: false,
customIcons: [],
zoom: false,
zoomin: false,
zoomout: false,
// selection: true,
},
},
selection: {
enabled: false,
},
// sparkline: {
// enabled: true,
Expand Down Expand Up @@ -247,7 +257,7 @@ const UserInsightsChartView: FC = () => {
))}
</select>
</div>
<div ref={chartContainerRef} className="p-10 w-full max-h-full">
<div ref={chartContainerRef} className="sm:p-10 p-3 w-full max-h-full">
{Chart}
</div>
</div>
Expand Down
42 changes: 22 additions & 20 deletions src/components/UserProfile2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,30 +96,32 @@ export default function UserProfile2() {
</h2>
<div className="p-6">
<div className="sm:flex sm:items-center sm:justify-between">
<div className="sm:flex sm:space-x-5">
<div className="flex-shrink-0">
<img className="mx-auto h-20 w-20 rounded-full" src={profile?.data?.threads_profile_picture_url} alt="" />
</div>
<div className="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
{/* <p className="text-sm font-medium text-gray-600">Welcome back,</p> */}
<p className="text-3xl font-bold font-rounded text-gray-900 sm:text-3xl">@{profile?.data?.username}</p>
<p className="text-lg font-medium text-gray-600">{profile?.data?.threads_biography ?? "..."}</p>
</div>
</div>
<div className="mt-5 flex justify-around sm:mt-0">
<div className=" flex justify-around sm:mt-0">
<button
onClick={refresh}
className="flex items-center justify-center rounded-xl bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-md border-4 hover:scale-110 hover:shadow-xl transform transition duration-200 ease-in-out"
className="flex flex-col items-center justify-center rounded-xl bg-white px-6 py-5 text-sm font-semibold text-gray-900 shadow-md border-4 hover:scale-110 hover:shadow-xl transform transition duration-200 ease-in-out"
>
<div className="flex flex-col">
<span>🔄</span>
<span className="">cache</span>
<div className="sm:flex sm:space-x-5 ">
<div className="flex-shrink-0">
<img
className="mx-auto h-20 w-20 rounded-xl"
src={profile?.data?.threads_profile_picture_url}
alt=""
/>
</div>
<div className="text-center sm:text-left my-2 max-w-72">
<p className="truncate text-3xl font-bold font-rounded text-gray-900 ">
@{profile?.data?.username}
</p>
<p className="mt-3 text-lg">🔄 cache</p>
</div>
</div>
<div className=" flex flex-col items-start justify-center rounded-md text-xs w-full mt-2">

<div className=" rounded-md text-xs w-full mt-2 grid grid-cols-2 gap-2">
{loaders.map((stat) => (
<span key={stat.label} className="ml-3 flex text-xs mb-2">
<div key={stat.label} className="ml-3 flex text-xs">
{stat.data?.is_loading ? <Loader /> : "✅"} {stat.label}
</span>
</div>
))}
</div>
</button>
Expand Down Expand Up @@ -167,9 +169,9 @@ export default function UserProfile2() {
</button>
))}
</div>

<Modal>{currentTab}</Modal>
</div>

<Modal>{currentTab}</Modal>
</div>
);
}
81 changes: 41 additions & 40 deletions src/components/UserThreadsView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,96 +10,97 @@ const UserThreadsView = () => {
const [search, setSearch] = useState("");

return (
<div className="container mx-auto sm:p-6">
<div>
<div className="flex justify-center flex-row">
<div className="relative mt-2 flex items-center mb-2 w-1/2">
<input
type="text"
name="search"
id="search"
value={search}
onChange={(e) => {
setSearch(e.target.value);
}}
className="block w-full rounded-md border-0 py-1.5 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div className="space-y-6 overflow-y-scroll">
{threads.map((thread) => (
<div
key={thread.id}
className={`bg-white sm:p-6 rounded-xl shadow-md m-1 ${thread.text?.includes(search) ? "" : "hidden"}`}
>
<ThreadCard thread={thread} />
</div>
))}
<div className="container mx-auto sm:p-6 p-2 flex flex-col items-center">
<div className="flex justify-center items-center mt-4 w-full">
<div className="relative w-full sm:w-1/2 ">
<input
type="text"
name="search"
id="search"
value={search}
onChange={(e) => {
setSearch(e.target.value);
}}
className="block w-full rounded-full py-2 pl-12 pr-4 text-gray-900 shadow-2xl placeholder:text-gray-400 sm:text-sm sm:leading-6 font-mono bg-gray-50 border-4"
placeholder="search..."
/>
<span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg">🔍</span>
</div>
</div>
<div className="mt-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{threads.map((thread, idx) => (
<div key={thread.id} className={thread.text?.includes(search) ? "" : "hidden"}>
<ThreadCard thread={thread} idx={threads.length - idx} />
</div>
))}
</div>
</div>
);
};

const ThreadCard: FC<{ thread: ThreadMedia }> = ({ thread }) => {
const ThreadCard: FC<{ thread: ThreadMedia; idx: number }> = ({ thread, idx }) => {
const [likes, views, replies, quotes, reposts] = useThreadInfo(thread);

return (
<div className="px-4 py-2">
<div className="mb-4 flex justify-between items-center">
<p className="text-3xl font-bold font-rounded text-gray-900">@{thread.username}</p>
<p className="text-lg text-gray-500">{new Date(thread.timestamp).toLocaleString()}</p>
</div>

<div className="bg-gray-50 sm:p-6 p-4 rounded-3xl shadow-2xl m-1 max-w-xl mt-5">
<div className="flex flex-wrap gap-2 mb-4">
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-gray-100 px-3 py-2 text-md font-medium text-gray-800">
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-gray-100 px-3 py-2 text-xs font-medium text-gray-800 font-mono">
#{idx + 1}
</span>
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-gray-100 px-3 py-2 text-xs font-medium text-gray-800 font-mono">
{new Date(thread.timestamp).toLocaleDateString()}
</span>
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-gray-100 px-3 py-2 text-xs font-medium text-gray-800 font-mono">
{new Date(thread.timestamp).toLocaleTimeString()}
</span>
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-gray-100 px-3 py-2 text-xs font-medium text-gray-800">
{thread.media_type}
</span>
{likes > 0 && (
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-red-100 px-3 py-2 text-md font-medium text-red-800">
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-red-100 px-3 py-2 text-xs font-medium text-red-800">
<svg className="h-3 w-3 fill-red-500" viewBox="0 0 6 6" aria-hidden="true">
<circle cx={3} cy={3} r={3} />
</svg>
{likes} likes
</span>
)}
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-blue-100 px-3 py-2 text-md font-medium text-blue-800">
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-blue-100 px-3 py-2 text-xs font-medium text-blue-800">
<svg className="h-3 w-3 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true">
<circle cx={3} cy={3} r={3} />
</svg>
{views} views
</span>
{replies.length > 0 && (
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-green-100 px-3 py-2 text-md font-medium text-green-800">
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-green-100 px-3 py-2 text-xs font-medium text-green-800">
<svg className="h-3 w-3 fill-green-500" viewBox="0 0 6 6" aria-hidden="true">
<circle cx={3} cy={3} r={3} />
</svg>
{replies.length} replies
</span>
)}
{quotes > 0 && (
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-purple-100 px-3 py-2 text-md font-medium text-purple-800">
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-purple-100 px-3 py-2 text-xs font-medium text-purple-800">
<svg className="h-3 w-3 fill-purple-500" viewBox="0 0 6 6" aria-hidden="true">
<circle cx={3} cy={3} r={3} />
</svg>
{quotes} quotes
</span>
)}
{reposts > 0 && (
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-yellow-100 px-3 py-2 text-md font-medium text-yellow-800">
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-yellow-100 px-3 py-2 text-xs font-medium text-yellow-800">
<svg className="h-3 w-3 fill-yellow-500" viewBox="0 0 6 6" aria-hidden="true">
<circle cx={3} cy={3} r={3} />
</svg>
{reposts} reposts
</span>
)}
{thread.is_quote_post && (
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-gray-100 px-3 py-2 text-md font-medium text-gray-800">
<span className="inline-flex items-center gap-x-1.5 rounded-full bg-gray-100 px-3 py-2 text-xs font-medium text-gray-800">
QUOTE
</span>
)}
</div>
<p className="sm:text-3xl text-lg font-mono text-gray-800 bg-slate-100 px-5 py-3 rounded-lg" style={{ whiteSpace: "pre-wrap" }}>
<p className="sm:text-2xl text-lg font-mono text-gray-800 bg-slate-100 px-5 py-3 rounded-lg" style={{ whiteSpace: "pre-wrap" }}>
{thread.text}
</p>
{thread.media_url && (
Expand Down
Loading

0 comments on commit f05f48a

Please sign in to comment.