Initial commit
This commit is contained in:
commit
78f8d225ee
21173 changed files with 2907774 additions and 0 deletions
153
app/projects/[id]/page.tsx
Normal file
153
app/projects/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
export default function ProjectDetailPage() {
|
||||
const { id } = useParams();
|
||||
const [project, setProject] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
const url = new URL(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/projects/${id}`);
|
||||
url.searchParams.set(
|
||||
"fields",
|
||||
"submission_id,title,uploader,category,tags,p_image.filename_disk,p_image.title,p_files.directus_files_id.filename_disk"
|
||||
);
|
||||
url.searchParams.set("limit", "1");
|
||||
|
||||
fetch(url.toString())
|
||||
.then((res) => res.json())
|
||||
.then((data) => setProject(data.data))
|
||||
.catch(() => setProject(null));
|
||||
}, [id]);
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<div className="p-6 max-w-5xl mx-auto">
|
||||
<div className="mb-4">
|
||||
<Link href="/projects" className="text-accent underline">
|
||||
← Back to Projects
|
||||
</Link>
|
||||
</div>
|
||||
<p className="text-muted-foreground">Loading project…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const imageSrc = project.p_image?.filename_disk
|
||||
? `${process.env.NEXT_PUBLIC_ASSET_URL || "https://forms.lasereverything.net"}/assets/${project.p_image.filename_disk}`
|
||||
: null;
|
||||
|
||||
const fileList: string[] = Array.isArray(project.p_files)
|
||||
? project.p_files
|
||||
.map((f: any) => f?.directus_files_id?.filename_disk)
|
||||
.filter(Boolean)
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-5xl mx-auto">
|
||||
<style jsx global>{`
|
||||
.file-pill {
|
||||
display: inline-block;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--muted);
|
||||
color: var(--foreground);
|
||||
border-radius: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
.file-pill:hover {
|
||||
background-color: #ffde59;
|
||||
color: #000;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="mb-4">
|
||||
<Link href="/projects" className="text-accent underline">
|
||||
← Back to Projects
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="md:col-span-1">
|
||||
<div className="border rounded overflow-hidden bg-card">
|
||||
{imageSrc ? (
|
||||
<Image
|
||||
src={imageSrc}
|
||||
alt={project.p_image?.title || "Project image"}
|
||||
width={800}
|
||||
height={800}
|
||||
className="w-full h-auto object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="p-6 text-sm text-muted-foreground">No preview image</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<h3 className="text-sm font-semibold mb-2">Files</h3>
|
||||
{fileList.length > 0 ? (
|
||||
<div className="flex flex-wrap">
|
||||
{fileList.map((fname, i) => (
|
||||
<a
|
||||
key={i}
|
||||
className="file-pill"
|
||||
href={`${process.env.NEXT_PUBLIC_ASSET_URL || "https://forms.lasereverything.net"}/assets/${fname}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={fname}
|
||||
>
|
||||
{fname}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">No files attached.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<h1 className="text-2xl font-bold mb-2">{project.title}</h1>
|
||||
<p className="text-sm text-muted-foreground mb-1">
|
||||
Uploaded by: {project.uploader || "—"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
Category: {project.category || "—"}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{Array.isArray(project.tags) && project.tags.length > 0 ? (
|
||||
project.tags.map((tag, i) => (
|
||||
<a
|
||||
key={i}
|
||||
href={`/projects?query=${encodeURIComponent(tag)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs bg-muted text-foreground rounded px-2 py-0.5 hover:bg-accent hover:text-background transition-colors"
|
||||
title={`Search for ${tag}`}
|
||||
>
|
||||
{tag}
|
||||
</a>
|
||||
))
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">No tags</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Optional long description if you add one later */}
|
||||
{project.body ? (
|
||||
<div className="prose dark:prose-invert mt-6">
|
||||
<ReactMarkdown>{project.body}</ReactMarkdown>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
4
app/projects/layout.tsx
Normal file
4
app/projects/layout.tsx
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import { Suspense } from "react";
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return <Suspense fallback={null}>{children}</Suspense>;
|
||||
}
|
||||
274
app/projects/page.tsx
Normal file
274
app/projects/page.tsx
Normal file
|
|
@ -0,0 +1,274 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState, useMemo } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const searchParams = useSearchParams();
|
||||
const initialQuery = searchParams.get("query") || "";
|
||||
|
||||
const [query, setQuery] = useState(initialQuery);
|
||||
const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
|
||||
const [projects, setProjects] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [categories] = useState([
|
||||
"assets",
|
||||
"documents",
|
||||
"fixtures",
|
||||
"projects",
|
||||
"templates",
|
||||
"test files",
|
||||
"tools"
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setDebouncedQuery(query), 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [query]);
|
||||
|
||||
useEffect(() => {
|
||||
const url = new URL(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/projects`);
|
||||
url.searchParams.set("fields", "submission_id,title,uploader,category,tags,p_image.filename_disk,p_image.title");
|
||||
url.searchParams.set("limit", "-1");
|
||||
|
||||
fetch(url.toString(), { cache: "no-store" })
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
setProjects(data.data || []);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const highlight = (text: string) => {
|
||||
if (!debouncedQuery) return text;
|
||||
const regex = new RegExp(`(${debouncedQuery})`, "gi");
|
||||
return text?.replace(regex, '<mark>$1</mark>');
|
||||
};
|
||||
|
||||
const normalize = (str: string) => str?.toLowerCase().replace(/[_\s]/g, "");
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = normalize(debouncedQuery);
|
||||
return projects.filter((entry) => {
|
||||
const fieldsToSearch = [
|
||||
entry.title ?? "",
|
||||
entry.uploader ?? "",
|
||||
entry.category ?? "",
|
||||
Array.isArray(entry.tags) ? entry.tags.join(" ") : "",
|
||||
];
|
||||
return fieldsToSearch.filter(Boolean).some((field) =>
|
||||
normalize(field).includes(q)
|
||||
);
|
||||
});
|
||||
}, [projects, debouncedQuery]);
|
||||
|
||||
const tagCounts = useMemo(() => {
|
||||
const counts: Record<string, number> = {};
|
||||
projects.forEach((p) => {
|
||||
if (Array.isArray(p.tags)) {
|
||||
p.tags.forEach((tag) => {
|
||||
counts[tag] = (counts[tag] || 0) + 1;
|
||||
});
|
||||
}
|
||||
});
|
||||
return counts;
|
||||
}, [projects]);
|
||||
|
||||
const popularTags = Object.entries(tagCounts)
|
||||
.sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))
|
||||
.slice(0, 10)
|
||||
.map(([tag]) => tag);
|
||||
|
||||
const recentTags = [...projects]
|
||||
.sort((a, b) => b.submission_id - a.submission_id)
|
||||
.slice(0, 10)
|
||||
.flatMap((p) => p.tags || [])
|
||||
.filter((tag, i, self) => self.indexOf(tag) === i)
|
||||
.slice(0, 10);
|
||||
|
||||
const uniqueUploaders = new Set(projects.map((p) => p.uploader).filter(Boolean)).size;
|
||||
const totalTags = Object.keys(tagCounts).length;
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
<style jsx global>{`
|
||||
mark {
|
||||
background: #ffde59;
|
||||
color: #242424;
|
||||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
.project-card {
|
||||
display: flex;
|
||||
background-color: #242424;
|
||||
color: var(--card-foreground);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
height: 150px;
|
||||
}
|
||||
.project-image {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.project-content {
|
||||
padding: 0.75rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.project-tags {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.project-tags span,
|
||||
.flex.flex-wrap span {
|
||||
display: inline-block;
|
||||
margin-right: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--muted);
|
||||
color: var(--foreground);
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.7rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
.project-tags span:hover,
|
||||
.flex.flex-wrap span:hover {
|
||||
background-color: #ffde59;
|
||||
color: #000;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
|
||||
<div className="card bg-card text-card-foreground p-4">
|
||||
<h1 className="text-xl font-bold mb-2">Community Projects</h1>
|
||||
<input
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search projects..."
|
||||
className="w-full dark:bg-background border border-border rounded-md p-2"
|
||||
/>
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-block mt-4 px-4 py-2 bg-accent text-background rounded-md text-sm"
|
||||
>
|
||||
← Back to Main Menu
|
||||
</Link>
|
||||
</div>
|
||||
<div className="card bg-card text-card-foreground p-4">
|
||||
<h2 className="text-md font-semibold mb-2">Popular Tags</h2>
|
||||
{popularTags.length > 0 ? (
|
||||
<div className="flex flex-wrap">
|
||||
{popularTags.map((tag, i) => (
|
||||
<span key={i} onClick={() => setQuery(tag)} title={tag}>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">No tags yet.</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="card bg-card text-card-foreground p-4">
|
||||
<h2 className="text-md font-semibold mb-2">Recent Tags</h2>
|
||||
{recentTags.length > 0 ? (
|
||||
<div className="flex flex-wrap">
|
||||
{recentTags.map((tag, i) => (
|
||||
<span key={i} onClick={() => setQuery(tag)} title={tag}>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">No recent tags.</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="card bg-card text-card-foreground p-4">
|
||||
<h2 className="text-md font-semibold mb-2">Project Stats</h2>
|
||||
<p className="text-sm text-muted-foreground">Total Projects: {projects.length}</p>
|
||||
<p className="text-sm text-muted-foreground">Unique Uploaders: {uniqueUploaders}</p>
|
||||
<p className="text-sm text-muted-foreground">Total Tags: {totalTags}</p>
|
||||
</div>
|
||||
<div className="card bg-card text-card-foreground p-4">
|
||||
<h2 className="text-md font-semibold mb-2">Browse by Category</h2>
|
||||
<div className="flex flex-wrap">
|
||||
{categories.map((cat, i) => (
|
||||
<span key={i} onClick={() => setQuery(cat)}>
|
||||
{cat === "test_files" ? "test files" : cat}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<h2 className="text-md font-semibold mb-2">Submit a Project</h2>
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
Have a cool design, tool, or jig to share? Submit it to the community database.
|
||||
</p>
|
||||
</div>
|
||||
<button disabled className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed">
|
||||
Coming Soon
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="my-8 border-border" />
|
||||
|
||||
{loading ? (
|
||||
<p className="text-muted">Loading projects...</p>
|
||||
) : filtered.length === 0 ? (
|
||||
<p className="text-muted">No projects found.</p>
|
||||
) : (
|
||||
<div className="card-grid">
|
||||
{filtered.map((project) => (
|
||||
<div key={project.submission_id} className="project-card">
|
||||
<Image
|
||||
src={`https://forms.lasereverything.net/assets/${project.p_image?.filename_disk}`}
|
||||
alt={project.p_image?.title || "Project image"}
|
||||
width={150}
|
||||
height={150}
|
||||
className="project-image"
|
||||
/>
|
||||
<div className="project-content">
|
||||
<div>
|
||||
<Link href={`/projects/${project.submission_id}`} className="text-base font-semibold text-accent underline">
|
||||
{project.title || "Untitled"}
|
||||
</Link>
|
||||
<p className="text-xs text-muted-foreground">Uploaded by: {project.uploader || "—"}</p>
|
||||
<p className="text-xs text-muted-foreground">Category: {project.category || "—"}</p>
|
||||
</div>
|
||||
<div className="project-tags">
|
||||
{Array.isArray(project.tags) && project.tags.length > 0
|
||||
? project.tags.map((tag, i) => (
|
||||
<span
|
||||
key={i}
|
||||
onClick={() => setQuery(tag)}
|
||||
title={tag}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
273
app/projects/page.tsx.bak
Normal file
273
app/projects/page.tsx.bak
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState, useMemo } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const searchParams = useSearchParams();
|
||||
const initialQuery = searchParams.get("query") || "";
|
||||
|
||||
const [query, setQuery] = useState(initialQuery);
|
||||
const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
|
||||
const [projects, setProjects] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [categories] = useState([
|
||||
"assets",
|
||||
"documents",
|
||||
"fixtures",
|
||||
"projects",
|
||||
"templates",
|
||||
"test files",
|
||||
"tools"
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setDebouncedQuery(query), 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [query]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/projects?fields=submission_id,title,uploader,category,tags,p_image.filename_disk,p_image.title&limit=-1fields=*.*`
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
setProjects(data.data || []);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const highlight = (text: string) => {
|
||||
if (!debouncedQuery) return text;
|
||||
const regex = new RegExp(`(${debouncedQuery})`, "gi");
|
||||
return text?.replace(regex, '<mark>$1</mark>');
|
||||
};
|
||||
|
||||
const normalize = (str: string) => str?.toLowerCase().replace(/[_\s]/g, "");
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = normalize(debouncedQuery);
|
||||
return projects.filter((entry) => {
|
||||
const fieldsToSearch = [
|
||||
entry.title ?? "",
|
||||
entry.uploader ?? "",
|
||||
entry.category ?? "",
|
||||
Array.isArray(entry.tags) ? entry.tags.join(" ") : "",
|
||||
];
|
||||
return fieldsToSearch.filter(Boolean).some((field) =>
|
||||
normalize(field).includes(q)
|
||||
);
|
||||
});
|
||||
}, [projects, debouncedQuery]);
|
||||
|
||||
const tagCounts = useMemo(() => {
|
||||
const counts: Record<string, number> = {};
|
||||
projects.forEach((p) => {
|
||||
if (Array.isArray(p.tags)) {
|
||||
p.tags.forEach((tag) => {
|
||||
counts[tag] = (counts[tag] || 0) + 1;
|
||||
});
|
||||
}
|
||||
});
|
||||
return counts;
|
||||
}, [projects]);
|
||||
|
||||
const popularTags = Object.entries(tagCounts)
|
||||
.sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))
|
||||
.slice(0, 10)
|
||||
.map(([tag]) => tag);
|
||||
|
||||
const recentTags = [...projects]
|
||||
.sort((a, b) => b.submission_id - a.submission_id)
|
||||
.slice(0, 10)
|
||||
.flatMap((p) => p.tags || [])
|
||||
.filter((tag, i, self) => self.indexOf(tag) === i)
|
||||
.slice(0, 10);
|
||||
|
||||
const uniqueUploaders = new Set(projects.map((p) => p.uploader).filter(Boolean)).size;
|
||||
const totalTags = Object.keys(tagCounts).length;
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
<style jsx global>{`
|
||||
mark {
|
||||
background: #ffde59;
|
||||
color: #242424;
|
||||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
.project-card {
|
||||
display: flex;
|
||||
background-color: #242424;
|
||||
color: var(--card-foreground);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
height: 150px;
|
||||
}
|
||||
.project-image {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.project-content {
|
||||
padding: 0.75rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.project-tags {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.project-tags span,
|
||||
.flex.flex-wrap span {
|
||||
display: inline-block;
|
||||
margin-right: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--muted);
|
||||
color: var(--foreground);
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.7rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
.project-tags span:hover,
|
||||
.flex.flex-wrap span:hover {
|
||||
background-color: #ffde59;
|
||||
color: #000;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
|
||||
<div className="card bg-card text-card-foreground p-4">
|
||||
<h1 className="text-xl font-bold mb-2">Community Projects</h1>
|
||||
<input
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search projects..."
|
||||
className="w-full dark:bg-background border border-border rounded-md p-2"
|
||||
/>
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-block mt-4 px-4 py-2 bg-accent text-background rounded-md text-sm"
|
||||
>
|
||||
← Back to Main Menu
|
||||
</Link>
|
||||
</div>
|
||||
<div className="card bg-card text-card-foreground p-4">
|
||||
<h2 className="text-md font-semibold mb-2">Popular Tags</h2>
|
||||
{popularTags.length > 0 ? (
|
||||
<div className="flex flex-wrap">
|
||||
{popularTags.map((tag, i) => (
|
||||
<span key={i} onClick={() => setQuery(tag)} title={tag}>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">No tags yet.</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="card bg-card text-card-foreground p-4">
|
||||
<h2 className="text-md font-semibold mb-2">Recent Tags</h2>
|
||||
{recentTags.length > 0 ? (
|
||||
<div className="flex flex-wrap">
|
||||
{recentTags.map((tag, i) => (
|
||||
<span key={i} onClick={() => setQuery(tag)} title={tag}>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">No recent tags.</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="card bg-card text-card-foreground p-4">
|
||||
<h2 className="text-md font-semibold mb-2">Project Stats</h2>
|
||||
<p className="text-sm text-muted-foreground">Total Projects: {projects.length}</p>
|
||||
<p className="text-sm text-muted-foreground">Unique Uploaders: {uniqueUploaders}</p>
|
||||
<p className="text-sm text-muted-foreground">Total Tags: {totalTags}</p>
|
||||
</div>
|
||||
<div className="card bg-card text-card-foreground p-4">
|
||||
<h2 className="text-md font-semibold mb-2">Browse by Category</h2>
|
||||
<div className="flex flex-wrap">
|
||||
{categories.map((cat, i) => (
|
||||
<span key={i} onClick={() => setQuery(cat)}>
|
||||
{cat === "test_files" ? "test files" : cat}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<h2 className="text-md font-semibold mb-2">Submit a Project</h2>
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
Have a cool design, tool, or jig to share? Submit it to the community database.
|
||||
</p>
|
||||
</div>
|
||||
<button disabled className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed">
|
||||
Coming Soon
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="my-8 border-border" />
|
||||
|
||||
{loading ? (
|
||||
<p className="text-muted">Loading projects...</p>
|
||||
) : filtered.length === 0 ? (
|
||||
<p className="text-muted">No projects found.</p>
|
||||
) : (
|
||||
<div className="card-grid">
|
||||
{filtered.map((project) => (
|
||||
<div key={project.submission_id} className="project-card">
|
||||
<Image
|
||||
src={`https://forms.lasereverything.net/assets/${project.p_image?.filename_disk}`}
|
||||
alt={project.p_image?.title || "Project image"}
|
||||
width={150}
|
||||
height={150}
|
||||
className="project-image"
|
||||
/>
|
||||
<div className="project-content">
|
||||
<div>
|
||||
<Link href={`/projects/${project.submission_id}`} className="text-base font-semibold text-accent underline">
|
||||
{project.title || "Untitled"}
|
||||
</Link>
|
||||
<p className="text-xs text-muted-foreground">Uploaded by: {project.uploader || "—"}</p>
|
||||
<p className="text-xs text-muted-foreground">Category: {project.category || "—"}</p>
|
||||
</div>
|
||||
<div className="project-tags">
|
||||
{Array.isArray(project.tags) && project.tags.length > 0
|
||||
? project.tags.map((tag, i) => (
|
||||
<span
|
||||
key={i}
|
||||
onClick={() => setQuery(tag)}
|
||||
title={tag}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue