noham/gitprofile
1
0
Fork 0
mirror of https://github.com/NohamR/gitprofile.git synced 2026-05-25 12:27:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add section for external projects

Browse Source
This commit is contained in:
Ariful Alam
2023-01-03 17:09:10 +06:00
parent 984bee1fcf
commit 32740ede32
4 changed files with 116 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/components/external-project/index.jsx
View File

@@ -1,8 +1,6 @@
import { Fragment } from 'react';
import { AiOutlineLink } from 'react-icons/ai';
import PropTypes from 'prop-types';
import { skeleton } from '../../helpers/utils';
import { ga } from '../../helpers/utils';
import { ga, skeleton } from '../../helpers/utils';
import LazyImage from '../lazy-image';
const displaySection = (externalProjects) => {
@@ -19,44 +17,55 @@ const displaySection = (externalProjects) => {
const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
const renderSkeleton = () => {
return [
<div className="card shadow-lg compact bg-base-100" key="">
<div className="flex justify-between flex-col p-8 h-full w-full">
<div>
<div className="flex items-center">
<span>
<h5 className="card-title text-lg">
{skeleton({ width: 'w-32', height: 'h-8' })}
</h5>
</span>
</div>
<div className="mb-5 mt-1">
{skeleton({
width: 'w-full',
height: 'h-4',
className: 'mb-2',
})}
{skeleton({ width: 'w-full', height: 'h-4' })}
</div>
</div>
<div className="flex justify-between">
<div className="flex flex-grow">
<span className="mr-3 flex items-center">
{skeleton({ width: 'w-12', height: 'h-4' })}
</span>
<span className="flex items-center">
{skeleton({ width: 'w-12', height: 'h-4' })}
</span>
</div>
<div>
<span className="flex items-center">
{skeleton({ width: 'w-12', height: 'h-4' })}
</span>
let array = [];
for (let index = 0; index < externalProjects.length; index++) {
array.push(
<div className="card shadow-lg compact bg-base-100" key={index}>
<div className="p-8 h-full w-full">
<div className="flex items-center flex-col">
<div className="w-full">
<div className="flex items-start px-4">
<div className="w-full">
<h2>
{skeleton({
width: 'w-32',
height: 'h-8',
className: 'mb-2 mx-auto',
})}
</h2>
<div className="avatar w-full h-full">
<div className="w-20 h-20 mask mask-squircle mx-auto">
{skeleton({
width: 'w-full',
height: 'h-full',
shape: '',
})}
</div>
</div>
<div className="mt-2">
{skeleton({
width: 'w-full',
height: 'h-4',
className: 'mx-auto',
})}
</div>
<div className="mt-2 flex items-center flex-wrap justify-center">
{skeleton({
width: 'w-full',
height: 'h-4',
className: 'mx-auto',
})}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>,
];
);
}
return array;
};
const renderExternalProjects = () => {
@@ -85,31 +94,29 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
}}
>
<div className="p-8 h-full w-full">
<div className="flex items-center flex-col md:flex-row">
{item.imageUrl && (
<div className="avatar mb-5 md:mb-0 opacity-90">
<div className="w-24 h-24 mask mask-squircle">
<LazyImage
src={item.imageUrl}
alt={'thumbnail'}
placeholder={skeleton({
width: 'w-full',
height: 'h-full',
shape: '',
})}
/>
</div>
</div>
)}
<div className="flex items-center flex-col">
<div className="w-full">
<div className="flex items-start px-4">
<div className="text-center md:text-left w-full">
<h2 className="font-semibold text-base-content opacity-60">
<div className="flex flex-row items-center">
<AiOutlineLink className="mr-1" /> {item.title}
</div>
<div className="px-4">
<div className="text-center w-full">
<h2 className="font-semibold text-base-content opacity-60 mb-2">
{item.title}
</h2>
<p className="mt-3 text-base-content text-opacity-60 text-sm">
{item.imageUrl && (
<div className="avatar opacity-90">
<div className="w-20 h-20 mask mask-squircle">
<LazyImage
src={item.imageUrl}
alt={'thumbnail'}
placeholder={skeleton({
width: 'w-full',
height: 'h-full',
shape: '',
})}
/>
</div>
</div>
)}
<p className="mt-1 text-base-content text-opacity-60 text-sm">
{item.description}
</p>
</div>
@@ -132,10 +139,10 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
<div className="mx-3 flex items-center justify-between mb-2">
<h5 className="card-title">
{loading ? (
skeleton({ width: 'w-28', height: 'h-8' })
skeleton({ width: 'w-40', height: 'h-8' })
) : (
<span className="text-base-content opacity-70">
Other Projects
My Projects
</span>
)}
</h5>