Skip to content

Commit 4db122c

Browse files
Eric-Zhang-DeveloperEric-Zhang-Developer
committed
documentation: run tailwind prettier config
1 parent 5a0a023 commit 4db122c

4 files changed

Lines changed: 48 additions & 39 deletions

File tree

‎src/app/layout.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
import "./globals.css";
2-
import { Inter, Lora } from "next/font/google"
3-
2+
import { Inter, Lora } from "next/font/google";
43

54
const inter = Inter({
65
subsets: ["latin"],
76
variable: "--font-inter",
8-
})
7+
});
98

109
const lora = Lora({
11-
subsets: ['latin'],
12-
variable: "--font-lora"
13-
})
10+
subsets: ["latin"],
11+
variable: "--font-lora",
12+
});
1413

1514
export const metadata = {
1615
title: "Follower Diff - See Who Doesn't Follow You Back",
1716
description:
1817
"Safely see your Instagram non-followers using your official Instagram data. Your files are processed right in your browser and never uploaded anywhere.",
19-
}
20-
18+
};
2119

2220
export default function RootLayout({
2321
children,
@@ -26,10 +24,7 @@ export default function RootLayout({
2624
}>) {
2725
return (
2826
<html lang="en">
29-
<body className={`${inter.variable} ${lora.variable}`}
30-
>
31-
{children}
32-
</body>
27+
<body className={`${inter.variable} ${lora.variable}`}>{children}</body>
3328
</html>
3429
);
3530
}

‎src/app/page.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ export default function Home() {
5151

5252
const followingResult = FollowingListSchema.safeParse(input);
5353
if (followingResult.success) {
54-
setFollowing(ExtractNamesFromJson(followingResult.data.relationships_following));
54+
setFollowing(
55+
ExtractNamesFromJson(followingResult.data.relationships_following),
56+
);
5557
setHasProcessedFollowing(true);
5658
foundAtLeastOneValidFile = true;
5759
continue;
@@ -64,7 +66,9 @@ export default function Home() {
6466
foundAtLeastOneValidFile = true;
6567
continue;
6668
}
67-
} catch { /* The file failed to parse, which is fine. We do nothing and let the loop continue */ }
69+
} catch {
70+
/* The file failed to parse, which is fine. We do nothing and let the loop continue */
71+
}
6872
}
6973

7074
if (!foundAtLeastOneValidFile) {
@@ -81,9 +85,9 @@ export default function Home() {
8185
}, [hasProcessedFollowers, hasProcessedFollowing, following, followers]);
8286

8387
return (
84-
<div className="px-2 md:px-4 pt-5 pb-4 md:pt-10 flex flex-col min-h-screen font-text">
85-
<main className="container mx-auto flex items-center flex-col gap-4 px-2 md:px-12 flex-grow">
86-
<h1 className="md:text-5xl text-3xl text-center text-primary font-main">
88+
<div className="font-text flex min-h-screen flex-col px-2 pt-5 pb-4 md:px-4 md:pt-10">
89+
<main className="container mx-auto flex flex-grow flex-col items-center gap-4 px-2 md:px-12">
90+
<h1 className="text-primary font-main text-center text-3xl md:text-5xl">
8791
Curious Who Doesn&apos;t Follow You Back?
8892
</h1>
8993

@@ -108,7 +112,7 @@ export default function Home() {
108112
href="https://github.com/Eric-Zhang-Developer/follow-diff"
109113
target="_blank"
110114
rel="noopener noreferrer"
111-
className="bottom-0 right-0 flex flex-row gap-2 hover:scale-110 transition self-center md:self-end mt-4 lg:mt-0 text-secondary"
115+
className="text-secondary right-0 bottom-0 mt-4 flex flex-row gap-2 self-center transition hover:scale-110 md:self-end lg:mt-0"
112116
>
113117
Open Source & Privacy-First <Github></Github>
114118
</a>

‎src/components/HeroSection.tsx‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,66 +13,72 @@ export default function HeroSection({
1313
setErrorFlag,
1414
}: HeroSectionProps) {
1515
return (
16-
<section className="flex flex-col container items-center gap-4 text-accent">
17-
<p className="text-lg md:text-xl text-center text-secondary">
18-
Safely see your non-followers using your official Instagram data. Your files are processed
19-
right here in your browser and are never uploaded anywhere.
16+
<section className="text-accent container flex flex-col items-center gap-4">
17+
<p className="text-secondary text-center text-lg md:text-xl">
18+
Safely see your non-followers using your official Instagram data. Your
19+
files are processed right here in your browser and are never uploaded
20+
anywhere.
2021
</p>
21-
<Dropzone onDrop={onDrop} disabled={errorFlag} accept={{ "application/json": [".json"] }}>
22+
<Dropzone
23+
onDrop={onDrop}
24+
disabled={errorFlag}
25+
accept={{ "application/json": [".json"] }}
26+
>
2227
{({ getRootProps, getInputProps }) => (
2328
<div
2429
{...getRootProps()}
25-
className="shadow-md border-2 px-2 md:px-10 py-10 md:py-30 flex flex-col gap-4 md:gap-8 items-center justify-center w-full md:w-3/5 border-dashed rounded-3xl mt-6 md:mt-12 text-lg hover:cursor-pointer"
30+
className="mt-6 flex w-full flex-col items-center justify-center gap-4 rounded-3xl border-2 border-dashed px-2 py-10 text-lg shadow-md hover:cursor-pointer md:mt-12 md:w-3/5 md:gap-8 md:px-10 md:py-30"
2631
>
2732
<input {...getInputProps()} data-testid="file-input"></input>
2833

2934
{/* Conditional rendering to show if a user has uploaded single files*/}
3035
{hasProcessedFollowers && (
3136
<div
32-
className="bg-light-accent px-5 md:px-20 py-2 border-1 rounded-2xl border-accent"
37+
className="bg-light-accent border-accent rounded-2xl border-1 px-5 py-2 md:px-20"
3338
aria-label="Followers List Uploaded!"
3439
>
3540
Followers List Uploaded!
3641
</div>
3742
)}
3843

3944
{hasProcessedFollowing && (
40-
<div className="bg-light-accent px-5 md:px-20 py-2 border-1 rounded-2xl border-accent">
45+
<div className="bg-light-accent border-accent rounded-2xl border-1 px-5 py-2 md:px-20">
4146
Following List Uploaded!
4247
</div>
4348
)}
4449

4550
{errorFlag ? (
46-
<section className="flex flex-col items-center gap-4 md:gap-6 text-center text-primary">
51+
<section className="text-primary flex flex-col items-center gap-4 text-center md:gap-6">
4752
<h2 className="text-3xl">Upload Failed!</h2>
4853
<p className="text-xl">
49-
The file doesn&apos;t look like a proper Instagram followers.json or following.json file
54+
The file doesn&apos;t look like a proper Instagram
55+
followers.json or following.json file
5056
</p>
5157
<button
5258
onClick={() => setErrorFlag(false)}
53-
className="border-1 px-4 py-2 text-lg rounded-xl hover:cursor-pointer transition hover:scale-105 shadow-sm"
59+
className="rounded-xl border-1 px-4 py-2 text-lg shadow-sm transition hover:scale-105 hover:cursor-pointer"
5460
>
5561
Try Again
5662
</button>
5763
</section>
5864
) : (
5965
<section className="flex flex-col items-center gap-4 md:gap-8">
6066
<Upload size={50}></Upload>
61-
<p className="text-center whitespace-normal break-words text-primary">
67+
<p className="text-primary text-center break-words whitespace-normal">
6268
Drag&nbsp;&amp;&nbsp;drop&nbsp;your
6369
<br />
64-
<span className="bg-slate-100 text-sm font-mono mx-1 px-2 py-1 rounded break-all">
70+
<span className="mx-1 rounded bg-slate-100 px-2 py-1 font-mono text-sm break-all">
6571
followers.json
6672
</span>
6773
&amp;
68-
<span className="bg-slate-100 text-sm font-mono mx-1 px-2 py-1 rounded break-all">
74+
<span className="mx-1 rounded bg-slate-100 px-2 py-1 font-mono text-sm break-all">
6975
following.json
7076
</span>
7177
<br />
7278
files&nbsp;here
7379
</p>
7480
<span className="text-secondary">or</span>
75-
<button className="border-1 px-4 py-2 text-lg rounded-xl hover:cursor-pointer transition hover:scale-105 bg-light-accent shadow-sm">
81+
<button className="bg-light-accent rounded-xl border-1 px-4 py-2 text-lg shadow-sm transition hover:scale-105 hover:cursor-pointer">
7682
Select Files
7783
</button>
7884
</section>

‎src/components/ResultsSection.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,29 @@ import React from "react";
22
import { RotateCw } from "lucide-react";
33
import { ResultsSectionProps } from "@/lib/types";
44

5-
export default function ResultsSection({handleReset, userDifference} : ResultsSectionProps) {
5+
export default function ResultsSection({
6+
handleReset,
7+
userDifference,
8+
}: ResultsSectionProps) {
69
return (
710
<section className="flex flex-col items-center">
811
<button
912
onClick={handleReset}
1013
aria-label="Reset Button"
11-
className="py-4 transform transition hover:rotate-90 cursor-pointer "
14+
className="transform cursor-pointer py-4 transition hover:rotate-90"
1215
>
1316
<RotateCw size={40}></RotateCw>
1417
</button>
15-
<p className="text-2xl mb-6 text-center">
16-
Accounts that don&apos;t follow you back - <span className="text-accent">{userDifference.length}</span>
18+
<p className="mb-6 text-center text-2xl">
19+
Accounts that don&apos;t follow you back -{" "}
20+
<span className="text-accent">{userDifference.length}</span>
1721
</p>
1822

19-
<ol className="flex flex-row flex-wrap container mx-auto gap-1.5 sm:gap-2.5 justify-center">
23+
<ol className="container mx-auto flex flex-row flex-wrap justify-center gap-1.5 sm:gap-2.5">
2024
{userDifference.map((userName) => (
2125
<li key={userName} aria-label={userName}>
2226
<a
23-
className="text-s m-1 inline-block rounded-full border-2 border-l-8 bg-slate-100 px-3 py-1 text-border cursor-pointer transition transform hover:scale-110 border-accent shadow-lg"
27+
className="text-s text-border border-accent m-1 inline-block transform cursor-pointer rounded-full border-2 border-l-8 bg-slate-100 px-3 py-1 shadow-lg transition hover:scale-110"
2428
href={`https://www.instagram.com/${userName}/`}
2529
target="_blank"
2630
rel="noopener noreferrer"

0 commit comments

Comments
 (0)