self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-19 04:07:43 +02:00
Code Issues Releases Activity

docs: milestones (#4593)

Browse Source 
* docs: milestones

* fix: light mode

* feat: dates and links

* use item interface from timeline

* fix ssr build

* responseive design and styling

---------

Co-authored-by: martabal <74269598+martabal@users.noreply.github.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Jason Rasmussen
2023-10-22 22:34:23 -04:00
committed by GitHub
parent b05132a01a
commit 36b3521be8
6 changed files with 630 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
docs/src/components/timeline.tsx Normal file
View File

@ -0,0 +1,86 @@
import React from 'react';
import Icon from '@mdi/react';
import { mdiCheckboxMarkedCircleOutline } from '@mdi/js';
import useIsBrowser from '@docusaurus/useIsBrowser';
export interface Item {
icon: string;
title: string;
description?: string;
release: string;
tag?: string;
date: Date;
}
interface Props {
items: Item[];
}
export default function Timeline({ items }: Props): JSX.Element {
const isBrowser = useIsBrowser();
return (
<ul className="flex flex-col pl-4">
{items.map((item, index) => {
const isFirst = index === 0;
const isLast = index === items.length - 1;
const classNames: string[] = [];
if (isFirst) {
classNames.push('');
}
if (isLast) {
classNames.push('rounded rounded-b-full');
}
return (
<li key={index} className="flex min-h-24 w-[700px] max-w-[90vw]">
<div className="md:flex justify-start w-36 mr-8 items-center dark:text-immich-dark-primary text-immich-primary hidden">
{isBrowser ? item.date.toLocaleDateString(navigator.language) : ''}
</div>
<div className={`${isFirst && 'relative top-[50%]'} ${isLast && 'relative bottom-[50%]'}`}>
<div
className={`h-full border-solid border-4 border-immich-primary dark:border-immich-dark-primary ${
isFirst && 'rounded rounded-t-full'
} ${isLast && 'rounded rounded-b-full'}`}
></div>
</div>
<div className="z-10 flex items-center bg-immich-primary dark:bg-immich-dark-primary border-2 border-solid rounded-full dark:text-black text-white relative top-[50%] left-[-3px] translate-y-[-50%] translate-x-[-50%] w-8 h-8 shadow-lg ">
<Icon path={mdiCheckboxMarkedCircleOutline} size={1.25} />
</div>
<section className=" dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl flex flex-col w-full gap-2 p-4 ml-4 my-2 hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/10 transition-all">
<div className="m-0 text-lg flex w-full items-center justify-between gap-2">
<p className="m-0 items-start flex gap-2">
<Icon path={item.icon} size={1} />
<span>{item.title}</span>
</p>
<span className="dark:text-immich-dark-primary text-immich-primary">
{item.tag ? (
<a
href={`https://github.com/immich-app/immich/releases/tag/${item.tag}`}
target="_blank"
rel="noopener"
>
[{item.release}]{' '}
</a>
) : (
<span>
[{item.release} {isBrowser ? item.date.toLocaleDateString(navigator.language) : ''}]
</span>
)}
</span>
</div>
<div className="md:hidden text-xs">
Release Date - {isBrowser ? item.date.toLocaleDateString(navigator.language) : ''}
</div>
<p className="m-0 text-sm text-gray-600 dark:text-gray-300">{item.description}</p>
</section>
</li>
);
})}
</ul>
);
}