Skip to content

Commit

Permalink
Merge pull request #353 from mbeps/development
Browse files Browse the repository at this point in the history 
UI Tweaks
  • Loading branch information
@mbeps
mbeps authored Feb 4, 2024
2 parents 631be80 + a17338b commit 19582cd
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 43 deletions.
6 changes: 3 additions & 3 deletions app/certificates/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,11 +134,11 @@ const CertificatesPage: React.FC<CertificatesPageProps> = ({ params }) => {

{/* Certificate Description */}
{certificate.description && (
<div className="flex flex-col gap-4">
<div className="flex flex-col">
<div className="md:text-left text-center">
<HeadingThree title="Description" />
</div>
<p className="text-lg">{certificate.description}</p>
<p className="text-lg text-neutral-800 dark:text-neutral-300">{certificate.description}</p>
</div>
)}

Expand All @@ -156,7 +156,7 @@ const CertificatesPage: React.FC<CertificatesPageProps> = ({ params }) => {
<div className="mr-2 mt-1.5">
<RxTriangleRight />
</div>
<div>{outcome}</div>
<div className="text-neutral-800 dark:text-neutral-300">{outcome}</div>
</li>
))}
</ul>
Expand Down
88 changes: 60 additions & 28 deletions app/projects/[slug]/components/TabbedReader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@
import Reader from "@/components/Reader/Reader";
import HeadingTwo from "@/components/Text/HeadingTwo";
import { Button } from "@/components/shadcn/ui/button";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/shadcn/ui/tabs";
import useIsMounted from "@/hooks/useIsMounted";
import React, { useEffect, useState } from "react";

Expand All @@ -28,21 +34,21 @@ const TabbedReader: React.FC<TabbedReaderProps> = ({ content }) => {
const hasFeatures = !!content.features;
const hasBlog = !!content.blog;
const isMounted = useIsMounted();
const [view, setView] = useState<"features" | "blog">("features");
const [view, setView] = useState<"features" | "reflection">("features");

useEffect(() => {
if (!hasFeatures && hasBlog) {
setView("blog");
// If there is no features, but there is a blog, set the view to "blog"
setView("reflection");
} else if (!hasBlog && hasFeatures) {
// If there is no blog, but there are features, set the view to "features"
setView("features");
} else if (!hasBlog && !hasFeatures) {
// If there are no features or blog, set the view to "none"
return;
}
}, [hasFeatures, hasBlog]);

const viewContent = view === "features" ? content.features : content.blog;
const title = view === "features" ? "Features" : "Reflection";

if (!isMounted) {
return null;
}
Expand All @@ -52,36 +58,62 @@ const TabbedReader: React.FC<TabbedReaderProps> = ({ content }) => {
}

return (
<>
<div className="border-b border-gray-200 dark:border-neutral-600 pb-2" />

<div className="w-full space-y-7">
<div
className="
flex flex-col items-center
border-t border-gray-200 dark:border-neutral-600
pt-8
"
>
<Tabs defaultValue={view} className="w-full space-y-6">
{/* Options */}
{hasFeatures && hasBlog && (
<div className="flex flex-row justify-center">
<div className="flex flex-row w-full md:w-1/2 space-x-2">
<Button
onClick={() => setView("features")}
variant={view === "features" ? "filled" : "ghost"}
size="sm"
className="w-full"
<div className="flex justify-center items-center">
<TabsList className="
rounded-full
w-full md:w-2/5
flex flex-row space-x-1
transition-colors duration-700
md:text-lg
">
<TabsTrigger
value="features"
className="
px-6 py-2
w-full
text-neutral-400 dark:text-neutral-200 text-md
rounded-full
transition-colors duration-700
"
>
Features
</Button>
<Button
onClick={() => setView("blog")}
variant={view === "blog" ? "filled" : "ghost"}
size="sm"
className="w-full"
</TabsTrigger>
<TabsTrigger
value="reflection"
className="
px-6
w-full
text-neutral-400 dark:text-neutral-200 text-md
rounded-full
transition-colors duration-700
"
>
Reflection
</Button>
</div>
</TabsTrigger>
</TabsList>
</div>
)}
<HeadingTwo title={title} />
<Reader content={viewContent} />
</div>
</>
{/* Content */}
<TabsContent value="features">
<HeadingTwo title="Features" />
<Reader content={content.features} />
</TabsContent>
<TabsContent value="reflection">
<HeadingTwo title="Reflection" />
<Reader content={content.blog} />
</TabsContent>
</Tabs>
</div>
);
};

Expand Down
2 changes: 1 addition & 1 deletion app/projects/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ params }) => {
<div className="text-center md:text-left">
<HeadingThree title="Description" />
<div className="flex flex-wrap justify-center md:justify-start z-10 mt-5">
<p>{projectDescription}</p>
<p className="text-neutral-800 dark:text-neutral-300">{projectDescription}</p>
</div>
</div>

Expand Down
21 changes: 11 additions & 10 deletions components/Gallery/Gallery.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const Gallery: React.FC<GalleryProps> = ({ images, videos }) => {
<TabsContent value="images" className="w-full">
<Carousel
setApi={setApi}
className="bg-neutral-100 dark:bg-neutral-950 rounded-xl"
className="bg-neutral-100 dark:bg-neutral-950 rounded-xl transition-colors duration-700"
>
<CarouselContent>
{Array.from({ length: images?.length ?? 0 }).map((_, index) => (
Expand All @@ -85,7 +85,6 @@ const Gallery: React.FC<GalleryProps> = ({ images, videos }) => {
w-full h-[60vh]
object-contain
rounded-xl
transition-colors duration-700
p-2"
/>
Expand Down Expand Up @@ -135,16 +134,17 @@ const Gallery: React.FC<GalleryProps> = ({ images, videos }) => {

{images && images.length > 0 && videos && videos.length > 0 && (
<div className="flex justify-center items-center">
<TabsList className="rounded-full">
<TabsList className="rounded-full flex flex-row space-x-1 transition-colors duration-700">
{/* Images */}
{images && images.length > 0 && (
<TabsTrigger
value="images"
className="
flex flex-row space-x-1
text-neutral-700 dark:text-neutral-200 text-md
rounded-full
"
flex flex-row space-x-2
text-neutral-700 dark:text-neutral-200 text-md
rounded-full
transition-colors duration-700
"
>
<LiaImageSolid fontSize={20} />
<span>Images</span>
Expand All @@ -156,9 +156,10 @@ const Gallery: React.FC<GalleryProps> = ({ images, videos }) => {
<TabsTrigger
value="demo"
className="
flex flex-row space-x-1
text-neutral-700 dark:text-neutral-200 text-md
rounded-full
flex flex-row space-x-2
text-neutral-700 dark:text-neutral-200 text-md
rounded-full
transition-colors duration-700
"
>
<LiaVideoSolid fontSize={20} />
Expand Down
3 changes: 2 additions & 1 deletion components/Reader/Reader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Reader: React.FC<ReaderProps> = ({ content, size = "lg" }) => {
<article
className={`
prose
lg:prose-${size}
${size && `lg:prose-${size}`}
dark:prose-invert
prose-img:rounded-lg
max-w-none
Expand All @@ -26,4 +26,5 @@ const Reader: React.FC<ReaderProps> = ({ content, size = "lg" }) => {
</article>
);
};

export default Reader;

0 comments on commit 19582cd

Please sign in to comment.