crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 15:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12 from Car-Part-Planet/feat/tab-sort

Browse Source 
feat: hardcode tab sort for now on plps
This commit is contained in:
jrphilo 2024-07-11 11:48:39 +02:00 committed by GitHub
commit fd8c85ef93
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/plp/tabs.tsx
View File

@ -5,6 +5,26 @@ import { getMetaobject } from 'lib/shopify';
import startCase from 'lodash.startcase';
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from './tab-components';
const keySort: { [key: string]: number } = {
title: 1,
about: 2,
upgrades: 3,
history: 4,
compatability: 5,
remanufactured_transmissions: 6,
remanufactured_engines: 7,
used_transmissions: 8,
used_engines: 9,
core_return_policy: 10,
shipping: 11,
remanufactured_transmission_warranty: 12,
remanufactured_engine_warranty: 13,
used_transmission_warranty: 14,
used_engine_warranty: 15,
faqs: 16,
best_price_guarantee: 17
};
const TabContent = async ({ id }: { id?: string }) => {
if (!id) {
return null;
@ -31,11 +51,20 @@ const Tabs = ({ fields }: { fields: { [key: string]: string } }) => {
const isShopifyId = (value?: string) => value?.startsWith('gid://shopify');
const sortedKeys = keys.sort((a, b) => {
const orderA = keySort[a] ?? Infinity;
const orderB = keySort[b] ?? Infinity;
if (orderA === orderB) {
return a.localeCompare(b);
}
return orderA - orderB;
});
return (
<TabGroup vertical>
<div className="flex w-full gap-x-10">
<TabList className="flex shrink-0 basis-1/4 flex-col gap-2">
{keys.map((key) => (
{sortedKeys.map((key) => (
<Tab
key={key}
className="flex items-center justify-between rounded-sm bg-gray-200/60 p-3 text-left text-sm font-medium text-content-strong focus:outline-none focus:ring-0 data-[selected]:bg-primary data-[selected]:text-white"
@ -46,7 +75,7 @@ const Tabs = ({ fields }: { fields: { [key: string]: string } }) => {
))}
</TabList>
<TabPanels className="flex basis-3/4">
{keys.map((key) => (
{sortedKeys.map((key) => (
<TabPanel className="flex min-w-full flex-col space-y-5" key={key}>
{isShopifyId(fields[key]) ? (
<TabContent id={fields[key]} />