Clean commit for showcases with image possibility
This commit is contained in:
Michel Doré
Ariful Alam
parent
9382fcd1cd
commit
422e0ba12f
@ -82,6 +82,22 @@ const config = {
|
||||
to: '2014',
|
||||
},
|
||||
],
|
||||
showcases: [
|
||||
{
|
||||
name: 'Website name 1',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
|
||||
// image_url: 'https://via.placeholder.com/250x250',
|
||||
html_url: 'https://example.com',
|
||||
},
|
||||
{
|
||||
name: 'Website name 2',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
|
||||
image_url: 'https://via.placeholder.com/250x250',
|
||||
html_url: 'https://example.com',
|
||||
},
|
||||
],
|
||||
// Display blog posts from your medium or dev account. (Optional)
|
||||
blog: {
|
||||
source: 'dev', // medium | dev
|
||||
|
||||
@ -9,6 +9,7 @@ import Skill from './skill';
|
||||
import Experience from './experience';
|
||||
import Certification from './certification';
|
||||
import Education from './education';
|
||||
import Showcase from './showcase';
|
||||
import Project from './project';
|
||||
import Blog from './blog';
|
||||
import {
|
||||
@ -196,6 +197,12 @@ const GitProfile = ({ config }) => {
|
||||
</div>
|
||||
<div className="lg:col-span-2 col-span-1">
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<Showcase
|
||||
loading={loading}
|
||||
cases={sanitizedConfig.showcases}
|
||||
github={sanitizedConfig.github}
|
||||
googleAnalytics={sanitizedConfig.googleAnalytics}
|
||||
/>
|
||||
<Project
|
||||
repo={repo}
|
||||
loading={loading}
|
||||
@ -269,6 +276,7 @@ GitProfile.propTypes = {
|
||||
email: PropTypes.string,
|
||||
}),
|
||||
skills: PropTypes.array,
|
||||
showcases: PropTypes.array,
|
||||
experiences: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
company: PropTypes.string,
|
||||
|
||||
146
src/components/showcase/index.jsx
Normal file
146
src/components/showcase/index.jsx
Normal file
@ -0,0 +1,146 @@
|
||||
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';
|
||||
|
||||
const Showcase = ({ cases, loading, github, googleAnalytics }) => {
|
||||
const renderSkeleton = () => {
|
||||
let array = [];
|
||||
for (let index = 0; index < github.limit; index++) {
|
||||
array.push(
|
||||
<div className="card shadow-lg compact bg-base-100" key={index}>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return array;
|
||||
};
|
||||
|
||||
const renderShowcases = () => {
|
||||
return cases.map((item, index) => (
|
||||
<a
|
||||
className="card shadow-lg compact bg-base-100 cursor-pointer"
|
||||
href={item.html_url}
|
||||
key={index}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
if (googleAnalytics?.id) {
|
||||
ga.event({
|
||||
action: 'Click showcase',
|
||||
params: {
|
||||
project: item.name,
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
window?.open(item.html_url, '_blank');
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-between flex-col p-8 h-full w-full">
|
||||
<div>
|
||||
<div className="flex items-center opacity-60">
|
||||
<AiOutlineLink className="mr-2" />
|
||||
<span>
|
||||
<h5 className="card-title text-lg text-base-content">
|
||||
{item.name}
|
||||
</h5>
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1 flex flex-col md:flex-row">
|
||||
{item?.image_url && (
|
||||
<div className="flex flex-col md:mr-5">
|
||||
<img src={item.image_url} alt={item.name} />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col">
|
||||
<p className="mt-1 text-base-content text-opacity-60 text-sm">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
));
|
||||
};
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="col-span-1 lg:col-span-2">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="col-span-2">
|
||||
<div className="card compact bg-gradient-to-br to-base-200 from-base-100 shadow">
|
||||
<div className="card-body">
|
||||
<div className="mx-3 flex items-center justify-between mb-2">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ width: 'w-28', height: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
My Showcases
|
||||
</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{loading || !cases ? renderSkeleton() : renderShowcases()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
Showcase.propTypes = {
|
||||
cases: PropTypes.array,
|
||||
loading: PropTypes.bool.isRequired,
|
||||
github: PropTypes.object.isRequired,
|
||||
googleAnalytics: PropTypes.object,
|
||||
};
|
||||
|
||||
export default Showcase;
|
||||
@ -162,6 +162,7 @@ export const sanitizeConfig = (config) => {
|
||||
fileUrl: config?.resume?.fileUrl || '',
|
||||
},
|
||||
skills: config?.skills || [],
|
||||
showcases: config?.showcases || [],
|
||||
experiences: config?.experiences || [],
|
||||
certifications: config?.certifications || [],
|
||||
education: config?.education || [],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user