fix some

the-guild-org · May 27, 2024 · f76ec05 · f76ec05
1 parent f023122
commit f76ec05
Show file tree

Hide file tree

Showing 4 changed files with 14,118 additions and 11,067 deletions.
diff --git a/packages/components/src/components/changelog-list.stories.tsx b/packages/components/src/components/changelog-list.stories.tsx
@@ -9,10 +9,39 @@ export default {
     argTypes: {}
 } as Meta;
 
-const Template: Story<ChangelogType> = args => <ProductUpdates {...args} />;
+const Template: Story<ChangelogType> = args => <div>
+    <ProductUpdates {...args} />
+</div>
 
 export const Default = Template.bind({});
 Default.args = {
     changelogs: dummyChangelogList
 };
 
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+    changelogs: dummyChangelogList.map((item, index) => {
+        return {
+            ...item,
+            icon: <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+            </svg>
+        }
+    })
+}
+
+export const WithAndWithoutIcons = Template.bind({});
+WithAndWithoutIcons.args = {
+    changelogs: dummyChangelogList.map((item, index) => {
+        return {
+            ...item,
+            icon: index % 2 === 0 ?
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                </svg>
+                : null
+        }
+    })
+}
+
+
diff --git a/packages/components/src/components/changelog-list.tsx b/packages/components/src/components/changelog-list.tsx
@@ -1,45 +1,51 @@
 import { format } from "date-fns";
-import Link from "next/link";
-import { ReactElement } from "react";
-import clsx from 'clsx';
+import { ReactElement, ReactNode } from "react";
 
 
 export type ChangelogType = {
     title: string;
     date: string;
     description: string;
     route: string;
+    icon?: ReactNode
 };
 
-export function ProductUpdateItem(props: ChangelogType) {
+function ProductUpdateItem(props: ChangelogType) {
     return (
-        <li className="mb-10 ml-4">
-            <div className="absolute -left-1.5 mt-1.5 size-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700" />
-            <time
-                className="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
-                dateTime={props.date}
-            >
-                {format(new Date(props.date), 'do MMMM yyyy')}
-            </time>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                <Link href={props.route}>{props.title}</Link>
-            </h3>
-            <div className="mb-4 mt-1 max-w-[600px] text-base font-normal leading-6 text-gray-500 dark:text-gray-400">
-                {props.description}
+        <div className="flex relative pt-[10px] pb-5 sm:items-center md:w-2/3 mx-auto">
+            <div className="h-full w-3 absolute inset-0 flex items-center justify-center">
+                <div className="h-full w-[2px] bg-gray-100 pointer-events-none" />
             </div>
-        </li>
+            <div className="flex-shrink-0 w-3 h-3 rounded-full mt-10 sm:mt-0 inline-flex items-end justify-end bg-gray-200 text-white relative z-10" />
+            <div className="flex-grow md:pl-8 pl-6 flex sm:items-center items-start flex-col sm:flex-row">
+                {props.icon ?
+                    <div className="inline-flex items-center justify-center relative z-10">
+                        {props.icon}
+                    </div> : null
+                }
+                <div className="flex-grow  sm:pl-6 mt-6 sm:mt-0">
+                    <time className="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500" dateTime={props.date}>
+                        {format(new Date(props.date), 'do MMMM yyyy')}
+                    </time>
+                    <h2 className="text-lg font-semibold text-gray-900 dark:text-white title-font mb-1">
+                        <a className="hover:underline cursor-pointer" href={props.route}>{props.title}</a>
+                    </h2>
+                    <p className="mb-4 mt-1 max-w-[600px] text-base font-normal leading-6 text-gray-500 dark:text-gray-400">{props.description}</p>
+                </div>
+            </div>
+        </div>
     );
 }
 
 export const ProductUpdates = (props: { changelogs: ChangelogType[] }): ReactElement => {
     return (
-        <>
-            <ol className="space-y-10">
-                {props.changelogs.map(item => (
-                    <ProductUpdateItem key={item.route} {...item} />
+        <div>
+            <div className="container px-5 py-24 mx-auto flex flex-wrap">
+                {props.changelogs.map((changelog, index) => (
+                    <ProductUpdateItem key={index} {...changelog} />
                 ))}
-            </ol>
-        </>
+            </div>
+        </div>
     );
 }
 
diff --git a/packages/components/src/helpers/dummy.ts b/packages/components/src/helpers/dummy.ts
@@ -18,8 +18,10 @@ import featureListImage2 from '../static/dummy/envelop/features-performant.png';
 import featureListImage1 from '../static/dummy/envelop/features-pluggable.png';
 import marketplaceListImage from '../static/dummy/marketplace/logo-modules.svg';
 import yogaImage from '../static/illustrations/yoga.svg';
+import { ChangelogType } from '../components/changelog-list';
+
+export const dummyChangelogList: ChangelogType[] = [
 
-export const dummyChangelogList: IChangelogListProps[] = [
   {
     title: 'GraphQL Modules',
     date: '2021-05-07T10:14:55.884Z',