refactor/ui-components

src/app/blog/[slug]/page.tsx

@@ -1,9 +1,9 @@
+import { Suspense } from "react";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
 import { getPost } from "@/data/blog";
 import { DATA } from "@/data/resume";
 import { formatDate } from "@/lib/utils";
-import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import { Suspense } from "react";
 
 export async function generateMetadata({
   params,

src/app/blog/page.tsx

@@ -1,14 +1,13 @@
-import BlurFade from "@/components/magicui/blur-fade";
-import { getBlogPosts } from "@/data/blog";
 import Link from "next/link";
+import { getBlogPosts } from "@/data/blog";
+import { BLUR_FADE_DELAY } from "@/data/constants";
+import BlurFade from "@/components/magicui/blur-fade";
 
 export const metadata = {
   title: "Blog - @yyassif",
   description: "My thoughts on software development, life, and so many more.",
 };
 
-const BLUR_FADE_DELAY = 0.04;
-
 export default async function BlogPage() {
   const posts = await getBlogPosts();
 

src/components/hackathon-card.tsx

@@ -1,6 +1,6 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
 import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
 interface Props {
   title: string;

src/components/mdx.tsx

@@ -1,6 +1,6 @@
-import Image from "next/image";
-import Link from "next/link";
 import React from "react";
+import Link from "next/link";
+import Image from "next/image";
 
 function Table({ data }: { data: { headers: string[]; rows: string[][] } }) {
   let headers = data.headers.map((header, index) => (

src/components/mode-toggle.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { useTheme } from "next-themes";
 import { Button } from "@/components/ui/button";
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
-import { useTheme } from "next-themes";
 
 export function ModeToggle() {
   const { theme, setTheme } = useTheme();

src/components/navbar.tsx

@@ -1,15 +1,15 @@
-import { Dock, DockIcon } from "@/components/magicui/dock";
+import Link from "next/link";
 import { ModeToggle } from "@/components/mode-toggle";
 import { buttonVariants } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { Dock, DockIcon } from "@/components/magicui/dock";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { DATA } from "@/data/resume";
 import { cn } from "@/lib/utils";
-import Link from "next/link";
 
 export default function Navbar() {
   return (

src/components/not-found.tsx

@@ -1,12 +1,11 @@
 "use client";
 
+import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
-
 import Meteors from "@/components/magicui/meteors";
 import Particles from "@/components/magicui/particles";
 import ShinyButton from "@/components/magicui/shiny-button";
-import Link from "next/link";
 
 export default function NotFound() {
   const { theme } = useTheme();

src/components/project-card.tsx

@@ -1,3 +1,6 @@
+import Link from "next/link";
+import Image from "next/image";
+import Markdown from "react-markdown";
 import { Badge } from "@/components/ui/badge";
 import {
   Card,
@@ -7,9 +10,6 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
-import Image from "next/image";
-import Link from "next/link";
-import Markdown from "react-markdown";
 
 interface Props {
   title: string;

src/components/resume-card.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import React from "react";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { ChevronRightIcon } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardHeader } from "@/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { cn } from "@/lib/utils";
-import { motion } from "framer-motion";
-import { ChevronRightIcon } from "lucide-react";
-import Link from "next/link";
-import React from "react";
 
 interface ResumeCardProps {
   logoUrl: string;

src/data/constants.ts

@@ -0,0 +1 @@
+export const BLUR_FADE_DELAY = 0.04;