Skip to content

Commit 6b6b7ef

Browse files
fezcodefezcode
committed
style: app cards.
1 parent 3c7d951 commit 6b6b7ef

File tree

3 files changed

+45
-24
lines changed

3 files changed

+45
-24
lines changed

‎src/components/AppCard.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ const AppCard = ({ app }) => {
1919
return (
2020
<Link to={to} className="block h-full">
2121
<div
22-
className="group bg-transparent border rounded-lg shadow-lg p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-2xl overflow-hidden h-full"
23-
style={cardStyle}
22+
className="group border rounded-lg shadow-lg p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out overflow-hidden h-full bg-app-alpha-10 border-app-alpha-50 text-app hover:bg-rose-900/30"
2423
>
2524
<div
2625
className="absolute top-0 left-0 w-full h-full opacity-10 group-hover:opacity-0 transition-opacity duration-500 ease-in-out"

‎src/pages/AppPage.js‎

Lines changed: 39 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState, useEffect } from 'react';
22
import { Link } from 'react-router-dom';
33
import { ArrowLeftIcon, CaretDown, CaretRight } from '@phosphor-icons/react';
4+
import { motion, AnimatePresence } from 'framer-motion'; // Import motion and AnimatePresence
45
import AppCard from '../components/AppCard';
56
import useSeo from "../hooks/useSeo";
67
import { appIcons } from '../utils/appIcons'; // Import appIcons
@@ -43,6 +44,11 @@ function AppPage() {
4344
}));
4445
};
4546

47+
const variants = {
48+
open: { opacity: 1, height: "auto" },
49+
collapsed: { opacity: 0, height: 0 }
50+
};
51+
4652
return (
4753
<div className="py-16 sm:py-24">
4854
<div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">
@@ -63,27 +69,39 @@ function AppPage() {
6369
.map(categoryKey => {
6470
const category = groupedApps[categoryKey];
6571
const CategoryIcon = appIcons[category.icon];
66-
return (
67-
<div key={categoryKey} className="mt-8">
68-
<h2
69-
className="text-3xl font-arvo font-normal tracking-tight text-gray-200 mb-2 flex items-center cursor-pointer"
70-
onClick={() => toggleCategoryCollapse(categoryKey)}
71-
>
72-
{collapsedCategories[categoryKey] ? <CaretRight size={24} className="mr-2" /> : <CaretDown size={24} className="mr-2" />}
73-
{CategoryIcon && <CategoryIcon size={28} className="mr-2" />}
74-
{category.name} ({category.apps.length})
75-
</h2>
76-
<p className="text-gray-400 mb-4 ml-10">{category.description}</p>
77-
{!collapsedCategories[categoryKey] && (
78-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
79-
{category.apps.map((app, index) => (
80-
<AppCard key={index} app={app} />
81-
))}
82-
</div>
83-
)}
84-
</div>
85-
);
86-
})}
72+
return (
73+
<div key={categoryKey} className="mt-8">
74+
<h2
75+
className="text-3xl font-arvo font-normal tracking-tight text-gray-200 mb-2 flex items-center cursor-pointer"
76+
onClick={() => toggleCategoryCollapse(categoryKey)}
77+
>
78+
{collapsedCategories[categoryKey] ? <CaretRight size={24} className="mr-2" /> : <CaretDown size={24} className="mr-2" />}
79+
{CategoryIcon && <CategoryIcon size={28} className="mr-2" />}
80+
{category.name} ({category.apps.length})
81+
</h2>
82+
<p className="text-gray-400 mb-4 ml-10">{category.description}</p>
83+
<AnimatePresence initial={false}>
84+
{!collapsedCategories[categoryKey] && (
85+
<motion.div
86+
key="content"
87+
initial="collapsed"
88+
animate="open"
89+
exit="collapsed"
90+
variants={variants}
91+
transition={{ duration: 0.3, ease: "easeInOut" }}
92+
style={{ overflow: "hidden" }}
93+
>
94+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
95+
{category.apps.map((app, index) => (
96+
<AppCard key={index} app={app} />
97+
))}
98+
</div>
99+
</motion.div>
100+
)}
101+
</AnimatePresence>
102+
</div>
103+
);
104+
})}
87105
</div>
88106
</div>
89107
);

‎src/pages/apps/JsonPimlConverterPage.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,11 @@ function JsonPimlConverterPage() {
107107
backgroundSize: '10px 10px',
108108
}}
109109
></div>
110-
<h1 className="text-3xl font-arvo font-normal mb-4 text-app">JSON - PIML Converter</h1>
110+
<h1 className="text-3xl font-arvo font-normal mb-4 text-app">JSON &lt;&gt; PIML Converter</h1>
111+
<div className="bg-yellow-900 bg-opacity-30 border border-yellow-700 text-yellow-300 px-4 py-3 rounded relative mb-6" role="alert">
112+
<strong className="font-bold">Beware:</strong>
113+
<span className="block sm:inline ml-2">PIML is in beta. Do not forget that JSON and PIML are not completely compatible.</span>
114+
</div>
111115
<hr className="border-gray-700 mb-4" />
112116
<div className="relative z-10 p-1">
113117
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">

0 commit comments

Comments
 (0)