Skip to content

feat: add UI components for table, tabs, textarea, toast, and toggle elements #3

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
Ndevu12 merged 1 commit into from
Jan 27, 2026
Merged

feat: add UI components for table, tabs, textarea, toast, and toggle elements #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
40 changes: 26 additions & 14 deletions app/auth/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,34 @@
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Mail, Lock, ArrowRight } from "lucide-react"
import Link from "next/link"
import { Card } from "@/src/components/ui/card";
import { Button } from "@/src/components/ui/button";
import { Mail, Lock, ArrowRight } from "lucide-react";
import Link from "next/link";

export const metadata = {
title: "Sign In | Django Rwanda Community",
description: "Sign in to your Django Rwanda Community account",
}
};

export default function LoginPage() {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<div className="min-h-screen flex items-center justify-center">
<div className="mx-auto w-full max-w-md px-4">
<div className="mb-8 text-center">
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-accent text-primary-foreground font-bold text-lg">
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary-light text-primary-foreground font-bold text-lg">
D
</div>
<h1 className="text-3xl font-bold text-foreground">Welcome Back</h1>
<p className="mt-2 text-foreground/60">Sign in to your Django Rwanda Community account</p>
<p className="mt-2 text-foreground/60">
Sign in to your Django Rwanda Community account
</p>
</div>

<Card className="border border-border/50 p-8 bg-gradient-to-br from-background to-muted/50">
<form className="space-y-4">
{/* Email */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">Email Address</label>
<label className="mb-2 block text-sm font-medium text-foreground">
Email Address
</label>
<div className="relative">
<Mail className="absolute left-3 top-3 h-5 w-5 text-foreground/40" />
<input
Expand All @@ -37,7 +41,9 @@ export default function LoginPage() {

{/* Password */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">Password</label>
<label className="mb-2 block text-sm font-medium text-foreground">
Password
</label>
<div className="relative">
<Lock className="absolute left-3 top-3 h-5 w-5 text-foreground/40" />
<input
Expand All @@ -51,7 +57,10 @@ export default function LoginPage() {
{/* Remember me & Forgot password */}
<div className="flex items-center justify-between text-sm">
<label className="flex items-center gap-2 text-foreground/60">
<input type="checkbox" className="rounded border border-border" />
<input
type="checkbox"
className="rounded border border-border"
/>
Remember me
</label>
<Link href="#" className="text-primary hover:text-primary/80">
Expand All @@ -60,7 +69,7 @@ export default function LoginPage() {
</div>

{/* Submit */}
<Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 py-2">
<Button variant="gradient" className="w-full py-2">
Sign In
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
Expand All @@ -87,11 +96,14 @@ export default function LoginPage() {
{/* Sign up link */}
<p className="mt-6 text-center text-sm text-foreground/60">
Don&apos;t have an account?{" "}
<Link href="/auth/signup" className="font-medium text-primary hover:text-primary/80">
<Link
href="/auth/signup"
className="font-medium text-primary hover:text-primary/80"
>
Sign up here
</Link>
</p>
</div>
</div>
)
);
}
86 changes: 62 additions & 24 deletions app/auth/signup/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,36 @@
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { User, Mail, Lock, Zap } from "lucide-react"
import Link from "next/link"
import { Card } from "@/src/components/ui/card";
import { Button } from "@/src/components/ui/button";
import { User, Mail, Lock, Zap } from "lucide-react";
import Link from "next/link";

export const metadata = {
title: "Sign Up | Django Rwanda Community",
description: "Create your Django Rwanda Community account",
}
};

export default function SignupPage() {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<div className="min-h-screen flex items-center justify-center">
<div className="mx-auto w-full max-w-md px-4">
<div className="mb-8 text-center">
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-accent text-primary-foreground font-bold text-lg">
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary-light text-primary-foreground font-bold text-lg">
D
</div>
<h1 className="text-3xl font-bold text-foreground">Join Django Rwanda</h1>
<p className="mt-2 text-foreground/60">Create your account and start your journey</p>
<h1 className="text-3xl font-bold text-foreground">
Join Django Rwanda
</h1>
<p className="mt-2 text-foreground/60">
Create your account and start your journey
</p>
</div>

<Card className="border border-border/50 p-8 bg-gradient-to-br from-background to-muted/50">
<form className="space-y-4">
{/* Full Name */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">Full Name</label>
<label className="mb-2 block text-sm font-medium text-foreground">
Full Name
</label>
<div className="relative">
<User className="absolute left-3 top-3 h-5 w-5 text-foreground/40" />
<input
Expand All @@ -37,7 +43,9 @@ export default function SignupPage() {

{/* Email */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">Email Address</label>
<label className="mb-2 block text-sm font-medium text-foreground">
Email Address
</label>
<div className="relative">
<Mail className="absolute left-3 top-3 h-5 w-5 text-foreground/40" />
<input
Expand All @@ -50,7 +58,9 @@ export default function SignupPage() {

{/* Password */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">Password</label>
<label className="mb-2 block text-sm font-medium text-foreground">
Password
</label>
<div className="relative">
<Lock className="absolute left-3 top-3 h-5 w-5 text-foreground/40" />
<input
Expand All @@ -63,7 +73,9 @@ export default function SignupPage() {

{/* Confirm Password */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">Confirm Password</label>
<label className="mb-2 block text-sm font-medium text-foreground">
Confirm Password
</label>
<div className="relative">
<Lock className="absolute left-3 top-3 h-5 w-5 text-foreground/40" />
<input
Expand All @@ -76,44 +88,67 @@ export default function SignupPage() {

{/* Interests */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">What interests you?</label>
<label className="mb-2 block text-sm font-medium text-foreground">
What interests you?
</label>
<div className="space-y-2">
<label className="flex items-center gap-2 text-foreground/60">
<input type="checkbox" className="rounded border border-border" />
<input
type="checkbox"
className="rounded border border-border"
/>
Learning Django
</label>
<label className="flex items-center gap-2 text-foreground/60">
<input type="checkbox" className="rounded border border-border" />
<input
type="checkbox"
className="rounded border border-border"
/>
Contributing to open source
</label>
<label className="flex items-center gap-2 text-foreground/60">
<input type="checkbox" className="rounded border border-border" />
<input
type="checkbox"
className="rounded border border-border"
/>
Networking with developers
</label>
<label className="flex items-center gap-2 text-foreground/60">
<input type="checkbox" className="rounded border border-border" />
<input
type="checkbox"
className="rounded border border-border"
/>
Starting a startup
</label>
</div>
</div>

{/* Terms agreement */}
<label className="flex items-start gap-2 text-sm text-foreground/60">
<input type="checkbox" className="mt-1 rounded border border-border" />
<input
type="checkbox"
className="mt-1 rounded border border-border"
/>
<span>
I agree to the{" "}
<Link href="/terms" className="text-primary hover:text-primary/80">
<Link
href="/terms"
className="text-primary hover:text-primary/80"
>
Terms of Service
</Link>{" "}
and{" "}
<Link href="/privacy" className="text-primary hover:text-primary/80">
<Link
href="/privacy"
className="text-primary hover:text-primary/80"
>
Privacy Policy
</Link>
</span>
</label>

{/* Submit */}
<Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 py-2">
<Button variant="gradient" className="w-full py-2">
Create Account
<Zap className="ml-2 h-4 w-4" />
</Button>
Expand All @@ -140,11 +175,14 @@ export default function SignupPage() {
{/* Sign in link */}
<p className="mt-6 text-center text-sm text-foreground/60">
Already have an account?{" "}
<Link href="/auth/login" className="font-medium text-primary hover:text-primary/80">
<Link
href="/auth/login"
className="font-medium text-primary hover:text-primary/80"
>
Sign in here
</Link>
</p>
</div>
</div>
)
);
}
29 changes: 19 additions & 10 deletions app/community/code-of-conduct/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { Card } from "@/components/ui/card"
import Link from "next/link"
import { Card } from "@/src/components/ui/card";
import Link from "next/link";

export const metadata = {
title: "Code of Conduct | Django Rwanda Community",
description: "Our community values and principles",
}
};

const sections = [
{
Expand Down Expand Up @@ -32,17 +32,22 @@ const sections = [
content:
"Violations of this code of conduct will be taken seriously and may result in temporary or permanent removal from the community. Reports should be sent to conduct@djangorwanda.dev.",
},
]
];

export default function CodeOfConductPage() {
return (
<div className="min-h-screen bg-background">
<div className="min-h-screen">
<section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
<div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
<Link href="/community" className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4">
<Link
href="/community"
className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4"
>
← Back to Community
</Link>
<h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">Code of Conduct</h1>
<h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
Code of Conduct
</h1>
<p className="text-lg text-foreground/70">
Our values and principles for a respectful and inclusive community.
</p>
Expand All @@ -54,8 +59,12 @@ export default function CodeOfConductPage() {
<div className="space-y-8">
{sections.map((section, idx) => (
<Card key={idx} className="border border-border/50 p-8">
<h2 className="mb-4 text-2xl font-bold text-foreground">{section.title}</h2>
{section.content && <p className="text-foreground/70 mb-4">{section.content}</p>}
<h2 className="mb-4 text-2xl font-bold text-foreground">
{section.title}
</h2>
{section.content && (
<p className="text-foreground/70 mb-4">{section.content}</p>
)}
{section.items && (
<ul className="space-y-2">
{section.items.map((item, i) => (
Expand All @@ -72,5 +81,5 @@ export default function CodeOfConductPage() {
</div>
</section>
</div>
)
);
}
Loading
Loading