aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/ProjectSummary
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/ProjectSummary')
-rw-r--r--src/components/ProjectSummary/ProjectSummary.module.scss73
-rw-r--r--src/components/ProjectSummary/ProjectSummary.tsx178
2 files changed, 0 insertions, 251 deletions
diff --git a/src/components/ProjectSummary/ProjectSummary.module.scss b/src/components/ProjectSummary/ProjectSummary.module.scss
deleted file mode 100644
index cf1e77f..0000000
--- a/src/components/ProjectSummary/ProjectSummary.module.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
- margin-bottom: var(--spacing-md);
- padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
- border: fun.convert-px(1) solid var(--color-border);
-}
-
-.cover {
- height: fun.convert-px(150);
- position: relative;
-}
-
-.info {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
- align-items: start;
- justify-content: left;
- column-gap: var(--spacing-md);
- margin: var(--spacing-md) 0 0;
-}
-
-.inline-data {
- display: inline-block;
- margin-top: fun.convert-px(3);
-
- &:not(:last-of-type) {
- margin-right: var(--spacing-xs);
- }
-}
-
-.techno {
- padding: 0 var(--spacing-2xs);
- border: fun.convert-px(1) solid var(--color-primary-darker);
-}
-
-.repo {
- display: block;
- width: 3em;
- height: 3em;
- background: none;
- box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
- var(--color-shadow),
- fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1)
- var(--color-shadow),
- fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3)
- var(--color-shadow),
- 0 0 0 0 var(--color-shadow);
- transition: all 0.3s linear 0s;
-
- &:hover,
- &:focus {
- box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
- var(--color-shadow),
- fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1)
- var(--color-shadow-light),
- fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4)
- var(--color-shadow-light),
- fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3)
- var(--color-shadow);
- transform: scale(1.15);
- }
-
- &:focus {
- outline: var(--color-primary) dashed fun.convert-px(2);
- }
-
- &:active {
- box-shadow: 0 0 0 0 var(--color-shadow);
- outline: none;
- transform: scale(0.9);
- }
-}
diff --git a/src/components/ProjectSummary/ProjectSummary.tsx b/src/components/ProjectSummary/ProjectSummary.tsx
deleted file mode 100644
index 79e783e..0000000
--- a/src/components/ProjectSummary/ProjectSummary.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import GithubIcon from '@assets/images/social-media/github.svg';
-import GitlabIcon from '@assets/images/social-media/gitlab.svg';
-import { ProjectMeta } from '@ts/types/app';
-import { settings } from '@utils/config';
-import { getFormattedDate } from '@utils/helpers/format';
-import { slugify } from '@utils/helpers/slugify';
-import useGithubApi from '@utils/hooks/useGithubApi';
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import { useIntl } from 'react-intl';
-import styles from './ProjectSummary.module.scss';
-
-const ProjectSummary = ({
- id,
- meta,
-}: {
- id: string;
- title: string;
- meta: ProjectMeta;
-}) => {
- const { hasCover, license, repos, technologies } = meta;
- const intl = useIntl();
- const router = useRouter();
- const locale = router.locale ? router.locale : settings.locales.defaultLocale;
- const { data } = useGithubApi(repos?.github ? repos.github : '');
-
- return (
- <div className={styles.wrapper}>
- {hasCover && (
- <div className={styles.cover}>
- <Image
- src={`/projects/${id}.jpg`}
- alt={intl.formatMessage({
- defaultMessage: '{title} preview',
- description: 'ProjectSummary: cover alt text',
- id: 'mh7tGg',
- })}
- layout="fill"
- objectFit="contain"
- />
- </div>
- )}
- <dl className={styles.info}>
- {data && (
- <div className={styles.info__item}>
- <dt>
- {intl.formatMessage({
- defaultMessage: 'Created on:',
- description: 'ProjectSummary: creation date label',
- id: 'CWi0go',
- })}
- </dt>
- <dd>
- <time dateTime={data.created_at}>
- {getFormattedDate(data.created_at, locale)}
- </time>
- </dd>
- </div>
- )}
- {data && (
- <div className={styles.info__item}>
- <dt>
- {intl.formatMessage({
- defaultMessage: 'Last updated on:',
- description: 'ProjectSummary: update date label',
- id: 'vJ+QDV',
- })}
- </dt>
- <dd>
- <time dateTime={data.updated_at}>
- {getFormattedDate(data.updated_at, locale)}
- </time>
- </dd>
- </div>
- )}
- <div className={styles.info__item}>
- <dt>
- {intl.formatMessage({
- defaultMessage: 'License:',
- description: 'ProjectSummary: license label',
- id: 'hKagVG',
- })}
- </dt>
- <dd>{license}</dd>
- </div>
- {technologies && (
- <div className={styles.info__item}>
- <dt>
- {intl.formatMessage(
- {
- defaultMessage:
- '{count, plural, =0 {Technologies:} one {Technology:} other {Technologies:}}',
- description: 'ProjectSummary: technologies list label',
- id: 'enwhNm',
- },
- { count: technologies.length }
- )}
- </dt>
- {technologies.map((techno) => (
- <dd
- key={slugify(techno)}
- className={`${styles.techno} ${styles['inline-data']}`}
- >
- {techno}
- </dd>
- ))}
- </div>
- )}
- {repos && (
- <div className={styles.info__item}>
- <dt>
- {intl.formatMessage(
- {
- defaultMessage:
- '{count, plural, =0 {Repositories:} one {Repository:} other {Repositories:}}',
- description: 'ProjectSummary: repositories list label',
- id: 'OTTv+m',
- },
- { count: Object.keys(repos).length }
- )}
- </dt>
- {repos.github && (
- <dd className={styles['inline-data']}>
- <a
- href={`https://github.com/${repos.github}`}
- className={styles.repo}
- >
- <GithubIcon />
- <span className="screen-reader-text">Github</span>
- </a>
- </dd>
- )}
- {repos.gitlab && (
- <dd className={styles['inline-data']}>
- <a
- href={`https://gitlab.com/${repos.gitlab}`}
- className={styles.repo}
- >
- <GitlabIcon />
- <span className="screen-reader-text">Gitlab</span>
- </a>
- </dd>
- )}
- </div>
- )}
- {data && repos && (
- <div>
- <dt>
- {intl.formatMessage({
- defaultMessage: 'Popularity:',
- description: 'ProjectSummary: popularity label',
- id: 'vgMk0q',
- })}
- </dt>
- {repos.github && (
- <dd>
- ⭐&nbsp;
- <a href={`https://github.com/${repos.github}/stargazers`}>
- {intl.formatMessage(
- {
- defaultMessage:
- '{starsCount, plural, =0 {0 stars on Github} one {# star on Github} other {# stars on Github}}',
- description: 'ProjectSummary: technologies list label',
- id: 'aA3hOT',
- },
- { starsCount: data.stargazers_count }
- )}
- </a>
- </dd>
- )}
- </div>
- )}
- </dl>
- </div>
- );
-};
-
-export default ProjectSummary;
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 05:06:21 +0000