Skip to content

Commit

Permalink
Merge pull request #356 from mbeps/development
Browse files Browse the repository at this point in the history 
Fixes
  • Loading branch information
@mbeps
mbeps authored Feb 6, 2024
2 parents be2aa6c + 47b617b commit 8a17840
Show file tree
Hide file tree
Showing 9 changed files with 232 additions and 214 deletions.
2 changes: 1 addition & 1 deletion app/(site)/components/AboutSection/AboutSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const AboutSection = () => {
Get to know me!
</h1>

<Reader content={blogContent} size="base" />
<Reader content={blogContent} />
</div>

{/* Right section */}
Expand Down
207 changes: 2 additions & 205 deletions app/(site)/components/AboutSection/LanguageSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,10 @@
"use client";

import isSkillAssociatedWithMaterial from "@/actions/material/isSkillAssociatedWithMaterial";
import filterSkillsByType from "@/actions/skills/filterSkillsByType";
import getAssociatedSkills from "@/actions/skills/getAssociatedSkills";
import groupSkills from "@/actions/skills/groupSkills";
import SkillTag from "@/components/Tags/SkillTag";
import Tag from "@/components/Tags/Tag";
import LanguageModal from "@/components/Modal/LanguageModal";
import HeadingThree from "@/components/Text/HeadingThree";
import HeadingTwo from "@/components/Text/HeadingTwo";
import { Button } from "@/components/shadcn/ui/button";
import {
Dialog,
DialogContent,
DialogTrigger,
} from "@/components/shadcn/ui/dialog";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/shadcn/ui/dropdown-menu";
import { ScrollArea } from "@/components/shadcn/ui/scroll-area";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/shadcn/ui/tooltip";
import blogs from "@/database/blogs";
import allCertificates from "@/database/certificates";
import allProjects from "@/database/projects";
import { languages } from "@/database/skills/languages";
import allSkills from "@/database/skills/skills";
import useIsMounted from "@/hooks/useIsMounted";
import FilterOption from "@/interfaces/filters/FilterOption";
import BlogInterface from "@/interfaces/material/BlogInterface";
import CertificateInterface from "@/interfaces/material/CertificateInterface";
import MaterialInterface from "@/interfaces/material/MaterialInterface";
import ProjectInterface from "@/interfaces/material/ProjectInterface";
import SkillInterface from "@/interfaces/skills/SkillInterface";
import Link from "next/link";
import React, { useState } from "react";
import { BsChevronDown } from "react-icons/bs";

/**
* Displays a list of languages that I know.
Expand Down Expand Up @@ -70,7 +34,7 @@ const LanguageSection: React.FC = () => {
<HeadingThree title="Languages" />
<div className="flex flex-wrap flex-row justify-center z-10 md:justify-start -mt-2">
{mainLanguages.map((languageData, idx) => (
<LanguageTagWithModal
<LanguageModal
key={idx}
language={languageData}
handleOpenModal={handleOpenModal}
Expand All @@ -84,170 +48,3 @@ const LanguageSection: React.FC = () => {
};

export default LanguageSection;

interface LanguageTagWithModalProps {
language: SkillInterface;
repository?: string;
handleOpenModal: () => void;
handleCloseModal: () => void;
isModalOpen: boolean;
}

/**
* Displays a tag for each language.
* If the language has skills or repositories, a modal is displayed when the tag is clicked.
* The modal displays the skills and repositories for the language.
* If the language does not have any skills or repositories, the modal cannot be opened.
*
* @param language (string): name of the language
* @param skills (Skill[]): list of skills for the language
* @param repositories (Repository[]): list of repositories for the language
* @returns (JSX.Element): language tag with modal (stack of the language
*/
const LanguageTagWithModal: React.FC<LanguageTagWithModalProps> = ({
language,
repository,
}) => {
const [isModalOpen, setIsModalOpen] = useState(false);

const languageSkills =
getAssociatedSkills(
filterSkillsByType(allSkills, "hard"),
language,
"hard",
) || [];

const handleOpenModal = () => {
setIsModalOpen(true);
};

const handleCloseModal = () => {
setIsModalOpen(false);
};

const shouldOpenModal = languageSkills && languageSkills.length > 0;

const [groupedBy, setGroupedBy] = useState("category");
// Adjusted filtering based on the merged skills field
const filteredSkills = (languageSkills || []).filter(
(skill) => skill.isMainSkill,
);
const groupedSkills = groupSkills(groupedBy, languageSkills || []);

const projects: ProjectInterface[] = allProjects;
const certificates: CertificateInterface[] = allCertificates;
const allBlogs: BlogInterface[] = blogs;
const allMaterial: MaterialInterface[] = [
...projects,
...certificates,
...allBlogs,
];

const hasMaterial = isSkillAssociatedWithMaterial(language, allMaterial);

const options: FilterOption[] = [
{ slug: "category", entryName: "Category" },
{ slug: "none", entryName: "None" },
];

const currentGroupedName =
options.find((option) => option.slug === groupedBy)?.entryName ||
"Category";

return (
<>
<Dialog>
<DialogTrigger>
<Tooltip>
<TooltipTrigger>
<Tag onClick={shouldOpenModal ? handleOpenModal : undefined}>
{language.name}
</Tag>
</TooltipTrigger>
<TooltipContent>
<p>{`View technologies related to ${language.name}`}</p>
</TooltipContent>
</Tooltip>
</DialogTrigger>
<DialogContent>
<div className="h-full w-full pt-6">
<HeadingTwo title={language.name} />
</div>
<ScrollArea className="h-full w-full">
<div className="px-6 pb-4">
{/* Grouping Dropdown */}
<div className="flex mt-4">
<div className="flex-grow mr-2 mt-2.5 text-right text-neutral-700 dark:text-neutral-300">
Group by:
</div>
<DropdownMenu>
<DropdownMenuTrigger className="w-48">
<Button variant="default" className="w-full">
<div className="flex items-start justify-between space-x-2 w-full">
<span>{currentGroupedName}</span>
<BsChevronDown
fontSize={16}
className="text-neutral-700 dark:text-neutral-200 mt-1"
/>
</div>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-48">
{options.map((option, index) => (
<DropdownMenuItem
key={index}
className={`${
option.slug === groupedBy ? "font-bold" : ""
}`}
onSelect={() => setGroupedBy(option.slug)}
>
{option.entryName}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>

{/* List of skills */}
<div className="space-y-1">
{groupedSkills.map((categoryData, index) => (
<div key={index} className="text-center md:text-left">
<HeadingThree title={categoryData.skillCategoryName} />
<div className="flex flex-wrap flex-row justify-center z-10 md:justify-start">
{categoryData.skills.map((skill, skillIndex) => (
<SkillTag key={skillIndex} skill={skill} />
))}
</div>
</div>
))}
</div>

{/* Links */}
{hasMaterial && (
<>
<div className="text-center md:text-left">
<HeadingThree title="Material" />
</div>
<div
className="
flex flex-wrap flex-col
text-center md:text-left
justify-start z-10 space-y-2"
>
<Link href={`/skills/${language.slug}`}>
<div className="w-full">
<Button variant="gradient" className="w-full">
{`All ${language.name} Material`}
</Button>
</div>
</Link>
</div>
</>
)}
</div>
</ScrollArea>
</DialogContent>
</Dialog>
</>
);
};
2 changes: 1 addition & 1 deletion app/blogs/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const BlogPage: React.FC<BlogPageProps> = ({ params }) => {
</p>
</div>

<Reader content={blogContent} />
<Reader content={blogContent} size="lg:prose-lg" />

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

Expand Down
10 changes: 6 additions & 4 deletions app/projects/[slug]/components/TabbedReader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,15 @@ const TabbedReader: React.FC<TabbedReaderProps> = ({ content }) => {
{/* Options */}
{hasFeatures && hasBlog && (
<div className="flex justify-center items-center">
<TabsList className="
<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="
Expand Down Expand Up @@ -106,11 +108,11 @@ const TabbedReader: React.FC<TabbedReaderProps> = ({ content }) => {
{/* Content */}
<TabsContent value="features">
<HeadingTwo title="Features" />
<Reader content={content.features} />
<Reader content={content.features} size="lg:prose-lg" />
</TabsContent>
<TabsContent value="reflection">
<HeadingTwo title="Reflection" />
<Reader content={content.blog} />
<Reader content={content.blog} size="lg:prose-lg" />
</TabsContent>
</Tabs>
</div>
Expand Down
1 change: 1 addition & 0 deletions components/Filters/FilterPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ const FilterOverlay: React.FC<FilterOverlayProps> = ({
bg-neutral-100 dark:bg-black
px-4 py-0
flex justify-between items-center
transition-all duration-700 ease-in-out
rounded-t-2xl
"
>
Expand Down
2 changes: 2 additions & 0 deletions components/Gallery/Gallery.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ const Gallery: React.FC<GalleryProps> = ({ images, videos }) => {
text-neutral-700 dark:text-neutral-200 text-md
rounded-full
transition-colors duration-700
px-6
"
>
<LiaImageSolid fontSize={20} />
Expand All @@ -160,6 +161,7 @@ const Gallery: React.FC<GalleryProps> = ({ images, videos }) => {
text-neutral-700 dark:text-neutral-200 text-md
rounded-full
transition-colors duration-700
px-6
"
>
<LiaVideoSolid fontSize={20} />
Expand Down
Loading

0 comments on commit 8a17840

Please sign in to comment.