Skip to content

feat: integrate api #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tensai023 merged 4 commits into from
Aug 13, 2025
Merged

feat: integrate api #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
59cd821
add: add contact us, fix homepage blog
rosan21 Aug 12, 2025
9ce6c72
fix: fix aboutus page
rosan21 Aug 12, 2025
4165b97
add: add event page, add event detail page
rosan21 Aug 12, 2025
3eec7d6
fix: fix event detail page
rosan21 Aug 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}
</style>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/logo.svg" />
<link rel="icon" type="image/png" href="/mountain.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mountain Children Home</title>
</head>
Expand Down
5 changes: 5 additions & 0 deletions public/mountain.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion src/App/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import BlogDetail from '@/pages/BlogDetail';
import Budget from '@/pages/Budget';
import ContactUs from '@/pages/ContactUs';
import Event from '@/pages/Event';
import EventDetail from '@/pages/EventDetail';
import Gallery from '@/pages/Gallery';
import Home from '@/pages/Home';
import Login from '@/pages/Login';
Expand Down Expand Up @@ -101,6 +102,10 @@ const router = createBrowserRouter([
path: '/event',
element: <Event />,
},
{
path: '/event/:id',
element: <EventDetail />,
},

],
},
Expand Down Expand Up @@ -198,5 +203,4 @@ function App() {
</AuthContext.Provider>
);
}

export default App;
Binary file added src/assets/Codex-01.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/Codex.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 49 additions & 0 deletions src/components/ui/badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import {
cva,
type VariantProps,
} from 'class-variance-authority';

import { cn } from '@/lib/utils';

const badgeVariants = cva(
'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
{
variants: {
variant: {
default:
'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
secondary:
'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
destructive:
'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
outline:
'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
},
},
defaultVariants: {
variant: 'default',
},
},
);

function Badge({
className,
variant,
asChild = false,
...props
}: React.ComponentProps<'span'> &
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot : 'span';

return (
<Comp
data-slot="badge"
className={cn(badgeVariants({ variant }), className)}
{...props}
/>
);
}

export { Badge, badgeVariants };

Check warning on line 49 in src/components/ui/badge.tsx

View workflow job for this annotation

GitHub Actions / Lint JS files 

Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components

Check warning on line 49 in src/components/ui/badge.tsx

View workflow job for this annotation

GitHub Actions / Lint JS files 

Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components
2 changes: 1 addition & 1 deletion src/constants/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const navigation = [
url: '/budget',
},
{
title: 'Event',
title: 'Events',
url: '/event',
},

Expand Down
3 changes: 2 additions & 1 deletion src/pages/AboutUs/OurStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import image1 from '@/assets/1.jpg';
import MaxWidthWrapper from '@/components/MaxWidthWrapper';

function OurStory() {
Expand Down Expand Up @@ -28,7 +29,7 @@ function OurStory() {
</div>
<div>
<img
src="https://images.unsplash.com/photo-1517022812141-23620dba5c23?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"
src={image1}
alt="Mountain Children Home building"
className="rounded-lg shadow-lg w-full"
/>
Expand Down
266 changes: 134 additions & 132 deletions src/pages/BlogDetail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,151 +155,153 @@ function BlogDetail() {

return (
<MaxWidthWrapper>
{/* Breadcrumb */}
<nav className="mb-8">
<Link to="/blog" className="text-primary hover:text-blue-700 font-medium">
← Back to Blog
</Link>
</nav>
<article className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
{/* Breadcrumb */}
<nav className="mb-8">
<Link to="/blog" className="text-primary hover:text-blue-700 font-medium">
← Back to Blog
</Link>
</nav>

{/* Article Header */}
<header className="mb-8">
<div className="flex items-center text-sm text-gray-500 mb-4">
{primaryTag && (
<span className="bg-primary text-white px-3 py-1 rounded-full mr-4">
{primaryTag.name}
</span>
)}
<Calendar className="h-4 w-4 mr-2" />
{formatDate(blog.published_at)}
<span className="mx-2">•</span>
<Book className="h-4 w-4 mr-2" />
{blog.reading_time}
{' '}
min read
</div>
{/* Article Header */}
<header className="mb-8">
<div className="flex items-center text-sm text-gray-500 mb-4">
{primaryTag && (
<span className="bg-primary text-white px-3 py-1 rounded-full mr-4">
{primaryTag.name}
</span>
)}
<Calendar className="h-4 w-4 mr-2" />
{formatDate(blog.published_at)}
<span className="mx-2">•</span>
<Book className="h-4 w-4 mr-2" />
{blog.reading_time}
{' '}
min read
</div>

<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight">
{blog.title}
</h1>
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight">
{blog.title}
</h1>

<div className="flex items-center mb-8">
<div className="flex items-center">
<Users className="h-5 w-5 mr-2 text-gray-400" />
<span className="text-gray-600 font-medium">
By
{' '}
{blog.author_name}
</span>
<div className="flex items-center mb-8">
<div className="flex items-center">
<Users className="h-5 w-5 mr-2 text-gray-400" />
<span className="text-gray-600 font-medium">
By
{' '}
{blog.author_name}
</span>
</div>
</div>
</div>

<img
src={blog.cover_image}
alt={blog.title}
className="w-full h-64 md:h-96 object-cover rounded-lg shadow-lg"
/>
</header>
<img
src={blog.cover_image}
alt={blog.title}
className="w-full h-64 md:h-96 object-cover rounded-lg shadow-lg"
/>
</header>

{/* Article Content */}
<div className="prose prose-lg max-w-none mb-12">
<div
dangerouslySetInnerHTML={{ __html: blog.content }}
className="text-gray-700 leading-relaxed space-y-6"
/>
</div>
{/* Article Content */}
<div className="prose prose-lg max-w-none mb-12">
<div
dangerouslySetInnerHTML={{ __html: blog.content }}
className="text-gray-700 leading-relaxed space-y-6"
/>
</div>

{/* Tags */}
{blog.tags && blog.tags.length > 0 && (
<div className="mb-8">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Tags</h3>
<div className="flex flex-wrap gap-2">
{blog.tags.map((tag) => (
<span
key={tag.id}
className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors"
>
{tag.name}
</span>
))}
{/* Tags */}
{blog.tags && blog.tags.length > 0 && (
<div className="mb-8">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Tags</h3>
<div className="flex flex-wrap gap-2">
{blog.tags.map((tag) => (
<span
key={tag.id}
className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors"
>
{tag.name}
</span>
))}
</div>
</div>
</div>
)}
)}

{/* Social Sharing */}
<div className="border-t border-gray-200 pt-8 mb-12">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Share this story</h3>
<div className="flex space-x-4">
<button
type="button"
onClick={() => {
const url = window.location.href;
window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, '_blank');
}}
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-medium transition-colors"
>
Share on Facebook
</button>
<button
type="button"
onClick={() => {
const url = window.location.href;
const text = `Check out this story: ${blog.title}`;
window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, '_blank');
}}
className="bg-blue-400 hover:bg-blue-500 text-white px-4 py-2 rounded font-medium transition-colors"
>
Share on Twitter
</button>
<button
type="button"
onClick={() => {
navigator.clipboard.writeText(window.location.href);
{/* Social Sharing */}
<div className="border-t border-gray-200 pt-8 mb-12">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Share this story</h3>
<div className="flex space-x-4">
<button
type="button"
onClick={() => {
const url = window.location.href;
window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, '_blank');
}}
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-medium transition-colors"
>
Share on Facebook
</button>
<button
type="button"
onClick={() => {
const url = window.location.href;
const text = `Check out this story: ${blog.title}`;
window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, '_blank');
}}
className="bg-blue-400 hover:bg-blue-500 text-white px-4 py-2 rounded font-medium transition-colors"
>
Share on Twitter
</button>
<button
type="button"
onClick={() => {
navigator.clipboard.writeText(window.location.href);
// You might want to show a toast notification here
}}
className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded font-medium transition-colors"
>
Copy Link
</button>
}}
className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded font-medium transition-colors"
>
Copy Link
</button>
</div>
</div>
</div>

{/* Related Articles */}
{relatedBlogs.length > 0 && (
<section className="border-t border-gray-200 pt-12">
<h3 className="text-2xl font-bold text-gray-900 mb-8">Related Stories</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{relatedBlogs.map((relatedBlog) => (
<Link
key={relatedBlog.id}
to={`/blog/${relatedBlog.id}`}
className="group"
>
<article className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<img
src={relatedBlog.cover_image}
alt={relatedBlog.title}
className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
/>
<div className="p-4">
<div className="flex items-center text-xs text-gray-500 mb-2">
<Calendar className="h-3 w-3 mr-1" />
{formatDate(relatedBlog.published_at)}
{/* Related Articles */}
{relatedBlogs.length > 0 && (
<section className="border-t border-gray-200 pt-12">
<h3 className="text-2xl font-bold text-gray-900 mb-8">Related Stories</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{relatedBlogs.map((relatedBlog) => (
<Link
key={relatedBlog.id}
to={`/blog/${relatedBlog.id}`}
className="group"
>
<article className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<img
src={relatedBlog.cover_image}
alt={relatedBlog.title}
className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
/>
<div className="p-4">
<div className="flex items-center text-xs text-gray-500 mb-2">
<Calendar className="h-3 w-3 mr-1" />
{formatDate(relatedBlog.published_at)}
</div>
<h4 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
{relatedBlog.title}
</h4>
<p className="text-gray-600 text-sm line-clamp-2">
{relatedBlog.content.replace(/<[^>]*>/g, '').substring(0, 100)}
...
</p>
</div>
<h4 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
{relatedBlog.title}
</h4>
<p className="text-gray-600 text-sm line-clamp-2">
{relatedBlog.content.replace(/<[^>]*>/g, '').substring(0, 100)}
...
</p>
</div>
</article>
</Link>
))}
</div>
</section>
)}
</article>
</Link>
))}
</div>
</section>
)}
</article>
</MaxWidthWrapper>
);
}
Expand Down
Loading
Loading