├── .eslintrc.json
├── .gitattributes
├── src
    ├── app
    │   ├── favicon.ico
    │   ├── page.tsx
    │   ├── layout.tsx
    │   └── globals.css
    ├── lib
    │   └── utils.ts
    ├── components
    │   ├── ui
    │   │   ├── skeleton.tsx
    │   │   ├── label.tsx
    │   │   ├── input.tsx
    │   │   ├── toaster.tsx
    │   │   ├── theme-toggle.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── use-toast.ts
    │   │   ├── form.tsx
    │   │   ├── toast.tsx
    │   │   └── dropdown-menu.tsx
    │   ├── Navbar
    │   │   └── Navbar.tsx
    │   ├── Layout
    │   │   └── Layout.tsx
    │   ├── Loading
    │   │   └── Skeleton.tsx
    │   ├── Footer
    │   │   └── Footer.tsx
    │   ├── Cards
    │   │   └── UserCard.tsx
    │   └── Forms
    │   │   └── InputForm.tsx
    └── providers
    │   └── ThemeProvider.tsx
├── postcss.config.js
├── public
    ├── images
    │   └── unfollowers-finder-github.gif
    ├── vercel.svg
    ├── icons
    │   └── star-filled.svg
    └── next.svg
├── next.config.mjs
├── components.json
├── .gitignore
├── tsconfig.json
├── LICENSE
├── package.json
├── tailwind.config.ts
└── README.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HappyHackingSpace/unfollows/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/public/images/unfollowers-finder-github.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HappyHackingSpace/unfollows/HEAD/public/images/unfollowers-finder-github.gif


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Layout from "@/components/Layout/Layout";
 2 | import InputForm from "@/components/Forms/InputForm";
 3 | 
 4 | export default function Home() {
 5 |   return (
 6 |     <Layout>
 7 |       <InputForm />
 8 |     </Layout>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |     images: {
 4 |         remotePatterns: [
 5 |           {
 6 |             protocol: 'https',
 7 |             hostname: 'avatars.githubusercontent.com'
 8 |           }
 9 |         ]
10 |       }
11 | };
12 | 
13 | export default nextConfig;
14 | 


--------------------------------------------------------------------------------
/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }: React.HTMLAttributes<HTMLDivElement>) {
 7 |   return (
 8 |     <div
 9 |       className={cn("animate-pulse rounded-md bg-muted", className)}
10 |       {...props}
11 |     />
12 |   )
13 | }
14 | 
15 | export { Skeleton }
16 | 


--------------------------------------------------------------------------------
/src/providers/ThemeProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import * as React from "react"
3 | import { ThemeProvider as NextThemesProvider } from "next-themes"
4 | import { type ThemeProviderProps } from "next-themes/dist/types"
5 | 
6 | export function ThemeProvider({ children, ...props }: Readonly<ThemeProviderProps>) {
7 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
8 | }
9 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/src/components/Navbar/Navbar.tsx:
--------------------------------------------------------------------------------
 1 | import { ModeToggle } from "@/components/ui/theme-toggle";
 2 | import { Card, CardHeader, CardTitle, } from "@/components/ui/card"
 3 | 
 4 | const Navbar: React.FC = () => {
 5 |   return (
 6 |     <Card className="relative flex flex-row justify-center items-center gap-4 w-[50rem] h-12 max-lg:w-[25rem] " >
 7 | 
 8 |       <CardHeader>
 9 |         <CardTitle>GitHub Unfollowers Finder</CardTitle>
10 |       </CardHeader>
11 | 
12 |       <ModeToggle />
13 |     </Card>
14 |   )
15 | }
16 | 
17 | export default Navbar


--------------------------------------------------------------------------------
/src/components/Layout/Layout.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactNode } from "react";
 2 | import Navbar from "@/components/Navbar/Navbar";
 3 | import Footer from "@/components/Footer/Footer";
 4 | 
 5 | interface LayoutProps {
 6 |   children: ReactNode;
 7 | }
 8 | 
 9 | const Layout: React.FC<LayoutProps> = ({ children }) => {
10 |   return (  
11 |         <main className="flex flex-col items-center h-screen py-8 gap-8" >
12 |             <Navbar />
13 |             {children}
14 |             <Footer />
15 |         </main>
16 |     );
17 | };
18 | 
19 | export default Layout;
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 
38 | yarn.lock


--------------------------------------------------------------------------------
/src/components/Loading/Skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { Skeleton } from "@/components/ui/skeleton"
 2 | 
 3 | export default function SkeletonDemo() {
 4 |   const numberOfSkeletons = 12;
 5 | 
 6 |   return (
 7 |     <>
 8 |     {[...Array(numberOfSkeletons)].map((_, index) => (
 9 |     <div key={index} className="flex items-center space-x-4 w-96 p-4 rounded-lg border ">
10 |       <Skeleton className="h-12 w-12 rounded-full" />
11 |       <div className="space-y-2">
12 |         <Skeleton className="h-3 w-28" />
13 |         <Skeleton className="h-3 w-48" />
14 |       </div>
15 |     </div>
16 |     ))}
17 |     </>
18 |   )
19 | }


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./src/*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/public/icons/star-filled.svg:
--------------------------------------------------------------------------------
1 | <svg height="200" width="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.94 47.94" xml:space="preserve">
2 |   <g stroke-width="0"/>
3 |   <g stroke-linecap="round" stroke-linejoin="round"/>
4 |   <path style="fill:#f7c843" d="m26.285 2.486 5.407 10.956a2.58 2.58 0 0 0 1.944 1.412l12.091 1.757c2.118.308 2.963 2.91 1.431 4.403l-8.749 8.528a2.582 2.582 0 0 0-.742 2.285l2.065 12.042c.362 2.109-1.852 3.717-3.746 2.722l-10.814-5.685a2.585 2.585 0 0 0-2.403 0l-10.814 5.685c-1.894.996-4.108-.613-3.746-2.722l2.065-12.042a2.582 2.582 0 0 0-.742-2.285L.783 21.014c-1.532-1.494-.687-4.096 1.431-4.403l12.091-1.757a2.58 2.58 0 0 0 1.944-1.412l5.407-10.956c.946-1.919 3.682-1.919 4.629 0z"/>
5 | </svg>


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { ThemeProvider } from "@/providers/ThemeProvider";
 2 | import type { Metadata } from "next";
 3 | import { Inter } from "next/font/google";
 4 | import "./globals.css";
 5 | 
 6 | const inter = Inter({ subsets: ["latin"] });
 7 | 
 8 | export const metadata: Metadata = {
 9 |   title: "Unfollowers Finder",
10 |   description: "Find your unfollowers on GitHub",
11 | };
12 | 
13 | export default function RootLayout({ children, }: Readonly<{children: React.ReactNode;}>) {
14 |   return (
15 |     <html lang="en">
16 |       <body className={inter.className}>
17 | 
18 |         <ThemeProvider attribute="class" defaultTheme="system">
19 |           {children}
20 |         </ThemeProvider>
21 |         
22 |       </body>
23 |     </html>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/Footer/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import Image from "next/image";
 3 | import { ModeToggle } from "@/components/ui/theme-toggle";
 4 | import { Card, CardHeader, CardTitle, } from "@/components/ui/card"
 5 | 
 6 | const Footer: React.FC = () => {
 7 |   return (
 8 |     <Card className=" fixed bottom-4 flex flex-row justify-center items-center w-[50rem] h-12 max-lg:w-[25rem]" >
 9 | 
10 |       <Image src={"/icons/star-filled.svg"} width={24} height={24} alt="star" />
11 | 
12 |       <Link href={"https://github.com/HappyHackingSpace/unfollowers-finder-github"} >
13 |         <CardHeader>
14 |           <CardTitle>Star GitHub Repository</CardTitle>
15 |         </CardHeader>
16 |       </Link>
17 |         <ModeToggle />
18 |       </Card>
19 |   )
20 | }
21 | 
22 | export default Footer


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import {
 4 |   Toast,
 5 |   ToastClose,
 6 |   ToastDescription,
 7 |   ToastProvider,
 8 |   ToastTitle,
 9 |   ToastViewport,
10 | } from "@/components/ui/toast"
11 | import { useToast } from "@/components/ui/use-toast"
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast()
15 | 
16 |   return (
17 |     <ToastProvider>
18 |       {toasts.map(function ({ id, title, description, action, ...props }) {
19 |         return (
20 |           <Toast key={id} {...props}>
21 |             <div className="grid gap-1">
22 |               {title && <ToastTitle>{title}</ToastTitle>}
23 |               {description && (
24 |                 <ToastDescription>{description}</ToastDescription>
25 |               )}
26 |             </div>
27 |             {action}
28 |             <ToastClose />
29 |           </Toast>
30 |         )
31 |       })}
32 |       <ToastViewport />
33 |     </ToastProvider>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Frontend Developer
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "unfollowers-finder-github",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@hookform/resolvers": "^3.3.4",
13 |     "@radix-ui/react-dropdown-menu": "^2.0.6",
14 |     "@radix-ui/react-icons": "^1.3.0",
15 |     "@radix-ui/react-label": "^2.0.2",
16 |     "@radix-ui/react-slot": "^1.0.2",
17 |     "@radix-ui/react-toast": "^1.1.5",
18 |     "class-variance-authority": "^0.7.0",
19 |     "clsx": "^2.1.0",
20 |     "lucide-react": "^0.314.0",
21 |     "next": "14.2.24",
22 |     "next-themes": "^0.2.1",
23 |     "react": "^18",
24 |     "react-dom": "^18",
25 |     "react-hook-form": "^7.49.3",
26 |     "swr": "^2.2.4",
27 |     "tailwind-merge": "^2.2.1",
28 |     "tailwindcss-animate": "^1.0.7",
29 |     "zod": "^3.22.4"
30 |   },
31 |   "devDependencies": {
32 |     "@types/node": "^20",
33 |     "@types/react": "^18",
34 |     "@types/react-dom": "^18",
35 |     "autoprefixer": "^10.0.1",
36 |     "eslint": "^8",
37 |     "eslint-config-next": "14.1.0",
38 |     "postcss": "^8",
39 |     "tailwindcss": "^3.3.0",
40 |     "typescript": "^5"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/components/Cards/UserCard.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image"
 2 | import Link from "next/link"
 3 | import { cn } from "@/lib/utils"
 4 | import { Card } from "@/components/ui/card"
 5 | 
 6 | type UnfollowerType = {
 7 |   avatar_url: string;
 8 |   html_url: string;
 9 |   login: string;
10 | };
11 | 
12 | type CardProps = React.ComponentProps<typeof Card> & {
13 |   unfollower: UnfollowerType;
14 | }
15 | 
16 | export default function CardDemo({ className, unfollower, ...props }: CardProps) {
17 |   return (
18 |     <Link href={`${unfollower?.html_url}`} target="_blank">
19 |     <Card 
20 |       className={cn("flex flex-row items-center w-96 gap-8 p-4", className)} {...props}
21 |       >
22 |           <Image
23 |             src={unfollower?.avatar_url}
24 |             alt={unfollower?.login} width={48} height={48}
25 |             className="rounded-full"
26 |            />
27 |           
28 |           <div className="flex-1 space-y-1">
29 |             <p className="text-sm font-medium leading-none">
30 |             {unfollower?.login}
31 |             </p>
32 |             <p className="text-sm text-muted-foreground">
33 |               {unfollower?.html_url}
34 |             </p>
35 |           </div>
36 | 
37 |     </Card>
38 |     </Link>
39 |   )
40 | }
41 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/src/components/ui/theme-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import * as React from "react"
 3 | import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
 4 | import { useTheme } from "next-themes"
 5 | 
 6 | import { Button } from "@/components/ui/button"
 7 | import {
 8 |   DropdownMenu,
 9 |   DropdownMenuContent,
10 |   DropdownMenuItem,
11 |   DropdownMenuTrigger,
12 | } from "@/components/ui/dropdown-menu"
13 | 
14 | export function ModeToggle() {
15 |   const { setTheme } = useTheme()
16 | 
17 |   return (
18 |     <DropdownMenu>
19 |       <DropdownMenuTrigger asChild>
20 |         <Button variant="outline" size="icon" className="absolute right-0 h-12 w-12 ">
21 |           <SunIcon className="h-[2rem] w-[2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
22 |           <MoonIcon className="absolute h-[2rem] w-[2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
23 |           <span className="sr-only">Toggle theme</span>
24 |         </Button>
25 |       </DropdownMenuTrigger>
26 |       <DropdownMenuContent align="end">
27 |         <DropdownMenuItem onClick={() => setTheme("light")}>
28 |           Light
29 |         </DropdownMenuItem>
30 |         <DropdownMenuItem onClick={() => setTheme("dark")}>
31 |           Dark
32 |         </DropdownMenuItem>
33 |         <DropdownMenuItem onClick={() => setTheme("system")}>
34 |           System
35 |         </DropdownMenuItem>
36 |       </DropdownMenuContent>
37 |     </DropdownMenu>
38 |   )
39 | }
40 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 |  
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 224 71.4% 4.1%;
 9 |     --card: 0 0% 100%;
10 |     --card-foreground: 224 71.4% 4.1%;
11 |     --popover: 0 0% 100%;
12 |     --popover-foreground: 224 71.4% 4.1%;
13 |     --primary: 262.1 83.3% 57.8%;
14 |     --primary-foreground: 210 20% 98%;
15 |     --secondary: 220 14.3% 95.9%;
16 |     --secondary-foreground: 220.9 39.3% 11%;
17 |     --muted: 220 14.3% 95.9%;
18 |     --muted-foreground: 220 8.9% 46.1%;
19 |     --accent: 220 14.3% 95.9%;
20 |     --accent-foreground: 220.9 39.3% 11%;
21 |     --destructive: 0 84.2% 60.2%;
22 |     --destructive-foreground: 210 20% 98%;
23 |     --border: 220 13% 91%;
24 |     --input: 220 13% 91%;
25 |     --ring: 262.1 83.3% 57.8%;
26 |     --radius: 0.5rem;
27 |   }
28 | 
29 |   .dark {
30 |     --background: 224 71.4% 4.1%;
31 |     --foreground: 210 20% 98%;
32 |     --card: 224 71.4% 4.1%;
33 |     --card-foreground: 210 20% 98%;
34 |     --popover: 224 71.4% 4.1%;
35 |     --popover-foreground: 210 20% 98%;
36 |     --primary: 263.4 70% 50.4%;
37 |     --primary-foreground: 210 20% 98%;
38 |     --secondary: 215 27.9% 16.9%;
39 |     --secondary-foreground: 210 20% 98%;
40 |     --muted: 215 27.9% 16.9%;
41 |     --muted-foreground: 217.9 10.6% 64.9%;
42 |     --accent: 215 27.9% 16.9%;
43 |     --accent-foreground: 210 20% 98%;
44 |     --destructive: 0 62.8% 30.6%;
45 |     --destructive-foreground: 210 20% 98%;
46 |     --border: 215 27.9% 16.9%;
47 |     --input: 215 27.9% 16.9%;
48 |     --ring: 263.4 70% 50.4%;
49 |   }
50 | }
51 |  
52 | @layer base {
53 |   * {
54 |     @apply border-border;
55 |   }
56 |   body {
57 |     @apply bg-background text-foreground;
58 |   }
59 | }


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss"
 2 | 
 3 | const config = {
 4 |   darkMode: ["class"],
 5 |   content: [
 6 |     './pages/**/*.{ts,tsx}',
 7 |     './components/**/*.{ts,tsx}',
 8 |     './app/**/*.{ts,tsx}',
 9 |     './src/**/*.{ts,tsx}',
10 | 	],
11 |   prefix: "",
12 |   theme: {
13 |     container: {
14 |       center: true,
15 |       padding: "2rem",
16 |       screens: {
17 |         "2xl": "1400px",
18 |       },
19 |     },
20 |     extend: {
21 |       colors: {
22 |         border: "hsl(var(--border))",
23 |         input: "hsl(var(--input))",
24 |         ring: "hsl(var(--ring))",
25 |         background: "hsl(var(--background))",
26 |         foreground: "hsl(var(--foreground))",
27 |         primary: {
28 |           DEFAULT: "hsl(var(--primary))",
29 |           foreground: "hsl(var(--primary-foreground))",
30 |         },
31 |         secondary: {
32 |           DEFAULT: "hsl(var(--secondary))",
33 |           foreground: "hsl(var(--secondary-foreground))",
34 |         },
35 |         destructive: {
36 |           DEFAULT: "hsl(var(--destructive))",
37 |           foreground: "hsl(var(--destructive-foreground))",
38 |         },
39 |         muted: {
40 |           DEFAULT: "hsl(var(--muted))",
41 |           foreground: "hsl(var(--muted-foreground))",
42 |         },
43 |         accent: {
44 |           DEFAULT: "hsl(var(--accent))",
45 |           foreground: "hsl(var(--accent-foreground))",
46 |         },
47 |         popover: {
48 |           DEFAULT: "hsl(var(--popover))",
49 |           foreground: "hsl(var(--popover-foreground))",
50 |         },
51 |         card: {
52 |           DEFAULT: "hsl(var(--card))",
53 |           foreground: "hsl(var(--card-foreground))",
54 |         },
55 |       },
56 |       borderRadius: {
57 |         lg: "var(--radius)",
58 |         md: "calc(var(--radius) - 2px)",
59 |         sm: "calc(var(--radius) - 4px)",
60 |       },
61 |       keyframes: {
62 |         "accordion-down": {
63 |           from: { height: "0" },
64 |           to: { height: "var(--radix-accordion-content-height)" },
65 |         },
66 |         "accordion-up": {
67 |           from: { height: "var(--radix-accordion-content-height)" },
68 |           to: { height: "0" },
69 |         },
70 |       },
71 |       animation: {
72 |         "accordion-down": "accordion-down 0.2s ease-out",
73 |         "accordion-up": "accordion-up 0.2s ease-out",
74 |       },
75 |     },
76 |   },
77 |   plugins: [require("tailwindcss-animate")],
78 | } satisfies Config
79 | 
80 | export default config


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Unfollowers Finder for GitHub
 2 | 
 3 | Unfollowers Finder for GitHub is a web application that helps you identify users you are following on GitHub but who are not following you back. This tool simplifies the process of managing your GitHub network and staying informed about your connections.
 4 | 
 5 | ## Live 
 6 | Check out the live @ https://unfollo.ws
 7 | 
 8 | ![Unfollowers Finder](/public/images/unfollowers-finder-github.gif)
 9 | 
10 | ## Table of Contents
11 | 
12 | - [Features](#features)
13 | - [Technologies](#technologies)
14 | - [Installation](#installation)
15 | - [Contributing](#contributing)
16 | - [License](#license)
17 | 
18 | ## Features
19 | 
20 | - **Identify Unfollowers:** Find GitHub users who are not following you back.
21 | - **Interactive Interface:** User-friendly design with easy navigation.
22 | - **GitHub Authentication:** Securely log in using your GitHub account.
23 | - **Responsive Design:** Access the tool from various devices with a responsive layout.
24 | 
25 | ## Technologies Used
26 | 
27 | - **Next.js:** React framework for building web applications.
28 | - **React:** JavaScript library for building user interfaces.
29 | - **Tailwind CSS:** Utility-first CSS framework for styling.
30 | - **Schadcn UI:** React component library for building UI.
31 | - **Zod:** TypeScript-first schema declaration and validation library.
32 | - **Vercel:** Cloud platform for static sites and serverless functions.
33 | 
34 | ## Installation
35 | 
36 | To run the Unfollowers Finder for GitHub web app locally, follow these steps:
37 | 
38 | 1. Clone the repository:
39 | 
40 |    ```bash
41 |    git clone https://github.com/HappyHackingSpace/unfollowers-finder-github.git
42 |     ```
43 | 
44 | 2. Navigate to the project directory:
45 | 
46 |    ```bash
47 |    cd unfollowers-finder-github
48 |    ```
49 | 
50 | 3. Install the dependencies:
51 | 
52 |    ```bash
53 |     npm install
54 |     ```
55 | 
56 | 4. Run the development server:
57 | 
58 |    ```bash
59 |    npm run dev
60 |    ```
61 | 
62 | 6. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
63 | 
64 | ### Database
65 | The application do not use any database. It uses the GitHub API to fetch the data.
66 | 
67 | ## Contributing
68 | 
69 | Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request. Follow these steps to contribute:
70 | 
71 | 1. Fork the repository.
72 | 2. Create a new branch for your feature or bug fix.
73 | 3. Make the necessary changes and commit those changes.
74 | 4. Push your code to your forked repository.
75 | 5. Submit a pull request describing the changes you made.
76 | 
77 | Please make sure to follow the existing code style and conventions.
78 | 
79 | ## License
80 | 
81 | [MIT](https://choosealicense.com/licenses/mit/)
82 | 
83 | Feel free to explore the codebase and make it your own! If you have any questions, reach out to the project maintainers or create an issue on GitHub.
84 | 
85 | We hope you find Unfollowers Finder for GitHub useful to manage your GitHub network effortlessly! Enjoy the application and stay informed about the people you follow on GitHub!
86 | 
87 | Feel free to modify the content according to your specific project details, and customize the sections as per your requirements.
88 | 
89 | Also, don't forget to star the repository if you like the project. Happy Coding! :rocket:
90 | 


--------------------------------------------------------------------------------
/src/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
  1 | // Inspired by react-hot-toast library
  2 | import * as React from "react"
  3 | 
  4 | import type {
  5 |   ToastActionElement,
  6 |   ToastProps,
  7 | } from "@/components/ui/toast"
  8 | 
  9 | const TOAST_LIMIT = 1
 10 | const TOAST_REMOVE_DELAY = 1000000
 11 | 
 12 | type ToasterToast = ToastProps & {
 13 |   id: string
 14 |   title?: React.ReactNode
 15 |   description?: React.ReactNode
 16 |   action?: ToastActionElement
 17 | }
 18 | 
 19 | const actionTypes = {
 20 |   ADD_TOAST: "ADD_TOAST",
 21 |   UPDATE_TOAST: "UPDATE_TOAST",
 22 |   DISMISS_TOAST: "DISMISS_TOAST",
 23 |   REMOVE_TOAST: "REMOVE_TOAST",
 24 | } as const
 25 | 
 26 | let count = 0
 27 | 
 28 | function genId() {
 29 |   count = (count + 1) % Number.MAX_SAFE_INTEGER
 30 |   return count.toString()
 31 | }
 32 | 
 33 | type ActionType = typeof actionTypes
 34 | 
 35 | type Action =
 36 |   | {
 37 |       type: ActionType["ADD_TOAST"]
 38 |       toast: ToasterToast
 39 |     }
 40 |   | {
 41 |       type: ActionType["UPDATE_TOAST"]
 42 |       toast: Partial<ToasterToast>
 43 |     }
 44 |   | {
 45 |       type: ActionType["DISMISS_TOAST"]
 46 |       toastId?: ToasterToast["id"]
 47 |     }
 48 |   | {
 49 |       type: ActionType["REMOVE_TOAST"]
 50 |       toastId?: ToasterToast["id"]
 51 |     }
 52 | 
 53 | interface State {
 54 |   toasts: ToasterToast[]
 55 | }
 56 | 
 57 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 58 | 
 59 | const addToRemoveQueue = (toastId: string) => {
 60 |   if (toastTimeouts.has(toastId)) {
 61 |     return
 62 |   }
 63 | 
 64 |   const timeout = setTimeout(() => {
 65 |     toastTimeouts.delete(toastId)
 66 |     dispatch({
 67 |       type: "REMOVE_TOAST",
 68 |       toastId: toastId,
 69 |     })
 70 |   }, TOAST_REMOVE_DELAY)
 71 | 
 72 |   toastTimeouts.set(toastId, timeout)
 73 | }
 74 | 
 75 | export const reducer = (state: State, action: Action): State => {
 76 |   switch (action.type) {
 77 |     case "ADD_TOAST":
 78 |       return {
 79 |         ...state,
 80 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 81 |       }
 82 | 
 83 |     case "UPDATE_TOAST":
 84 |       return {
 85 |         ...state,
 86 |         toasts: state.toasts.map((t) =>
 87 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 88 |         ),
 89 |       }
 90 | 
 91 |     case "DISMISS_TOAST": {
 92 |       const { toastId } = action
 93 | 
 94 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 95 |       // but I'll keep it here for simplicity
 96 |       if (toastId) {
 97 |         addToRemoveQueue(toastId)
 98 |       } else {
 99 |         state.toasts.forEach((toast) => {
100 |           addToRemoveQueue(toast.id)
101 |         })
102 |       }
103 | 
104 |       return {
105 |         ...state,
106 |         toasts: state.toasts.map((t) =>
107 |           t.id === toastId || toastId === undefined
108 |             ? {
109 |                 ...t,
110 |                 open: false,
111 |               }
112 |             : t
113 |         ),
114 |       }
115 |     }
116 |     case "REMOVE_TOAST":
117 |       if (action.toastId === undefined) {
118 |         return {
119 |           ...state,
120 |           toasts: [],
121 |         }
122 |       }
123 |       return {
124 |         ...state,
125 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
126 |       }
127 |   }
128 | }
129 | 
130 | const listeners: Array<(state: State) => void> = []
131 | 
132 | let memoryState: State = { toasts: [] }
133 | 
134 | function dispatch(action: Action) {
135 |   memoryState = reducer(memoryState, action)
136 |   listeners.forEach((listener) => {
137 |     listener(memoryState)
138 |   })
139 | }
140 | 
141 | type Toast = Omit<ToasterToast, "id">
142 | 
143 | function toast({ ...props }: Toast) {
144 |   const id = genId()
145 | 
146 |   const update = (props: ToasterToast) =>
147 |     dispatch({
148 |       type: "UPDATE_TOAST",
149 |       toast: { ...props, id },
150 |     })
151 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
152 | 
153 |   dispatch({
154 |     type: "ADD_TOAST",
155 |     toast: {
156 |       ...props,
157 |       id,
158 |       open: true,
159 |       onOpenChange: (open) => {
160 |         if (!open) dismiss()
161 |       },
162 |     },
163 |   })
164 | 
165 |   return {
166 |     id: id,
167 |     dismiss,
168 |     update,
169 |   }
170 | }
171 | 
172 | function useToast() {
173 |   const [state, setState] = React.useState<State>(memoryState)
174 | 
175 |   React.useEffect(() => {
176 |     listeners.push(setState)
177 |     return () => {
178 |       const index = listeners.indexOf(setState)
179 |       if (index > -1) {
180 |         listeners.splice(index, 1)
181 |       }
182 |     }
183 |   }, [state])
184 | 
185 |   return {
186 |     ...state,
187 |     toast,
188 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
189 |   }
190 | }
191 | 
192 | export { useToast, toast }
193 | 


--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as LabelPrimitive from "@radix-ui/react-label"
  3 | import { Slot } from "@radix-ui/react-slot"
  4 | import {
  5 |   Controller,
  6 |   ControllerProps,
  7 |   FieldPath,
  8 |   FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 | } from "react-hook-form"
 12 | 
 13 | import { cn } from "@/lib/utils"
 14 | import { Label } from "@/components/ui/label"
 15 | 
 16 | const Form = FormProvider
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 21 | > = {
 22 |   name: TName
 23 | }
 24 | 
 25 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue
 27 | )
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   )
 40 | }
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext)
 44 |   const itemContext = React.useContext(FormItemContext)
 45 |   const { getFieldState, formState } = useFormContext()
 46 | 
 47 |   const fieldState = getFieldState(fieldContext.name, formState)
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error("useFormField should be used within <FormField>")
 51 |   }
 52 | 
 53 |   const { id } = itemContext
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   }
 63 | }
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string
 67 | }
 68 | 
 69 | const FormItemContext = React.createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue
 71 | )
 72 | 
 73 | const FormItem = React.forwardRef<
 74 |   HTMLDivElement,
 75 |   React.HTMLAttributes<HTMLDivElement>
 76 | >(({ className, ...props }, ref) => {
 77 |   const id = React.useId()
 78 | 
 79 |   return (
 80 |     <FormItemContext.Provider value={{ id }}>
 81 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 82 |     </FormItemContext.Provider>
 83 |   )
 84 | })
 85 | FormItem.displayName = "FormItem"
 86 | 
 87 | const FormLabel = React.forwardRef<
 88 |   React.ElementRef<typeof LabelPrimitive.Root>,
 89 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 90 | >(({ className, ...props }, ref) => {
 91 |   const { error, formItemId } = useFormField()
 92 | 
 93 |   return (
 94 |     <Label
 95 |       ref={ref}
 96 |       className={cn(error && "text-destructive", className)}
 97 |       htmlFor={formItemId}
 98 |       {...props}
 99 |     />
100 |   )
101 | })
102 | FormLabel.displayName = "FormLabel"
103 | 
104 | const FormControl = React.forwardRef<
105 |   React.ElementRef<typeof Slot>,
106 |   React.ComponentPropsWithoutRef<typeof Slot>
107 | >(({ ...props }, ref) => {
108 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109 | 
110 |   return (
111 |     <Slot
112 |       ref={ref}
113 |       id={formItemId}
114 |       aria-describedby={
115 |         !error
116 |           ? `${formDescriptionId}`
117 |           : `${formDescriptionId} ${formMessageId}`
118 |       }
119 |       aria-invalid={!!error}
120 |       {...props}
121 |     />
122 |   )
123 | })
124 | FormControl.displayName = "FormControl"
125 | 
126 | const FormDescription = React.forwardRef<
127 |   HTMLParagraphElement,
128 |   React.HTMLAttributes<HTMLParagraphElement>
129 | >(({ className, ...props }, ref) => {
130 |   const { formDescriptionId } = useFormField()
131 | 
132 |   return (
133 |     <p
134 |       ref={ref}
135 |       id={formDescriptionId}
136 |       className={cn("text-sm text-muted-foreground", className)}
137 |       {...props}
138 |     />
139 |   )
140 | })
141 | FormDescription.displayName = "FormDescription"
142 | 
143 | const FormMessage = React.forwardRef<
144 |   HTMLParagraphElement,
145 |   React.HTMLAttributes<HTMLParagraphElement>
146 | >(({ className, children, ...props }, ref) => {
147 |   const { error, formMessageId } = useFormField()
148 |   const body = error ? String(error?.message) : children
149 | 
150 |   if (!body) {
151 |     return null
152 |   }
153 | 
154 |   return (
155 |     <p
156 |       ref={ref}
157 |       id={formMessageId}
158 |       className={cn("text-sm font-medium text-destructive", className)}
159 |       {...props}
160 |     >
161 |       {body}
162 |     </p>
163 |   )
164 | })
165 | FormMessage.displayName = "FormMessage"
166 | 
167 | export {
168 |   useFormField,
169 |   Form,
170 |   FormItem,
171 |   FormLabel,
172 |   FormControl,
173 |   FormDescription,
174 |   FormMessage,
175 |   FormField,
176 | }
177 | 


--------------------------------------------------------------------------------
/src/components/Forms/InputForm.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | import * as React from "react"
  3 | import { zodResolver } from "@hookform/resolvers/zod"
  4 | import { useForm } from "react-hook-form"
  5 | import * as z from "zod"
  6 | 
  7 | import CardDemo from "@/components/Cards/UserCard";
  8 | import SkeletonDemo from "@/components/Loading/Skeleton";
  9 | import { Button } from "@/components/ui/button"
 10 | import { 
 11 |   Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage,
 12 | } from "@/components/ui/form"
 13 | import { Input } from "@/components/ui/input"
 14 | 
 15 | const FormSchema = z.object({
 16 |   username: z.string().min(1, {
 17 |     message: "Username must be at least 1 characters.",
 18 |   }),
 19 | })
 20 | 
 21 | export default function InputForm() {
 22 |   const form = useForm<z.infer<typeof FormSchema>>({
 23 |     resolver: zodResolver(FormSchema),
 24 |     defaultValues: {
 25 |       username: "",
 26 |     },
 27 |   })
 28 | 
 29 |   const [loading, setLoading] = React.useState(false);
 30 |   const [unfollowers, setUnfollowers] = React.useState<any[]>([]);
 31 |   const [error, setError] = React.useState<string | null>(null);
 32 |   const [hasSearched, setHasSearched] = React.useState(false);
 33 | 
 34 |   // Function to fetch data from GitHub API
 35 |   const fetchGitHubData = async (url: string) => {
 36 |     const response = await fetch(url);
 37 |     if (!response?.ok) {
 38 |       throw new Error(`GitHub API request failed: ${response?.statusText}`);
 39 |     }
 40 |     return response.json();
 41 |   };
 42 | 
 43 |   // Function to fetch all pages for a paginated API
 44 |   const fetchAllPages = async (url: string) => {
 45 |     let allData: any[] = [];
 46 |     let page = 1;
 47 | 
 48 |     while (true) {
 49 |       const data = await fetchGitHubData(`${url}&page=${page}`);
 50 |       if (data?.length === 0) {
 51 |         break;
 52 |       }
 53 |       allData = allData?.concat(data);
 54 |       page++;
 55 |     }
 56 | 
 57 |     return allData;
 58 |   };
 59 | 
 60 |   // Function to handle form submission
 61 |   async function onSubmit(data: z.infer<typeof FormSchema>) {
 62 |     setError(null);
 63 |     setLoading(true);
 64 |     setUnfollowers([]);
 65 |     setHasSearched(true);
 66 |     
 67 |     try {
 68 |       // Remove @ symbol if present
 69 |       const cleanUsername = data?.username?.replace('@', '');
 70 | 
 71 |       // Fetch both following and followers data
 72 |       const [following, followers] = await Promise.all([
 73 |         fetchAllPages(`https://api.github.com/users/${cleanUsername}/following?per_page=100`),
 74 |         fetchAllPages(`https://api.github.com/users/${cleanUsername}/followers?per_page=100`)
 75 |       ]);
 76 | 
 77 |       // Identify users who are not following back
 78 |       const notFollowing = following?.filter((follow) => 
 79 |         !followers?.some((follower) => follower?.login === follow?.login)
 80 |       );
 81 | 
 82 |       setUnfollowers(notFollowing);
 83 |     } catch (err) {
 84 |       setError('Failed to fetch GitHub data. Please check the username and try again.');
 85 |       setUnfollowers([]);
 86 |     } finally {
 87 |       setLoading(false);
 88 |     }
 89 |   }
 90 | 
 91 |   return (
 92 |     <>
 93 |       <Form {...form}>
 94 |         <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col lg:flex-row items-center justify-center w-full max-w-[50rem] max-lg:w-[25rem] gap-16 max-lg:gap-4 text-base">
 95 |           <FormField
 96 |             control={form.control}
 97 |             name="username"
 98 |             render={({ field }) => (
 99 |               <FormItem className="w-full">
100 |                 <FormLabel>Username</FormLabel>
101 |                 <FormControl>
102 |                   <Input 
103 |                     placeholder="Enter GitHub username (without @)" 
104 |                     {...field} 
105 |                     className="text-base"
106 |                     onChange={(e) => field?.onChange(e.target.value.replace('@', ''))}
107 |                   />
108 |                 </FormControl>
109 |                 <FormDescription>
110 |                   Find out who unfollowed you on GitHub
111 |                 </FormDescription>
112 |                 <FormMessage />
113 |               </FormItem>
114 |             )}
115 |           />
116 |           <Button type="submit" className="ml-auto text-base" disabled={loading}>
117 |             {loading ? <span>Loading...</span> : <span>Find Unfollowers</span>}
118 |           </Button>
119 |         </form>
120 |       </Form>
121 | 
122 |       {error && (
123 |         <p className="text-red-500 mt-4">{error}</p>
124 |       )}
125 | 
126 |       {loading ? (
127 |         <div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
128 |           <SkeletonDemo />
129 |         </div>
130 |       ) : (
131 |         <div className="grid grid-cols-2 gap-4 pb-20 max-lg:grid-cols-1">
132 |           {unfollowers?.length > 0 && (
133 |             unfollowers?.map((unfollower) => (
134 |               <CardDemo key={unfollower?.id} unfollower={unfollower} />
135 |             ))
136 |           )}
137 |         </div>
138 |       )}
139 |       
140 |       {!loading && !error && hasSearched && unfollowers?.length === 0 && (
141 |         <p className="text-2xl font-bold text-primary">No unfollowers found</p>
142 |       )}
143 |     </>
144 |   )
145 | }


--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as ToastPrimitives from "@radix-ui/react-toast"
  3 | import { cva, type VariantProps } from "class-variance-authority"
  4 | import { X } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const ToastProvider = ToastPrimitives.Provider
  9 | 
 10 | const ToastViewport = React.forwardRef<
 11 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 12 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 13 | >(({ className, ...props }, ref) => (
 14 |   <ToastPrimitives.Viewport
 15 |     ref={ref}
 16 |     className={cn(
 17 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 18 |       className
 19 |     )}
 20 |     {...props}
 21 |   />
 22 | ))
 23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 24 | 
 25 | const toastVariants = cva(
 26 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 27 |   {
 28 |     variants: {
 29 |       variant: {
 30 |         default: "border bg-background text-foreground",
 31 |         destructive:
 32 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 33 |       },
 34 |     },
 35 |     defaultVariants: {
 36 |       variant: "default",
 37 |     },
 38 |   }
 39 | )
 40 | 
 41 | const Toast = React.forwardRef<
 42 |   React.ElementRef<typeof ToastPrimitives.Root>,
 43 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 44 |     VariantProps<typeof toastVariants>
 45 | >(({ className, variant, ...props }, ref) => {
 46 |   return (
 47 |     <ToastPrimitives.Root
 48 |       ref={ref}
 49 |       className={cn(toastVariants({ variant }), className)}
 50 |       {...props}
 51 |     />
 52 |   )
 53 | })
 54 | Toast.displayName = ToastPrimitives.Root.displayName
 55 | 
 56 | const ToastAction = React.forwardRef<
 57 |   React.ElementRef<typeof ToastPrimitives.Action>,
 58 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 59 | >(({ className, ...props }, ref) => (
 60 |   <ToastPrimitives.Action
 61 |     ref={ref}
 62 |     className={cn(
 63 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
 64 |       className
 65 |     )}
 66 |     {...props}
 67 |   />
 68 | ))
 69 | ToastAction.displayName = ToastPrimitives.Action.displayName
 70 | 
 71 | const ToastClose = React.forwardRef<
 72 |   React.ElementRef<typeof ToastPrimitives.Close>,
 73 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 74 | >(({ className, ...props }, ref) => (
 75 |   <ToastPrimitives.Close
 76 |     ref={ref}
 77 |     className={cn(
 78 |       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
 79 |       className
 80 |     )}
 81 |     toast-close=""
 82 |     {...props}
 83 |   >
 84 |     <X className="h-4 w-4" />
 85 |   </ToastPrimitives.Close>
 86 | ))
 87 | ToastClose.displayName = ToastPrimitives.Close.displayName
 88 | 
 89 | const ToastTitle = React.forwardRef<
 90 |   React.ElementRef<typeof ToastPrimitives.Title>,
 91 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 92 | >(({ className, ...props }, ref) => (
 93 |   <ToastPrimitives.Title
 94 |     ref={ref}
 95 |     className={cn("text-sm font-semibold", className)}
 96 |     {...props}
 97 |   />
 98 | ))
 99 | ToastTitle.displayName = ToastPrimitives.Title.displayName
100 | 
101 | const ToastDescription = React.forwardRef<
102 |   React.ElementRef<typeof ToastPrimitives.Description>,
103 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
104 | >(({ className, ...props }, ref) => (
105 |   <ToastPrimitives.Description
106 |     ref={ref}
107 |     className={cn("text-sm opacity-90", className)}
108 |     {...props}
109 |   />
110 | ))
111 | ToastDescription.displayName = ToastPrimitives.Description.displayName
112 | 
113 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
114 | 
115 | type ToastActionElement = React.ReactElement<typeof ToastAction>
116 | 
117 | export {
118 |   type ToastProps,
119 |   type ToastActionElement,
120 |   ToastProvider,
121 |   ToastViewport,
122 |   Toast,
123 |   ToastTitle,
124 |   ToastDescription,
125 |   ToastClose,
126 |   ToastAction,
127 | }
128 | 


--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const DropdownMenu = DropdownMenuPrimitive.Root
 10 | 
 11 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 12 | 
 13 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 14 | 
 15 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 16 | 
 17 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 18 | 
 19 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 20 | 
 21 | const DropdownMenuSubTrigger = React.forwardRef<
 22 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 23 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 24 |     inset?: boolean
 25 |   }
 26 | >(({ className, inset, children, ...props }, ref) => (
 27 |   <DropdownMenuPrimitive.SubTrigger
 28 |     ref={ref}
 29 |     className={cn(
 30 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 31 |       inset && "pl-8",
 32 |       className
 33 |     )}
 34 |     {...props}
 35 |   >
 36 |     {children}
 37 |     <ChevronRight className="ml-auto h-4 w-4" />
 38 |   </DropdownMenuPrimitive.SubTrigger>
 39 | ))
 40 | DropdownMenuSubTrigger.displayName =
 41 |   DropdownMenuPrimitive.SubTrigger.displayName
 42 | 
 43 | const DropdownMenuSubContent = React.forwardRef<
 44 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 45 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 46 | >(({ className, ...props }, ref) => (
 47 |   <DropdownMenuPrimitive.SubContent
 48 |     ref={ref}
 49 |     className={cn(
 50 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 51 |       className
 52 |     )}
 53 |     {...props}
 54 |   />
 55 | ))
 56 | DropdownMenuSubContent.displayName =
 57 |   DropdownMenuPrimitive.SubContent.displayName
 58 | 
 59 | const DropdownMenuContent = React.forwardRef<
 60 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 61 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 62 | >(({ className, sideOffset = 4, ...props }, ref) => (
 63 |   <DropdownMenuPrimitive.Portal>
 64 |     <DropdownMenuPrimitive.Content
 65 |       ref={ref}
 66 |       sideOffset={sideOffset}
 67 |       className={cn(
 68 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 69 |         className
 70 |       )}
 71 |       {...props}
 72 |     />
 73 |   </DropdownMenuPrimitive.Portal>
 74 | ))
 75 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 76 | 
 77 | const DropdownMenuItem = React.forwardRef<
 78 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 79 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 80 |     inset?: boolean
 81 |   }
 82 | >(({ className, inset, ...props }, ref) => (
 83 |   <DropdownMenuPrimitive.Item
 84 |     ref={ref}
 85 |     className={cn(
 86 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 87 |       inset && "pl-8",
 88 |       className
 89 |     )}
 90 |     {...props}
 91 |   />
 92 | ))
 93 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 94 | 
 95 | const DropdownMenuCheckboxItem = React.forwardRef<
 96 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 97 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 98 | >(({ className, children, checked, ...props }, ref) => (
 99 |   <DropdownMenuPrimitive.CheckboxItem
100 |     ref={ref}
101 |     className={cn(
102 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
103 |       className
104 |     )}
105 |     checked={checked}
106 |     {...props}
107 |   >
108 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
109 |       <DropdownMenuPrimitive.ItemIndicator>
110 |         <Check className="h-4 w-4" />
111 |       </DropdownMenuPrimitive.ItemIndicator>
112 |     </span>
113 |     {children}
114 |   </DropdownMenuPrimitive.CheckboxItem>
115 | ))
116 | DropdownMenuCheckboxItem.displayName =
117 |   DropdownMenuPrimitive.CheckboxItem.displayName
118 | 
119 | const DropdownMenuRadioItem = React.forwardRef<
120 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
121 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
122 | >(({ className, children, ...props }, ref) => (
123 |   <DropdownMenuPrimitive.RadioItem
124 |     ref={ref}
125 |     className={cn(
126 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
127 |       className
128 |     )}
129 |     {...props}
130 |   >
131 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
132 |       <DropdownMenuPrimitive.ItemIndicator>
133 |         <Circle className="h-2 w-2 fill-current" />
134 |       </DropdownMenuPrimitive.ItemIndicator>
135 |     </span>
136 |     {children}
137 |   </DropdownMenuPrimitive.RadioItem>
138 | ))
139 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
140 | 
141 | const DropdownMenuLabel = React.forwardRef<
142 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
143 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
144 |     inset?: boolean
145 |   }
146 | >(({ className, inset, ...props }, ref) => (
147 |   <DropdownMenuPrimitive.Label
148 |     ref={ref}
149 |     className={cn(
150 |       "px-2 py-1.5 text-sm font-semibold",
151 |       inset && "pl-8",
152 |       className
153 |     )}
154 |     {...props}
155 |   />
156 | ))
157 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
158 | 
159 | const DropdownMenuSeparator = React.forwardRef<
160 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
161 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
162 | >(({ className, ...props }, ref) => (
163 |   <DropdownMenuPrimitive.Separator
164 |     ref={ref}
165 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
166 |     {...props}
167 |   />
168 | ))
169 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
170 | 
171 | const DropdownMenuShortcut = ({
172 |   className,
173 |   ...props
174 | }: React.HTMLAttributes<HTMLSpanElement>) => {
175 |   return (
176 |     <span
177 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
178 |       {...props}
179 |     />
180 |   )
181 | }
182 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
183 | 
184 | export {
185 |   DropdownMenu,
186 |   DropdownMenuTrigger,
187 |   DropdownMenuContent,
188 |   DropdownMenuItem,
189 |   DropdownMenuCheckboxItem,
190 |   DropdownMenuRadioItem,
191 |   DropdownMenuLabel,
192 |   DropdownMenuSeparator,
193 |   DropdownMenuShortcut,
194 |   DropdownMenuGroup,
195 |   DropdownMenuPortal,
196 |   DropdownMenuSub,
197 |   DropdownMenuSubContent,
198 |   DropdownMenuSubTrigger,
199 |   DropdownMenuRadioGroup,
200 | }
201 | 


--------------------------------------------------------------------------------