Skip to content

Commit

Permalink
Frontend Trends: Improving UI and functionality (#875)
Browse files Browse the repository at this point in the history 
<!-- This is an auto-generated comment: release notes by OSS
Entelligence.AI -->
### Summary by Entelligence.AI

- New Feature: Expanded the trends categories on the main page to
include 'industry', 'innovation', 'research', 'product', and 'event' for
a more comprehensive user experience.
- Refactor: Improved code readability and consistency by introducing a
utility function `capitalizeFirstLetter` to handle string capitalization
dynamically.
- Style: Enhanced the UI layout and styling of the trends main page for
better user interaction.
- New Feature: Updated the Dreamforce page with a new loading state that
includes a spinning circle icon and a message, improving user experience
during data fetch operations.
<!-- end of auto-generated comment: release notes by OSS Entelligence.AI
-->
  • Loading branch information
@josancamon19
josancamon19 authored Sep 17, 2024
2 parents 13535fa + c0fd491 commit caf15d8
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 16 deletions.
10 changes: 9 additions & 1 deletion frontend/src/app/dreamforce/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import DreamforceHeader from '@/src/components/dreamforce/dreamforce-header';
import TrendsError from '@/src/components/dreamforce/trends-error';
import GetTrendsMainPage from '@/src/components/trends/get-trends-main-page';
import TrendsTitle from '@/src/components/trends/trends-title';
import { OnePointCircle } from 'iconoir-react';
import { ErrorBoundary } from 'next/dist/client/components/error-boundary';
import Image from 'next/image';
import { Fragment, Suspense } from 'react';
Expand All @@ -15,7 +16,14 @@ export default function DreamforcePage() {
<Image src={'/df-sf.png'} alt="Dreamforce Banner" width={1920} height={1080} className=' h-[10rem] md:h-[20rem] rounded-3xl w-full md:w-[80%] mx-auto object-cover bg-cover mb-10'/>
<TrendsTitle>
<ErrorBoundary errorComponent={TrendsError}>
<Suspense fallback={<></>}>
<Suspense fallback={
<div className='mx-auto mt-20 max-w-screen-md space-y-8'>
<p className='text-center text-lg text-gray-500'>
We are loading the trends for you. Please wait a moment.
</p>
<OnePointCircle className='mx-auto text-xl text-gray-500 animate-spin' />
</div>
}>
<GetTrendsMainPage />
</Suspense>
</ErrorBoundary>
Expand Down
62 changes: 47 additions & 15 deletions frontend/src/components/trends/get-trends-main-page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import getTrends from '@/src/actions/trends/get-trends';
import capitalizeFirstLetter from '@/src/utils/capitalize-first-letter';
import { ArrowDownCircle, ArrowUpCircle } from 'iconoir-react';

const categories = {
ceo: 'CEOs',
ai_product: 'AI Products',
industry: 'Industries',
innovation: 'Innovations',
company: 'Companies',
research: 'Research',
product: 'Products',
event: 'Events',
hardware_product: 'Hardware Products',
software_product: 'Software Products',
};
Expand Down Expand Up @@ -32,21 +38,27 @@ export default async function GetTrendsMainPage() {
{Object.keys(groupedTrends).map((category) => (
<div key={category} className="">
<h2 className="text-start text-2xl font-semibold text-[#03234d] md:text-3xl bg-[#04e1cb] py-3 rounded-t-lg px-3">
{categories[category]}
{categories['category'] ?? capitalizeFirstLetter(category)}
</h2>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 border border-solid border-gray-100 p-3 bg-white rounded-b-lg">
<div className="grid grid-cols-1 md:grid-cols-2 pt-3 pb-6 border border-solid border-gray-100 bg-white rounded-b-lg divide-x">
{groupedTrends[category].best.length > 0 && (
<div>
<h3 className="mb-2 text-lg font-semibold">
<div className='px-3'>
<h3 className="mb-2 text-base py-3 sticky top-16 md:top-0 bg-white z-10">
<ArrowUpCircle className="mr-1 inline-block text-sm text-green-500" />
Best {categories[category]}
</h3>
<ul className="flex flex-col gap-2">
<ul className="flex flex-col gap-5">
{groupedTrends[category].best.map((topic, index) => (
<li key={topic.id} className={`flex items-center text-base md:text-lg rounded-md p-2`}>
<li key={topic.id} className={`flex items-start justify-start text-base md:text-lg rounded-md relative border border-solid ${
index === 0
? 'border-amber-300 bg-gradient-to-r to-yellow-100/80 from-white'
: index === 1
? 'border-gray-500 '
: 'border-gray-300'
}`}>
{index < 3 && (
<span
className={`mr-2 flex h-5 w-5 items-center justify-center rounded-md p-0.5 text-xs font-bold ${
className={`flex h-5 rounded-sm items-center justify-center p-0.5 text-xs font-bold absolute -top-2.5 right-2 px-2 ${
index === 0
? 'bg-yellow-400'
: index === 1
Expand All @@ -58,24 +70,37 @@ export default async function GetTrendsMainPage() {
<sup className="text-[10px]">st</sup>
</span>
)}
{topic.topic}
<div className='p-2'>
<p className='font-semibold'>
{capitalizeFirstLetter(topic.topic)}
</p>
<p className='text-sm text-gray-500'>
{topic.memories_count} {topic.memories_count === 1 ? 'Conversartion' : 'Conversations'}
</p>
</div>
</li>
))}
</ul>
</div>
)}
{groupedTrends[category].worst.length > 0 && (
<div>
<h3 className="mb-2 text-lg font-semibold">
<div className='px-3'>
<h3 className="mb-2 text-base py-3 sticky top-16 md:top-0 bg-white z-10">
<ArrowDownCircle className="mr-1 inline-block text-sm text-red-500" />
Worst {categories[category]}
</h3>
<ul className="">
<ul className="flex flex-col gap-5">
{groupedTrends[category].worst.map((topic, index) => (
<li key={topic.id} className={`flex items-center text-base md:text-lg rounded-md p-2`}>
<li key={topic.id} className={`flex items-start justify-start text-base md:text-lg rounded-md relative border border-solid ${
index === 0
? 'border-amber-300 bg-gradient-to-r to-yellow-100/80 from-white'
: index === 1
? 'border-gray-500 '
: 'border-gray-300'
}`}>
{index < 3 && (
<span
className={`mr-2 flex h-5 w-5 items-center justify-center rounded-md p-0.5 text-xs font-bold ${
<span
className={`flex h-5 rounded-sm items-center justify-center p-0.5 text-xs font-bold absolute -top-2.5 right-2 px-2 ${
index === 0
? 'bg-yellow-400'
: index === 1
Expand All @@ -87,7 +112,14 @@ export default async function GetTrendsMainPage() {
<sup className="text-[10px]">st</sup>
</span>
)}
{topic.topic}
<div className='p-2'>
<p className='font-semibold'>
{capitalizeFirstLetter(topic.topic)}
</p>
<p className='text-sm text-gray-500'>
{topic.memories_count} {topic.memories_count === 1 ? 'Conversartion' : 'Conversations'}
</p>
</div>
</li>
))}
</ul>
Expand Down

0 comments on commit caf15d8

Please sign in to comment.