🎨 refactor(pages): rearrange imports and formatting for Blog, BlogArticle, ProjectDetails, and Projects
This commit organizes import statements and standardizes code formatting across the Blog, BlogArticle, ProjectDetails, and Projects pages. Improvements include consistent spacing, use of double quotes, and more readable conditional rendering, contributing to better maintainability and readability of the codebase.
This commit is contained in:
Abumahid Islam
+109
-45
@@ -1,21 +1,27 @@
|
||||
import { useParams, Link, useNavigate } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowLeft, Calendar, Clock, Twitter, Linkedin, Facebook, Link2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { toast } from 'sonner';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import PageTransition from '@/components/PageTransition';
|
||||
import { getPostBySlug, getRelatedPosts } from '@/data/blogData';
|
||||
import { useBlogById } from '@/hooks/queires/useBlogs';
|
||||
import PageTransition from "@/components/PageTransition";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { getRelatedPosts } from "@/data/blogData";
|
||||
import { useBlogById } from "@/hooks/queires/useBlogs";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Calendar,
|
||||
Clock,
|
||||
Facebook,
|
||||
Link2,
|
||||
Linkedin,
|
||||
Twitter,
|
||||
} from "lucide-react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function BlogArticle() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const {data} = useBlogById(id);
|
||||
const { data } = useBlogById(id);
|
||||
|
||||
const post = data?.data.data
|
||||
const post = data?.data.data;
|
||||
const navigate = useNavigate();
|
||||
// const post = getPostBySlug(id || '');
|
||||
|
||||
@@ -25,8 +31,10 @@ export default function BlogArticle() {
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Article Not Found</h1>
|
||||
<p className="text-muted-foreground mb-8">The article you're looking for doesn't exist.</p>
|
||||
<Button onClick={() => navigate('/blog')}>Back to Blog</Button>
|
||||
<p className="text-muted-foreground mb-8">
|
||||
The article you're looking for doesn't exist.
|
||||
</p>
|
||||
<Button onClick={() => navigate("/blog")}>Back to Blog</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PageTransition>
|
||||
@@ -43,19 +51,17 @@ export default function BlogArticle() {
|
||||
facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`,
|
||||
};
|
||||
|
||||
if (platform === 'copy') {
|
||||
if (platform === "copy") {
|
||||
navigator.clipboard.writeText(shareUrl);
|
||||
toast.success('Link copied to clipboard!');
|
||||
toast.success("Link copied to clipboard!");
|
||||
} else {
|
||||
window.open(urls[platform], '_blank', 'width=600,height=400');
|
||||
window.open(urls[platform], "_blank", "width=600,height=400");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<PageTransition>
|
||||
<div className="min-h-screen bg-background overflow-x-hidden">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero */}
|
||||
<section className="pt-32 pb-16 relative overflow-hidden">
|
||||
<div className="absolute inset-0">
|
||||
@@ -110,13 +116,19 @@ export default function BlogArticle() {
|
||||
className="w-10 h-10 rounded-full object-cover border-2 border-primary/50"
|
||||
/>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">{post.author.name}</p>
|
||||
<p className="font-medium text-foreground">
|
||||
{post.author.name}
|
||||
</p>
|
||||
<p className="text-sm">{post.author.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{new Date(post.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
|
||||
{new Date(post.date).toLocaleDateString("en-US", {
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" />
|
||||
@@ -154,17 +166,57 @@ export default function BlogArticle() {
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
h1: ({ children }) => <h1 className="text-3xl font-bold text-foreground mt-8 mb-4">{children}</h1>,
|
||||
h2: ({ children }) => <h2 className="text-2xl font-bold text-foreground mt-8 mb-4">{children}</h2>,
|
||||
h3: ({ children }) => <h3 className="text-xl font-bold text-foreground mt-6 mb-3">{children}</h3>,
|
||||
h4: ({ children }) => <h4 className="text-lg font-bold text-foreground mt-4 mb-2">{children}</h4>,
|
||||
p: ({ children }) => <p className="text-muted-foreground leading-relaxed mb-4">{children}</p>,
|
||||
ul: ({ children }) => <ul className="list-disc list-inside text-muted-foreground space-y-2 mb-4 ml-4">{children}</ul>,
|
||||
ol: ({ children }) => <ol className="list-decimal list-inside text-muted-foreground space-y-2 mb-4 ml-4">{children}</ol>,
|
||||
li: ({ children }) => <li className="text-muted-foreground">{children}</li>,
|
||||
a: ({ href, children }) => <a href={href} className="text-primary hover:underline">{children}</a>,
|
||||
strong: ({ children }) => <strong className="font-bold text-foreground">{children}</strong>,
|
||||
em: ({ children }) => <em className="italic">{children}</em>,
|
||||
h1: ({ children }) => (
|
||||
<h1 className="text-3xl font-bold text-foreground mt-8 mb-4">
|
||||
{children}
|
||||
</h1>
|
||||
),
|
||||
h2: ({ children }) => (
|
||||
<h2 className="text-2xl font-bold text-foreground mt-8 mb-4">
|
||||
{children}
|
||||
</h2>
|
||||
),
|
||||
h3: ({ children }) => (
|
||||
<h3 className="text-xl font-bold text-foreground mt-6 mb-3">
|
||||
{children}
|
||||
</h3>
|
||||
),
|
||||
h4: ({ children }) => (
|
||||
<h4 className="text-lg font-bold text-foreground mt-4 mb-2">
|
||||
{children}
|
||||
</h4>
|
||||
),
|
||||
p: ({ children }) => (
|
||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||||
{children}
|
||||
</p>
|
||||
),
|
||||
ul: ({ children }) => (
|
||||
<ul className="list-disc list-inside text-muted-foreground space-y-2 mb-4 ml-4">
|
||||
{children}
|
||||
</ul>
|
||||
),
|
||||
ol: ({ children }) => (
|
||||
<ol className="list-decimal list-inside text-muted-foreground space-y-2 mb-4 ml-4">
|
||||
{children}
|
||||
</ol>
|
||||
),
|
||||
li: ({ children }) => (
|
||||
<li className="text-muted-foreground">{children}</li>
|
||||
),
|
||||
a: ({ href, children }) => (
|
||||
<a href={href} className="text-primary hover:underline">
|
||||
{children}
|
||||
</a>
|
||||
),
|
||||
strong: ({ children }) => (
|
||||
<strong className="font-bold text-foreground">
|
||||
{children}
|
||||
</strong>
|
||||
),
|
||||
em: ({ children }) => (
|
||||
<em className="italic">{children}</em>
|
||||
),
|
||||
blockquote: ({ children }) => (
|
||||
<blockquote className="border-l-4 border-primary pl-4 italic text-muted-foreground my-4">
|
||||
{children}
|
||||
@@ -173,7 +225,11 @@ export default function BlogArticle() {
|
||||
code: ({ className, children }) => {
|
||||
const isInline = !className;
|
||||
if (isInline) {
|
||||
return <code className="bg-muted px-1.5 py-0.5 rounded text-sm font-mono">{children}</code>;
|
||||
return (
|
||||
<code className="bg-muted px-1.5 py-0.5 rounded text-sm font-mono">
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<code className="block bg-muted border border-border rounded-lg p-4 overflow-x-auto text-sm font-mono my-4">
|
||||
@@ -181,7 +237,11 @@ export default function BlogArticle() {
|
||||
</code>
|
||||
);
|
||||
},
|
||||
pre: ({ children }) => <pre className="bg-muted border border-border rounded-lg p-4 overflow-x-auto my-4">{children}</pre>,
|
||||
pre: ({ children }) => (
|
||||
<pre className="bg-muted border border-border rounded-lg p-4 overflow-x-auto my-4">
|
||||
{children}
|
||||
</pre>
|
||||
),
|
||||
hr: () => <hr className="border-border my-8" />,
|
||||
}}
|
||||
>
|
||||
@@ -194,12 +254,14 @@ export default function BlogArticle() {
|
||||
<div className="sticky top-32 space-y-8">
|
||||
{/* Share */}
|
||||
<div className="glass rounded-2xl p-6">
|
||||
<h4 className="font-bold mb-4 text-sm uppercase tracking-wide text-muted-foreground">Share</h4>
|
||||
<h4 className="font-bold mb-4 text-sm uppercase tracking-wide text-muted-foreground">
|
||||
Share
|
||||
</h4>
|
||||
<div className="flex flex-col gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleShare('twitter')}
|
||||
onClick={() => handleShare("twitter")}
|
||||
className="justify-start gap-2 glass border-primary/30"
|
||||
>
|
||||
<Twitter className="w-4 h-4" /> Twitter
|
||||
@@ -207,7 +269,7 @@ export default function BlogArticle() {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleShare('linkedin')}
|
||||
onClick={() => handleShare("linkedin")}
|
||||
className="justify-start gap-2 glass border-primary/30"
|
||||
>
|
||||
<Linkedin className="w-4 h-4" /> LinkedIn
|
||||
@@ -215,7 +277,7 @@ export default function BlogArticle() {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleShare('facebook')}
|
||||
onClick={() => handleShare("facebook")}
|
||||
className="justify-start gap-2 glass border-primary/30"
|
||||
>
|
||||
<Facebook className="w-4 h-4" /> Facebook
|
||||
@@ -223,7 +285,7 @@ export default function BlogArticle() {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleShare('copy')}
|
||||
onClick={() => handleShare("copy")}
|
||||
className="justify-start gap-2 glass border-primary/30"
|
||||
>
|
||||
<Link2 className="w-4 h-4" /> Copy Link
|
||||
@@ -233,7 +295,9 @@ export default function BlogArticle() {
|
||||
|
||||
{/* Tags */}
|
||||
<div className="glass rounded-2xl p-6">
|
||||
<h4 className="font-bold mb-4 text-sm uppercase tracking-wide text-muted-foreground">Tags</h4>
|
||||
<h4 className="font-bold mb-4 text-sm uppercase tracking-wide text-muted-foreground">
|
||||
Tags
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{post.tags.map((tag) => (
|
||||
<span
|
||||
@@ -267,7 +331,9 @@ export default function BlogArticle() {
|
||||
/>
|
||||
<div className="text-center md:text-left">
|
||||
<h3 className="text-2xl font-bold mb-2">{post.author.name}</h3>
|
||||
<p className="text-primary font-medium mb-4">{post.author.role}</p>
|
||||
<p className="text-primary font-medium mb-4">
|
||||
{post.author.role}
|
||||
</p>
|
||||
<p className="text-muted-foreground mb-4">{post.author.bio}</p>
|
||||
<div className="flex gap-3 justify-center md:justify-start">
|
||||
{post.author.twitter && (
|
||||
@@ -342,8 +408,6 @@ export default function BlogArticle() {
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</PageTransition>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user